Skip to content

Commit

Permalink
fix(menu)!: reimplement text truncating (#2299)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: removes flex-based display, renames classes, reintroduces truncation

Additionally:
* fix(menu): truncating class
* docs(menu): add truncating example
* docs(menu): improve docs
* feat(menu): add truncate example to storybook
* refactor(menu): remove flex from itemLabel
* feat(menu): wip adds truncating to all stories
* refactor(menu): removes uneeded code
* refactor(menu): removes hard coded ellipsis
* docs(menu): improve description
* chore(menu): story indenting
* docs(menu): improve storybook max-width
* refactor(menu): improves story
* docs(menu): adds to migration guide
* fix(menu): post rebase issues
  • Loading branch information
@jenndiaz
jenndiaz committed Jan 9, 2024
1 parent 890f469 commit 9752d02
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 77 deletions.
61 changes: 35 additions & 26 deletions components/menu/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ governing permissions and limitations under the License.
--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
--spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);

--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
Expand Down Expand Up @@ -71,7 +71,7 @@ governing permissions and limitations under the License.
--spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
--spectrum-menu-section-header-color: var(--spectrum-gray-900);
--spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);

--spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
--spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
--spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
Expand Down Expand Up @@ -120,7 +120,7 @@ governing permissions and limitations under the License.
--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
--spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);

--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
Expand All @@ -147,7 +147,7 @@ governing permissions and limitations under the License.
--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
--spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);

--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
Expand All @@ -174,7 +174,7 @@ governing permissions and limitations under the License.
--spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
--spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
--spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);

--spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
--spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
--spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
Expand Down Expand Up @@ -227,7 +227,7 @@ governing permissions and limitations under the License.
--highcontrast-checkbox-highlight-color-hover: ButtonText;
--highcontrast-checkbox-highlight-color-default: ButtonText;
}

.spectrum-Menu-itemSwitch {
--highcontrast-switch-handle-border-color-hover: ButtonText;
--highcontrast-switch-handle-border-color-selected-default: ButtonText;
Expand Down Expand Up @@ -281,7 +281,7 @@ governing permissions and limitations under the License.
.spectrum-Menu-divider {
--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
&.spectrum-Divider--sizeS {
--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small);
--spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small);
}

overflow: visible;
Expand Down Expand Up @@ -339,14 +339,14 @@ governing permissions and limitations under the License.
box-sizing: border-box;

background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));

line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));

min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));
padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));

margin: 0;
text-decoration: none;

Expand All @@ -365,7 +365,7 @@ governing permissions and limitations under the License.

.spectrum-Menu-itemSwitch {
min-block-size: 0;

.spectrum-Switch-switch {
margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));;
margin-block-end: 0;
Expand All @@ -377,11 +377,11 @@ governing permissions and limitations under the License.
display: grid;
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
grid-template-areas:
". chevronAreaCollapsible . iconArea sectionHeadingArea . . . "
". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . "
"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
". . . . descriptionArea . . . "
". . . . submenuArea . . . ";

grid-template-columns: auto auto auto auto 1fr auto auto auto;
grid-template-rows: 1fr auto;
}
Expand Down Expand Up @@ -422,7 +422,7 @@ governing permissions and limitations under the License.
> .spectrum-Menu-itemValue {
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
}

> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
Expand Down Expand Up @@ -469,7 +469,7 @@ governing permissions and limitations under the License.
> .spectrum-Menu-itemValue {
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
}

> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
Expand All @@ -492,7 +492,7 @@ governing permissions and limitations under the License.
> .spectrum-Menu-itemLabel {
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
}

> .spectrum-Menu-sectionHeading {
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
}
Expand All @@ -504,7 +504,7 @@ governing permissions and limitations under the License.
> .spectrum-Menu-itemValue {
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
}

> .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
Expand All @@ -526,6 +526,17 @@ governing permissions and limitations under the License.
align-self: start;
}

.spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon {
grid-area: headingIconArea;
}

.is-selectableMultiple .spectrum-Menu-item {
align-items: start;
}
.is-selectableMultiple .spectrum-Menu-itemCheckbox {
grid-area: iconArea;
}

.spectrum-Menu-checkmark {
grid-area: checkmarkArea;
align-self: start;
Expand All @@ -537,8 +548,6 @@ governing permissions and limitations under the License.

.spectrum-Menu-itemLabel {
grid-area: labelArea;
display: flex;
align-items: flex-start;
font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
}
Expand Down Expand Up @@ -640,7 +649,7 @@ governing permissions and limitations under the License.
margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}

.spectrum-Menu-itemLabel--wrapping {
.spectrum-Menu-itemLabel--truncate {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Expand Down Expand Up @@ -694,11 +703,11 @@ governing permissions and limitations under the License.
}

[dir="rtl"] .spectrum-Menu-chevron {
transform: rotate(-180deg);
transform: rotate(-180deg);
}

/*
assume that if an item is collapsible, it will
assume that if an item is collapsible, it will
have a chevron and we need to adjust position of submenu items to account for that
*/
.spectrum-Menu-item--collapsible .spectrum-Menu {
Expand Down Expand Up @@ -745,22 +754,22 @@ governing permissions and limitations under the License.
.spectrum-Menu-chevron {
fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
}
}
}

&:focus,
&.is-focused {
.spectrum-Menu-chevron {
fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
}
}
}

&:active {
.spectrum-Menu-chevron {
fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
}
}
}
}

Expand All @@ -773,11 +782,11 @@ governing permissions and limitations under the License.
.spectrum-Menu-sectionHeading {
color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
}

.spectrum-Menu-itemDescription {
color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
}

.spectrum-Menu-itemIcon {
fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
Expand Down
Loading

0 comments on commit 9752d02

Please sign in to comment.