@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/__next__/Tooltip/Tooltip.module.scss

@@ -5,53 +5,51 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .tooltip {
-    max-width: 200px;
-    padding: $spacing-8 $spacing-12;
-    color: $color-white;
-    text-align: center;
-    font-family: $typography-paragraph-extra-small-font-family;
-    font-size: $typography-paragraph-extra-small-font-size;
-    font-weight: $typography-paragraph-extra-small-font-weight;
-    letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-    line-height: $typography-paragraph-extra-small-line-height;
-    border-radius: $border-solid-border-radius;
-    box-shadow: $shadow-small-box-shadow;
-    background-color: $color-purple-800;
-    text-wrap: pretty;
+.tooltip {
+  max-width: 200px;
+  padding: $spacing-8 $spacing-12;
+  color: $color-white;
+  text-align: center;
+  font-family: $typography-paragraph-extra-small-font-family;
+  font-size: $typography-paragraph-extra-small-font-size;
+  font-weight: $typography-paragraph-extra-small-font-weight;
+  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
+  line-height: $typography-paragraph-extra-small-line-height;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+  background-color: $color-purple-800;
+  text-wrap: pretty;
 
-    /* fixes FF gap */
-    transform: translate3d(0, 0, 0);
+  /* fixes FF gap */
+  transform: translate3d(0, 0, 0);
 
-    &.reversed {
-      background-color: $color-white;
-      color: $color-purple-800;
-    }
+  &.reversed {
+    background-color: $color-white;
+    color: $color-purple-800;
+  }
 
-    &[data-placement='top'] {
-      --origin: translateY(4px);
-    }
+  &[data-placement='top'] {
+    --origin: translateY(4px);
+  }
 
-    &[data-placement='bottom'] {
-      --origin: translateY(-4px);
-    }
+  &[data-placement='bottom'] {
+    --origin: translateY(-4px);
+  }
 
-    &[data-placement='right'] {
-      --origin: translateX(-4px);
-    }
+  &[data-placement='right'] {
+    --origin: translateX(-4px);
+  }
 
-    &[data-placement='left'] {
-      --origin: translateX(4px);
-    }
+  &[data-placement='left'] {
+    --origin: translateX(4px);
+  }
 
-    &[data-entering] {
-      animation: slide $animation-duration-fast;
-    }
+  &[data-entering] {
+    animation: slide $animation-duration-fast;
+  }
 
-    &[data-exiting] {
-      animation: slide $animation-duration-fast reverse $animation-easing-function-ease-in;
-    }
+  &[data-exiting] {
+    animation: slide $animation-duration-fast reverse $animation-easing-function-ease-in;
   }
 }
 

package/src/__next__/Tooltip/_docs/ApiSpecification.mdx

@@ -28,7 +28,7 @@ Tooltips are brief floating labels used to add additional contextual information
   source={{
     code: `
 <TooltipTrigger>
-  <Button>Button</Button>
+  <Button label="Button" />
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
   `,
@@ -75,7 +75,7 @@ The `TooltipTrigger` wraps both the `Tooltip` and its trigger element, controlli
 ```jsx
 <TooltipTrigger>
   /* In this case the trigger element is the Button */
-  <Button>Button</Button>
+  <Button label="Button" />
   /* The Tooltip and its content is a child of the trigger */
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>

package/src/__next__/Tooltip/_docs/Tooltip.docs.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
+import { Button, IconButton } from '~components/Button'
 import { FieldMessage } from '~components/FieldMessage'
 import { Focusable } from '~components/Focusable'
 import { Input } from '~components/Input'
 import { Label } from '~components/Label'
 import { Text } from '~components/Text'
-import { Button } from '~components/__next__/Button'
 import { Icon } from '~components/__next__/Icon'
 import { Tooltip, TooltipTrigger } from '../index'
 import * as TestStories from './Tooltip.spec.stories'
@@ -37,7 +37,7 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={true} isOpen={isOpen}>
-      <Button>Button</Button>
+      <Button label="Button" />
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -46,9 +46,14 @@ export const Playground: Story = {
 export const Primary: Story = {
   render: () => (
     <TooltipTrigger>
-      <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
-        Add something
-      </Button>
+      <IconButton
+        label="Add something"
+        icon={<Icon name="add" isPresentational />}
+        primary
+        // Negate the aria description (added by RAC) as it should be the
+        // same as the accessible name, therefore no need to duplicate it
+        aria-describedby={null}
+      />
       <Tooltip>Add something</Tooltip>
     </TooltipTrigger>
   ),
@@ -100,9 +105,14 @@ export const DoConcise: Story = {
   render: () => (
     <div>
       <TooltipTrigger>
-        <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
-          Add topic
-        </Button>
+        <IconButton
+          label="Add topic"
+          icon={<Icon name="add" isPresentational />}
+          primary
+          // Negate the aria description (added by RAC) as it should be the
+          // same as the accessible name, therefore no need to duplicate it
+          aria-describedby={null}
+        />
         <Tooltip>Add topic to agenda</Tooltip>
       </TooltipTrigger>
     </div>
@@ -118,12 +128,17 @@ export const DontConcise: Story = {
   render: () => (
     <div>
       <TooltipTrigger>
-        <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
-          Add something
-        </Button>
+        <IconButton
+          label="Add something"
+          icon={<Icon name="add" isPresentational />}
+          primary
+          // Negate the aria description (added by RAC) as it should be the
+          // same as the accessible name, therefore no need to duplicate it
+          aria-describedby={null}
+        />
         <Tooltip>
           Add Topic to agenda. This will create a new topic where you can discuss recent work with
-          your manager.
+          your manager.{' '}
         </Tooltip>
       </TooltipTrigger>
     </div>
@@ -135,11 +150,11 @@ export const ShouldFlip: Story = {
   render: () => (
     <div className="flex flex-col gap-8 pl-96 overflow-hidden max-w-[250px]">
       <TooltipTrigger>
-        <Button>Should flip</Button>
+        <Button label="Should flip" />
         <Tooltip placement="end">Tooltip content</Tooltip>
       </TooltipTrigger>
       <TooltipTrigger>
-        <Button>Won&apos;t flip</Button>
+        <Button label="Won't flip" />
         <Tooltip placement="end" shouldFlip={false}>
           Tooltip content
         </Tooltip>
@@ -173,7 +188,7 @@ export const UncontrolledState: Story = {
           Toggle open
         </button>
         <TooltipTrigger isOpen={isOpen}>
-          <Button>Button</Button>
+          <Button label="Button" />
           <Tooltip>Tooltip content</Tooltip>
         </TooltipTrigger>
       </div>

package/src/__next__/Tooltip/_docs/Tooltip.mdx

@@ -34,7 +34,7 @@ Tooltips are brief floating labels used to add additional contextual information
   source={{
     code: `
 <TooltipTrigger>
-  <Button>Button</Button>
+  <Button label="Button" />
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
   `,

package/src/__next__/Tooltip/_docs/Tooltip.spec.stories.tsx

@@ -2,12 +2,11 @@ import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
+import { Button, IconButton } from '~components/Button'
 import { Focusable } from '~components/Focusable'
-import { LinkButton } from '~components/LinkButton'
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '~components/Tabs'
 import { Text } from '~components/Text'
-import { Button } from '~components/__next__/Button'
 import { Icon } from '~components/__next__/Icon'
-import { Tab, TabList, TabPanel, Tabs } from '~components/__next__/Tabs'
 import { Tag } from '~components/__next__/Tag'
 import { Tooltip, TooltipTrigger } from '../index'
 
@@ -33,10 +32,12 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+// TODO: update this to use the new `next` button component
+
 export const OnButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button>Button</Button>
+      <Button label="Button" />
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -45,12 +46,10 @@ export const OnButton: Story = {
     const button = canvas.queryByRole('button') ?? canvas.getByRole('link')
 
     await step('Hover shows', async () => {
-      await waitFor(() => userEvent.unhover(button))
+      await userEvent.unhover(button)
       await userEvent.hover(button)
-      const tooltip = canvas.findByRole('tooltip')
-      await expect(await tooltip).toBeInTheDocument()
-      await expect((await tooltip).checkVisibility()).toBe(true)
-      await expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
+      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
+      expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
       await userEvent.unhover(button)
     })
 
@@ -77,7 +76,7 @@ export const OnLink: Story = {
   ...OnButton,
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <LinkButton href="#">Button</LinkButton>
+      <Button label="Button" href="#" />
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -87,9 +86,12 @@ export const OnButtonWithDesc: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <>
       <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-        <Button icon={<Icon name="add" isPresentational />} aria-describedby="blah" hasHiddenLabel>
-          (TESTING) Add label
-        </Button>
+        <IconButton
+          label="(TESTING) Add label"
+          icon={<Icon name="add" isPresentational />}
+          primary
+          aria-describedby="blah"
+        />
         <Tooltip {...args}>Tooltip content</Tooltip>
       </TooltipTrigger>
       <Text variant="body" id="blah" classNameOverride="p-4">
@@ -102,9 +104,14 @@ export const OnButtonWithDesc: Story = {
 export const OnIconButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
-        Add something
-      </Button>
+      <IconButton
+        label="Add something"
+        icon={<Icon name="add" isPresentational />}
+        primary
+        // Negate the aria description (added by RAC) as it should be the
+        // same as the accessible name, therefore no need to duplicate it
+        aria-describedby={null}
+      />
       <Tooltip {...args}>Add something</Tooltip>
     </TooltipTrigger>
   ),
@@ -113,7 +120,36 @@ export const OnIconButton: Story = {
 export const OnDisabledButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button isDisabled>Button</Button>
+      <Button label="Button" disabled />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnCustomButtonAnchor: Story = {
+  name: 'On Button with custom <a>',
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button
+        label="Button"
+        component={(props) => (
+          // eslint-disable-next-line jsx-a11y/anchor-is-valid
+          <a {...props} href="#" style={{ padding: '0 1rem' }}>
+            Custom Link
+          </a>
+        )}
+      />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnCustomButton: Story = {
+  ...OnButton,
+  name: 'On Button with custom <button>',
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button label="Button" component={(props) => <button type="button" {...props} />} />
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -139,8 +175,9 @@ export const OnTabs: Story = {
           <Tooltip {...args}>Tooltip content</Tooltip>
         </TooltipTrigger>
       </TabList>
-
-      <TabPanel className="p-24 font-family-paragraph">Tab content</TabPanel>
+      <TabPanels>
+        <TabPanel classNameOverride="p-24 font-family-paragraph">Tab content</TabPanel>
+      </TabPanels>
     </Tabs>
   ),
 }
@@ -148,7 +185,7 @@ export const OnTabs: Story = {
 export const Placement: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button>Button</Button>
+      <Button label="Button" />
       <Tooltip {...args} placement="top" shouldFlip={false}>
         Placement top
       </Tooltip>
@@ -168,7 +205,7 @@ export const Placement: Story = {
 export const ReversedColors: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button>Button</Button>
+      <Button label="Button" />
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),

package/src/__next__/Tooltip/_docs/Tooltip.stories.tsx

@@ -1,9 +1,9 @@
 import React, { type FunctionComponent } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
+import { Button } from '~components/Button'
 import { Focusable } from '~components/Focusable'
 import { Tag } from '~components/__next__'
-import { Button } from '~components/__next__/Button'
 import { Tooltip, TooltipTrigger } from '../index'
 import * as testStories from './Tooltip.spec.stories'
 
@@ -33,7 +33,7 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={true} isOpen={isOpen}>
-      <Button>Button</Button>
+      <Button label="Button" />
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),

package/src/utils/AppearanceAnim.module.scss

@@ -1,17 +1,15 @@
-@layer kz-components {
-  // Sync with ./AppearanceAnim.tsx
-  $anim-duration-ms: 0.2s;
+// Sync with ./AppearanceAnim.tsx
+$anim-duration-ms: 0.2s;
 
-  .defaultHiddenState {
-    opacity: 0%;
-    pointer-events: none;
-    transition: opacity $anim-duration-ms ease-out;
-    will-change: opacity;
-    display: inline;
-  }
+.defaultHiddenState {
+  opacity: 0%;
+  pointer-events: none;
+  transition: opacity $anim-duration-ms ease-out;
+  will-change: opacity;
+  display: inline;
+}
 
-  .visibleState {
-    opacity: 100%;
-    pointer-events: initial;
-  }
+.visibleState {
+  opacity: 100%;
+  pointer-events: initial;
 }