feat(menu-item): Update spacing and icon layout #7381

macandcheese · 2023-07-26T18:34:08Z

Related Issue: #7105

Summary

Updates Menu Item to reflect Figma designs for complex combinations of props:

driskull

👍

driskull · 2023-07-26T20:46:02Z

packages/calcite-components/src/components/menu-item/menu-item.tsx

+        {this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
+          <calcite-icon
+            class={CSS.hoverHrefIcon}
+            icon={dir === "rtl" ? "arrow-left" : "arrow-right"}


Does this need a key attr?

Moved this to its own render method and added a key.

jcfranco

Noice! ✨👨‍🍳🥣✨

jcfranco · 2023-07-27T19:07:53Z

packages/calcite-components/src/components/menu-item/menu-item.tsx

+        class={CSS.hoverHrefIcon}
+        icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
+        key={CSS.dropdownAction}
+        scale="s"


Does the icon scale need to adjust based on the menu item's scale?

Menu / Menu Item don't currently have scale, but when added down the road this would change.

packages/calcite-components/src/components/menu-item/menu-item.tsx

jcfranco · 2023-07-27T19:12:48Z

packages/calcite-components/src/components/menu/menu.stories.ts

+            <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"> </calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Something else"> </calcite-menu-item>


Nitpick: empty tags should avoid whitespace.

jcfranco · 2023-07-27T19:13:22Z

packages/calcite-components/src/components/menu/menu.stories.ts

@@ -53,7 +53,68 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
  <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;

-export const verticalLyoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
+export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shell-panel width-scale="l">


Nitpick: extra space before the HTML.

macandcheese · 2023-07-27T20:01:35Z

Ready to merge pending Chromatic approval for added and updated stories.

**Related Issue:** #7105 ## Summary Updates Menu Item to reflect Figma designs for complex combinations of props: <img width="330" alt="Screenshot 2023-07-26 at 3 22 06 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/9a5da692-7698-4739-b984-e61409521eb4">

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * **action-group:** Adds overlayPositioning property. ([#7366](#7366)) ([ca9f35a](ca9f35a)) * Allow sharing focus trap stacks via configuration global ([#7334](#7334)) ([934a19f](934a19f)) * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) * **block, block-section:** Add setFocus method ([#7208](#7208)) ([35d4bbb](35d4bbb)) * **block:** Improve block's content layout to allow scrolling ([#7367](#7367)) ([ecbf17b](ecbf17b)) * **color-picker:** Replaces thumb focus outline to rounded ([#7378](#7378)) ([d803980](d803980)) * **filter:** Add filter method ([#7127](#7127)) ([5a4283f](5a4283f)) * **flow:** Adds setFocus method ([#7252](#7252)) ([2472c58](2472c58)) * Improve focus behavior in components ([#7277](#7277)) ([ad9fbca](ad9fbca)) * **input-time-zone:** Add input-time-zone component ([#6947](#6947)) ([87bd496](87bd496)) * **list:** Add slots for filter actions ([#7183](#7183)) ([da07ab1](da07ab1)) * **list:** Add support for dragging items. ([#7109](#7109)) ([7324f70](7324f70)) * **menu-item:** Update spacing and icon layout ([#7381](#7381)) ([5659671](5659671)) * **navigation-logo:** Increase font-size of heading with no description ([#7081](#7081)) ([355e101](355e101)) * **switch:** Updates focus outline to be rounded ([#7390](#7390)) ([2616b82](2616b82)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7299](#7299)) ([c5678eb](c5678eb)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7412](#7412)) ([c1af3c7](c1af3c7)) ### Bug Fixes * **accordion, accordion-item:** `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes ([#7191](#7191)) ([2b09aba](2b09aba)) * **action-bar:** No longer delegates focus when clicked on non-focusable region ([#7310](#7310)) ([1a9c15c](1a9c15c)) * **action:** Correctly focus the button after rendering updates. ([#7255](#7255)) ([40fe2ce](40fe2ce)) * **block:** Loader now appears for all loading cases ([#7303](#7303)) ([5af3600](5af3600)) * **block:** Removes extra loading indicator ([#7239](#7239)) ([a334a75](a334a75)) * **card:** Ensure teardown logic is called when disconnected ([#7289](#7289)) ([d07e322](d07e322)) * **chip:** Disconnect mutation observer when component is disconnected from the DOM ([#7418](#7418)) ([412e5fb](412e5fb)) * **color-picker:** Draw slider thumbs within bounds ([#7398](#7398)) ([2f37854](2f37854)) * **color-picker:** Fix opacity slider keyboard nudging ([#7400](#7400)) ([2b4f7c3](2b4f7c3)) * **color-picker:** Maintains correct numbering system when entering invalid RGB value ([#7327](#7327)) ([8d2a3a5](8d2a3a5)) * **combobox:** Add space after grouped items ([#7302](#7302)) ([b1580c7](b1580c7)) * **dropdown-item:** Provides accessible label when href is not parsed ([#7316](#7316)) ([966b83d](966b83d)) * **flow:** Call setFocus() on back button click ([#7285](#7285)) ([9102aa4](9102aa4)) * **input-date-picker:** Provides placeholder text context for AT users ([#7320](#7320)) ([31e0ba2](31e0ba2)) * **input-date-picker:** Reset active date picker date after closing ([#7219](#7219)) ([91b2a1b](91b2a1b)) * **input, input-number:** No longer removes trailing decimal separator ([#7159](#7159)) ([01535cf](01535cf)) * **link:** Adds outline-offset to avoid overlapping with text. ([#7342](#7342)) ([c30db4e](c30db4e)) * **list:** Changing filterText property will now update filtered items ([#7133](#7133)) ([a9c0bce](a9c0bce)) * **list:** Fix keyboard navigation after a listItem's disabled or closed property changes ([#7275](#7275)) ([91d28eb](91d28eb)) * **list:** Fix keyboard navigation when filterEnabled is true ([#7385](#7385)) ([41a2e42](41a2e42)) * **menu-item:** Prevent duplicate border in nested vertical menu-items ([#7387](#7387)) ([186a738](186a738)) * **panel:** Remove double border styling when content isn't provided ([#7368](#7368)) ([91a0610](91a0610)) * Remove style modifying all host components with hidden attribute ([#7346](#7346)) ([3103e2f](3103e2f)) * **scrim:** Update loader scale on resize of component. ([#7419](#7419)) ([24e7f70](24e7f70)) * **slider:** Prevent excessive tick rendering ([#7421](#7421)) ([c799409](c799409)) * **switch:** Fix for focus outline style in certain cases ([#7414](#7414)) ([217324f](217324f)) * **tab-title:** Add full focus outline to closable tab button in high contrast mode ([#7272](#7272)) ([d812d17](d812d17)) * **tooltip:** Avoid extra before open/close event emitting ([#7422](#7422)) ([dbb6818](dbb6818)) * **tooltip:** Deprecate the label property due to the description coming from the component's content ([#7247](#7247)) ([7934d75](7934d75)) * **tooltip:** Emits `close` and `beforeClose` events when container is set to `display:none` ([#7258](#7258)) ([60a4683](60a4683)) * **tooltip:** Ensure --calcite-app-z-index-tooltip is applied ([#7345](#7345)) ([a9a7072](a9a7072)) </details> <details><summary>@esri/calcite-components-react: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

macandcheese added 2 commits July 26, 2023 11:21

feat(menu-item): Update spacing and icon layout

5c91981

Clean up

833ecbf

macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 26, 2023

macandcheese requested a review from a team as a code owner July 26, 2023 18:34

github-actions bot added the enhancement Issues tied to a new feature or request. label Jul 26, 2023

github-actions bot assigned macandcheese Jul 26, 2023

macandcheese added 2 commits July 26, 2023 11:54

Merge branch 'main' into macandcheese/7105-menu-item-styling

6aae9a7

Clean up

0510cb1

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 26, 2023

macandcheese added 2 commits July 26, 2023 12:02

Add story for complex vertical menu

e3546f3

Clean up

dcfc5c9

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 26, 2023

driskull approved these changes Jul 26, 2023

View reviewed changes

macandcheese added 3 commits July 26, 2023 14:48

Clean up style, update demo and test

8cdb087

Clean up

0c5af94

Clean up

2896fee

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 26, 2023

Clean up story

c7f90dd

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 26, 2023

Clean up story

1ac2d4c

jcfranco approved these changes Jul 27, 2023

View reviewed changes

macandcheese added 3 commits July 27, 2023 12:22

Update styles and stories

99bf067

Clean up style + demo

d9f9438

Pr feedback

e458e34

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 27, 2023

macandcheese added 2 commits July 27, 2023 12:42

Merge branch 'main' into macandcheese/7105-menu-item-styling

58e113b

Clean up

03c7368

macandcheese added 3 commits July 27, 2023 13:22

Update stories

8ea3c82

Pr feedback

be9330d

Merge branch 'main' into macandcheese/7105-menu-item-styling

dc18164

macandcheese merged commit 5659671 into main Jul 28, 2023

macandcheese deleted the macandcheese/7105-menu-item-styling branch July 28, 2023 00:53

github-actions bot added this to the 2023 July Priorities milestone Jul 28, 2023

calcite-admin mentioned this pull request Jul 28, 2023

chore: release latest #7261

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(menu-item): Update spacing and icon layout #7381

feat(menu-item): Update spacing and icon layout #7381

macandcheese commented Jul 26, 2023 •

edited

Loading

driskull left a comment

driskull Jul 26, 2023

macandcheese Jul 26, 2023

jcfranco left a comment

jcfranco Jul 27, 2023

macandcheese Jul 27, 2023

jcfranco Jul 27, 2023

jcfranco Jul 27, 2023

macandcheese commented Jul 27, 2023

feat(menu-item): Update spacing and icon layout #7381

feat(menu-item): Update spacing and icon layout #7381

Conversation

macandcheese commented Jul 26, 2023 • edited Loading

Summary

driskull left a comment

Choose a reason for hiding this comment

driskull Jul 26, 2023

Choose a reason for hiding this comment

macandcheese Jul 26, 2023

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Jul 27, 2023

Choose a reason for hiding this comment

macandcheese Jul 27, 2023

Choose a reason for hiding this comment

jcfranco Jul 27, 2023

Choose a reason for hiding this comment

jcfranco Jul 27, 2023

Choose a reason for hiding this comment

macandcheese commented Jul 27, 2023

macandcheese commented Jul 26, 2023 •

edited

Loading