Skip to content

Commit

Permalink
feat: simplified css and added story
Browse files Browse the repository at this point in the history
  • Loading branch information
@LuLaValva
LuLaValva committed Oct 5, 2022
1 parent e5a1de5 commit c266af7
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 39 deletions.
50 changes: 22 additions & 28 deletions dist/filter-menu/filter-menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,15 @@ span.filter-menu__radio svg {
flex-shrink: 1;
justify-content: center;
}
.filter-menu-form__item span.checkbox svg,
.filter-menu-form__item span.radio svg {
.filter-menu-form__item span.checkbox .checkbox__icon > svg,
.filter-menu-form__item span.radio .checkbox__icon > svg {
color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
}
span.filter-menu__item[role="menuitemcheckbox"],
span.filter-menu__item[role="menuitemradio"],
span.filter-menu__item[role^="menuitem"],
span.filter-menu-form__item {
display: block;
}
.filter-menu__item[role="menuitemcheckbox"],
.filter-menu__item[role="menuitemradio"],
.filter-menu__item[role^="menuitem"],
.filter-menu-form__item {
background-color: var(--filter-menu-item-background-color, var(--color-background-primary));
box-sizing: border-box;
Expand All @@ -61,37 +59,29 @@ span.filter-menu-form__item {
width: 100%;
padding: 8px 16px;
}
.filter-menu__item[role="menuitemcheckbox"]:hover,
.filter-menu__item[role="menuitemradio"]:hover,
.filter-menu__item[role^="menuitem"]:hover,
.filter-menu-form__item:hover {
background-color: var(--color-state-primary-hover, color-state-primary-hover);
}
.filter-menu__item[role="menuitemcheckbox"]:disabled,
.filter-menu__item[role="menuitemradio"]:disabled,
.filter-menu__item[role^="menuitem"]:disabled,
.filter-menu-form__item:disabled,
.filter-menu__item[role="menuitemcheckbox"][aria-disabled="true"],
.filter-menu__item[role="menuitemradio"][aria-disabled="true"],
.filter-menu__item[role^="menuitem"][aria-disabled="true"],
.filter-menu-form__item[aria-disabled="true"] {
color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
}
.filter-menu__item[role="menuitemcheckbox"]:disabled span > svg,
.filter-menu__item[role="menuitemradio"]:disabled span > svg,
.filter-menu__item[role^="menuitem"]:disabled span > svg,
.filter-menu-form__item:disabled span > svg,
.filter-menu__item[role="menuitemcheckbox"][aria-disabled="true"] span > svg,
.filter-menu__item[role="menuitemradio"][aria-disabled="true"] span > svg,
.filter-menu__item[role^="menuitem"][aria-disabled="true"] span > svg,
.filter-menu-form__item[aria-disabled="true"] span > svg {
color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
}
.filter-menu__item[role="menuitemcheckbox"]:disabled:hover,
.filter-menu__item[role="menuitemradio"]:disabled:hover,
.filter-menu__item[role^="menuitem"]:disabled:hover,
.filter-menu-form__item:disabled:hover,
.filter-menu__item[role="menuitemcheckbox"][aria-disabled="true"]:hover,
.filter-menu__item[role="menuitemradio"][aria-disabled="true"]:hover,
.filter-menu__item[role^="menuitem"][aria-disabled="true"]:hover,
.filter-menu-form__item[aria-disabled="true"]:hover {
background-color: inherit;
}
.filter-menu__item[role="menuitemcheckbox"]:last-child,
.filter-menu__item[role="menuitemradio"]:last-child,
.filter-menu__item[role^="menuitem"]:last-child,
.filter-menu-form__item:last-child {
margin-bottom: 8px;
}
Expand Down Expand Up @@ -144,16 +134,20 @@ button.filter-menu-form__footer[type="submit"]:hover {
flex-grow: 1;
margin-left: 8px;
}
.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked,
.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked {
display: none;
}
.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked,
.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked {
display: block;
}
.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked,
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked,
.filter-menu__item[role="menuitemcheckbox"]:not([aria-checked="true"]) svg.icon--checkbox-checked,
.filter-menu__item[role="menuitemradio"]:not([aria-checked="true"]) svg.icon--radio-checked {
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked {
display: none;
}
.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-checked,
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked,
.filter-menu__item[role="menuitemcheckbox"]:not([aria-checked="true"]) svg.icon--checkbox-unchecked,
.filter-menu__item[role="menuitemradio"]:not([aria-checked="true"]) svg.icon--radio-unchecked {
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
display: block;
}
div.filter-menu__item[role^="menuitem"]:focus:not(:focus-visible) {
Expand Down
26 changes: 15 additions & 11 deletions src/less/filter-menu/filter-menu.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,17 @@ span.filter-menu__radio {
flex-shrink: 1;
justify-content: center;

svg {
.checkbox__icon > svg {
.color-token(filter-menu-item-checked-color, color-foreground-primary);
}
}

span.filter-menu__item[role="menuitemcheckbox"],
span.filter-menu__item[role="menuitemradio"],
span.filter-menu__item[role^="menuitem"],
span.filter-menu-form__item {
display: block;
}

.filter-menu__item[role="menuitemcheckbox"],
.filter-menu__item[role="menuitemradio"],
.filter-menu__item[role^="menuitem"],
.filter-menu-form__item {
.filter-menu-item-base();

Expand Down Expand Up @@ -92,17 +90,23 @@ button.filter-menu-form__footer[type="submit"] {
margin-left: 8px;
}

.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked,
.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked {
display: none;
}

.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked,
.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked {
display: block;
}

.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked,
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked,
.filter-menu__item[role="menuitemcheckbox"]:not([aria-checked="true"]) svg.icon--checkbox-checked,
.filter-menu__item[role="menuitemradio"]:not([aria-checked="true"]) svg.icon--radio-checked {
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked {
display: none;
}

.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-checked,
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked,
.filter-menu__item[role="menuitemcheckbox"]:not([aria-checked="true"]) svg.icon--checkbox-unchecked,
.filter-menu__item[role="menuitemradio"]:not([aria-checked="true"]) svg.icon--radio-unchecked {
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
display: block;
}

Expand Down
40 changes: 40 additions & 0 deletions src/less/filter-menu/stories/filter-menu.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,46 @@ export const base = () => `
</span>
`;

export const withDisabled = () => `
<span class="filter-menu">
<div class="filter-menu__items" role="menu">
<div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false" aria-disabled="true">
<span class="filter-menu__checkbox">
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-unchecked"></use>
</svg>
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-checked"></use>
</svg>
</span>
<span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
</div>
<div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
<span class="filter-menu__checkbox">
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-unchecked"></use>
</svg>
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-checked"></use>
</svg>
</span>
<span class="filter-menu__text">Item 2</span>
</div>
<div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
<span class="filter-menu__checkbox">
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-unchecked"></use>
</svg>
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
<use xlink:href="#icon-checkbox-checked"></use>
</svg>
</span>
<span class="filter-menu__text">Item 3</span>
</div>
</div>
</span>
`;

export const withFooterButton = () => `
<span class="filter-menu">
<div class="filter-menu__items" role="menu">
Expand Down

0 comments on commit c266af7

Please sign in to comment.