Skip to content

Commit

Permalink
feat: add menu icon class, closes #202 (#331)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Martskin @lazd
Martskin authored and lazd committed Oct 29, 2019
1 parent 7258ed6 commit 169940a
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 46 deletions.
64 changes: 32 additions & 32 deletions components/dropdown/metadata/dropdown.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,26 +27,26 @@ examples:
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Ballard</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Fremont</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Greenwood</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">United States of America</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
Expand All @@ -70,39 +70,39 @@ examples:
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">Ballard</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">Fremont</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">Greenwood</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">United States of America</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
Expand Down Expand Up @@ -150,26 +150,26 @@ examples:
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Ballard</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Fremont</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Greenwood</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">United States of America</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
Expand Down Expand Up @@ -218,26 +218,26 @@ examples:
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Ballard</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Fremont</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Greenwood</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">United States of America</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
Expand All @@ -261,39 +261,39 @@ examples:
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">Ballard</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">Fremont</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">Greenwood</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Menu-itemLabel">United States of America</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
Expand Down Expand Up @@ -341,26 +341,26 @@ examples:
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Ballard</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Fremont</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Greenwood</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">United States of America</span>
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
</svg>
</li>
Expand Down
6 changes: 4 additions & 2 deletions components/menu/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,15 @@ governing permissions and limitations under the License.
}
}

.spectrum-Icon {
.spectrum-Icon,
.spectrum-Menu-itemIcon {
/* Don't get smaller, you're an icon! */
flex-shrink: 0;
align-self: flex-start;
}

.spectrum-Icon + .spectrum-Menu-itemLabel {
.spectrum-Icon + .spectrum-Menu-itemLabel,
.spectrum-Menu-itemIcon + .spectrum-Menu-itemLabel {
margin-left: var(--spectrum-selectlist-thumbnail-image-padding-x);
}
}
Expand Down
Loading

0 comments on commit 169940a

Please sign in to comment.