Skip to content

Commit

Permalink
Merge pull request #1245 from pat270/clay-1240
Browse files Browse the repository at this point in the history 
Fixes #1240 - Dropdown Menu added `.dropdown-item-indicator-start` and `.dropdown-item-indicator-end` for placing icons on either side of a dropdown-item and deprecated `.dropdown-item-indicator`
  • Loading branch information
@carloslancha
carloslancha authored Oct 31, 2018
2 parents a396d1c + 7ea6214 commit 71e8a0e
Show file tree
Hide file tree
Showing 12 changed files with 269 additions and 83 deletions.
106 changes: 106 additions & 0 deletions clayui.com/content/docs/components/dropdowns.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -549,6 +549,112 @@ A dropdown is a list of options related to the element that triggers it.
</div>
```

#### Dropdown with Left and Right Icons

<div class="clay-site-dropdown-menu-container">
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu dropdown-menu-indicator-end dropdown-menu-indicator-start">
<ul class="list-unstyled">
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="/images/icons/icons.svg#pencil" />
</svg>
</span>
Normal Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="/images/icons/icons.svg#view" />
</svg>
</span>
Second Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="/images/icons/icons.svg#check" />
</svg>
</span>
Third Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
</ul>
</div>
</div>

```html
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu dropdown-menu-indicator-end dropdown-menu-indicator-start">
<ul class="list-unstyled">
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="/images/icons/icons.svg#pencil" />
</svg>
</span>
Normal Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="/images/icons/icons.svg#view" />
</svg>
</span>
Second Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="/images/icons/icons.svg#check" />
</svg>
</span>
Third Option
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
</ul>
</div>
```

#### Dropdown with groups

> This dropdown menu variation is for use with the management bar Filter and Order dropdown button. This configuration is used to refine the management bar UI options, providing the user with more specific mechanisms to find data.
Expand Down
74 changes: 62 additions & 12 deletions packages/clay-css/src/content/dropdowns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,31 +541,31 @@ <h6>dropdown-menu-indicator-start</h6>
<li class="dropdown-subheader">Dropdown Sub Header</li>
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
</svg>
</div>
</span>
Ticket Buyer Information
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
</svg>
</div>
</span>
Attendee Information
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<div class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
</svg>
</div>
</span>
Seat Assignment
</a>
</li>
Expand All @@ -586,31 +586,31 @@ <h6>dropdown-menu-indicator-end</h6>
<li>
<a class="active dropdown-item" href="#1">
Step 01
<div class="dropdown-item-indicator">
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
</svg>
</div>
</span>
</a>
</li>
<li>
<a class="disabled dropdown-item" href="#1" tabindex="-1">
Step 02
<div class="dropdown-item-indicator">
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
</svg>
</div>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
Step 03
<div class="dropdown-item-indicator">
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
</svg>
</div>
</span>
</a>
</li>
<li><a class="dropdown-item" href="#1">Step 04</a></li>
Expand All @@ -619,6 +619,56 @@ <h6>dropdown-menu-indicator-end</h6>
</ul>

</div>

<div class="col-md-6">
<h6>dropdown-menu-indicator-start</h6>
<h6>dropdown-menu-indicator-end</h6>

<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu dropdown-menu-indicator-end dropdown-menu-indicator-start">
<li class="dropdown-header">Dropdown Header</li>
<li class="dropdown-divider"></li>
<li class="dropdown-subheader">Dropdown Sub Header</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-pencil">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#pencil" />
</svg>
</span>
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
<span class="dropdown-item-indicator-end">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#angle-right" />
</svg>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
Attendee Information
</a>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
</svg>
</span>
Seat Assignment
</a>
</li>
<li><a class="active dropdown-item" href="#1">Dinner Preference</a></li>
<li><a class="dropdown-item" href="#1">Submit Payment</a></li>
<li class="dropdown-caption">Dropdown Caption</li>
</ul>

</div>
</div>

<div class="clay-site-row-spacer row clay-site-dropdown-display">
Expand Down
30 changes: 15 additions & 15 deletions packages/clay-css/src/content/management-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ <h3>Navbar Management Bar</h3>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-indicator-start">
<li>
<a class="active dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#list" />
</svg>
Expand All @@ -109,7 +109,7 @@ <h3>Navbar Management Bar</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#table" />
</svg>
Expand All @@ -119,7 +119,7 @@ <h3>Navbar Management Bar</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#cards2" />
</svg>
Expand Down Expand Up @@ -224,7 +224,7 @@ <h3>Navbar Management Bar</h3>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-indicator-start">
<li>
<a class="active dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#list" />
</svg>
Expand All @@ -234,7 +234,7 @@ <h3>Navbar Management Bar</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#table" />
</svg>
Expand All @@ -244,7 +244,7 @@ <h3>Navbar Management Bar</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#cards2" />
</svg>
Expand Down Expand Up @@ -333,7 +333,7 @@ <h3>Navbar Management Bar</h3>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-indicator-start">
<li>
<a class="active dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#list" />
</svg>
Expand All @@ -343,7 +343,7 @@ <h3>Navbar Management Bar</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#table" />
</svg>
Expand All @@ -353,7 +353,7 @@ <h3>Navbar Management Bar</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#cards2" />
</svg>
Expand Down Expand Up @@ -679,7 +679,7 @@ <h3>With Buttons</h3>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-indicator-start">
<li>
<a class="active dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#list" />
</svg>
Expand All @@ -689,7 +689,7 @@ <h3>With Buttons</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#table" />
</svg>
Expand All @@ -699,7 +699,7 @@ <h3>With Buttons</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#cards2" />
</svg>
Expand Down Expand Up @@ -804,7 +804,7 @@ <h3>With Buttons</h3>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-indicator-start">
<li>
<a class="active dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#list" />
</svg>
Expand All @@ -814,7 +814,7 @@ <h3>With Buttons</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#table" />
</svg>
Expand All @@ -824,7 +824,7 @@ <h3>With Buttons</h3>
</li>
<li>
<a class="dropdown-item" href="#1">
<span class="dropdown-item-indicator">
<span class="dropdown-item-indicator-start">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#cards2" />
</svg>
Expand Down
Loading

0 comments on commit 71e8a0e

Please sign in to comment.