fix(Menu v3): Only show MenuItem border/outline on focus-visible (#5297)

* fix(Menu v3): only show MenuItem border on focus-visible * Use outline instead of border on MenuItem focus-visible * Use secondary for all buttons in menu stories
cultureamp · Nov 22, 2024 · ce1c62a · ce1c62a
1 parent c10480c
commit ce1c62a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 8 deletions.
diff --git a/.changeset/shaggy-plants-rescue.md b/.changeset/shaggy-plants-rescue.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Menu v3: only show MenuItem outline/border on focus-visible, not focus/hover
diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.module.css b/packages/components/src/__actions__/Menu/v3/MenuItem.module.css
@@ -27,11 +27,19 @@
   align-items: center;
 }
 
-.item[data-focused] {
+.item:focus {
+  outline: none;
+}
+
+.item[data-hovered],
+.item[data-focus-visible] {
   background-color: var(--color-blue-100);
   color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
+}
+
+.item[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width)
+    var(--border-focus-ring-border-style) var(--color-blue-500);
 }
 
 .item[data-disabled] {

diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
@@ -44,6 +44,7 @@ export const Actions: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -66,6 +67,7 @@ export const ItemsDo: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -85,6 +87,7 @@ export const ItemsDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -103,7 +106,7 @@ export const ItemsDont: Story = {
 export const SelectionDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Sort by
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -122,7 +125,7 @@ export const SelectionDont: Story = {
 export const LabelChevronDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Edit item
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -138,7 +141,7 @@ export const LabelChevronDo: Story = {
 export const LabelChevronDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>Edit item</Button>
+      <Button variant="secondary">Edit item</Button>
       <Popover>
         <Menu>
           <DefaultMenuItems />
@@ -151,7 +154,7 @@ export const LabelChevronDont: Story = {
 export const LabelDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Actions [visually hidden], conversation with Harper[/visually hidden]
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -167,7 +170,7 @@ export const LabelDo: Story = {
 export const LabelDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Open menu
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -186,6 +189,7 @@ export const IconsDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -212,6 +216,7 @@ export const MenuItemLabelsDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -233,6 +238,7 @@ export const SentenceCaseDo: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -254,6 +260,7 @@ export const SentenceCaseDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -275,6 +282,7 @@ export const ElipsesDo: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -296,6 +304,7 @@ export const ElipsesDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions

diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx
@@ -39,6 +39,7 @@ export const KitchenSink: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -91,6 +92,7 @@ export const Basic: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -177,6 +179,7 @@ export const DisabledItems: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -221,6 +224,7 @@ export const WithSections: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -256,6 +260,7 @@ export const Controlled: Story = {
         <MenuTrigger isOpen={isOpen} onOpenChange={setOpen}>
           <Button
             icon={<Icon name="more_horiz" isPresentational />}
+            variant="secondary"
             hasHiddenLabel
           >
             Additional actions

diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
@@ -28,6 +28,7 @@ export const Playground: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -75,6 +76,7 @@ export const RichContent: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions