@kaizen/components 1.68.1 → 1.68.3

package/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx

@@ -19,42 +19,39 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed} style={{ margin: "0 auto" }}>
-      <StickerSheet.Header headings={["Long list", "Short List"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <StickerSheet.Cell width={250}>
-            <Menu
-              menuVisible
-              autoHide="off"
-              button={
-                <Button
-                  label="Menu"
-                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
-                  iconPosition="end"
-                />
-              }
-            >
-              <MenuContentExample />
-            </Menu>
-          </StickerSheet.Cell>
-          <StickerSheet.Cell width={250}>
-            <Menu
-              menuVisible
-              autoHide="off"
-              button={
-                <Button
-                  label="Menu"
-                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
-                  iconPosition="end"
-                />
-              }
-            >
-              <MenuContentExample isShortList />
-            </Menu>
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet isReversed={isReversed} headers={["Long list", "Short List"]}>
+      <StickerSheet.Row>
+        <StickerSheet.Cell style={{ width: 250 }}>
+          <Menu
+            menuVisible
+            autoHide="off"
+            button={
+              <Button
+                label="Menu"
+                icon={<Icon name="keyboard_arrow_down" isPresentational />}
+                iconPosition="end"
+              />
+            }
+          >
+            <MenuContentExample />
+          </Menu>
+        </StickerSheet.Cell>
+        <StickerSheet.Cell style={{ width: 250 }}>
+          <Menu
+            menuVisible
+            autoHide="off"
+            button={
+              <Button
+                label="Menu"
+                icon={<Icon name="keyboard_arrow_down" isPresentational />}
+                iconPosition="end"
+              />
+            }
+          >
+            <MenuContentExample isShortList />
+          </Menu>
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   decorators: [

package/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] {

package/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

package/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

package/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

package/src/__future__/Icon/_docs/Icon.docs.stories.tsx

@@ -53,29 +53,23 @@ export const Filled: Story = {
 
 export const MirrorInRTL: Story = {
   render: args => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={['dir=["ltr"]', 'dir=["rtl"]']}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="arrow_forward">
-          <div dir="ltr" className="text-center">
-            <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
-          </div>
-          <div dir="rtl" className="text-center">
-            <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
-          </div>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="format_list_numbered">
-          <div dir="ltr" className="text-center">
-            <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
-          </div>
-          <div dir="rtl" className="text-center">
-            <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
-          </div>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet headers={['dir=["ltr"]', 'dir=["rtl"]']}>
+      <StickerSheet.Row header="arrow_forward">
+        <div dir="ltr" className="text-center">
+          <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
+        </div>
+        <div dir="rtl" className="text-center">
+          <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
+        </div>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="format_list_numbered">
+        <div dir="ltr" className="text-center">
+          <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
+        </div>
+        <div dir="rtl" className="text-center">
+          <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
+        </div>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx

@@ -35,85 +35,76 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Icon" isReversed={isReversed}>
-          <StickerSheet.Header
-            headings={["Outlined", "Filled", "Color"]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            {iconDefaultSet.map(name => (
-              <StickerSheet.Row key={name} rowTitle={name}>
-                <Icon {...defaultProps} name={name} />
-                <Icon {...defaultProps} name={name} isFilled />
-                <Icon {...defaultProps} name={name} className="text-blue-500" />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          title="Icon"
+          headers={["Outlined", "Filled", "Color"]}
+          isReversed={isReversed}
+        >
+          {iconDefaultSet.map(name => (
+            <StickerSheet.Row key={name} header={name}>
+              <Icon {...defaultProps} name={name} />
+              <Icon {...defaultProps} name={name} isFilled />
+              <Icon {...defaultProps} name={name} className="text-blue-500" />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
-        <StickerSheet heading="shouldMirrorInRTL" isReversed={isReversed}>
-          <StickerSheet.Header
-            headings={[
-              'true; dir=["ltr"]',
-              'true; dir=["rtl"]',
-              'false; dir=["rtl"]',
-            ]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            {mirrorInRTL.map(name => (
-              <StickerSheet.Row key={name} rowTitle={name}>
-                <div dir="ltr" className="text-center">
-                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
-                </div>
-                <div dir="rtl" className="text-center">
-                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
-                </div>
-                <div dir="rtl" className="text-center">
-                  <Icon {...defaultProps} name={name} />
-                </div>
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          title="shouldMirrorInRTL"
+          isReversed={isReversed}
+          headers={[
+            'true; dir=["ltr"]',
+            'true; dir=["rtl"]',
+            'false; dir=["rtl"]',
+          ]}
+        >
+          {mirrorInRTL.map(name => (
+            <StickerSheet.Row key={name} header={name}>
+              <div dir="ltr" className="text-center">
+                <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+              </div>
+              <div dir="rtl" className="text-center">
+                <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+              </div>
+              <div dir="rtl" className="text-center">
+                <Icon {...defaultProps} name={name} />
+              </div>
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
         <StickerSheet
-          heading="Alignment as children within other components"
+          title="Alignment as children within other components"
           isReversed={isReversed}
         >
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Text">
-              <Text variant="body">
-                Showcase alignment of an icon <Icon {...defaultProps} /> within
-                a sentence
-              </Text>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Label">
-              <Label>
-                Field label <Icon {...defaultProps} />
-              </Label>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="CheckboxField">
-              <CheckboxField
-                labelText={
-                  <>
-                    Checkbox label <Icon {...defaultProps} />
-                  </>
-                }
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Button (v2)">
-              <ButtonV2
-                label="Button label"
-                icon={<Icon {...defaultProps} />}
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Button (v3)">
-              <ButtonV3>
-                <Icon {...defaultProps} /> Button label
-              </ButtonV3>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row header="Text">
+            <Text variant="body">
+              Showcase alignment of an icon <Icon {...defaultProps} /> within a
+              sentence
+            </Text>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Label">
+            <Label>
+              Field label <Icon {...defaultProps} />
+            </Label>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="CheckboxField">
+            <CheckboxField
+              labelText={
+                <>
+                  Checkbox label <Icon {...defaultProps} />
+                </>
+              }
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Button (v2)">
+            <ButtonV2 label="Button label" icon={<Icon {...defaultProps} />} />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Button (v3)">
+            <ButtonV3>
+              <Icon {...defaultProps} /> Button label
+            </ButtonV3>
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )