@kaizen/components 1.78.1 → 1.79.1

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

@@ -5,51 +5,53 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.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;
+@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;
 
-  /* 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 label="Button" />
+  <Button>Button</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 label="Button" />
+  <Button>Button</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 label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -46,14 +46,9 @@ export const Playground: Story = {
 export const Primary: Story = {
   render: () => (
     <TooltipTrigger>
-      <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}
-      />
+      <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+        Add something
+      </Button>
       <Tooltip>Add something</Tooltip>
     </TooltipTrigger>
   ),
@@ -105,14 +100,9 @@ export const DoConcise: Story = {
   render: () => (
     <div>
       <TooltipTrigger>
-        <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}
-        />
+        <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+          Add topic
+        </Button>
         <Tooltip>Add topic to agenda</Tooltip>
       </TooltipTrigger>
     </div>
@@ -128,17 +118,12 @@ export const DontConcise: Story = {
   render: () => (
     <div>
       <TooltipTrigger>
-        <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}
-        />
+        <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+          Add something
+        </Button>
         <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>
@@ -150,11 +135,11 @@ export const ShouldFlip: Story = {
   render: () => (
     <div className="flex flex-col gap-8 pl-96 overflow-hidden max-w-[250px]">
       <TooltipTrigger>
-        <Button label="Should flip" />
+        <Button>Should flip</Button>
         <Tooltip placement="end">Tooltip content</Tooltip>
       </TooltipTrigger>
       <TooltipTrigger>
-        <Button label="Won't flip" />
+        <Button>Won&apos;t flip</Button>
         <Tooltip placement="end" shouldFlip={false}>
           Tooltip content
         </Tooltip>
@@ -188,7 +173,7 @@ export const UncontrolledState: Story = {
           Toggle open
         </button>
         <TooltipTrigger isOpen={isOpen}>
-          <Button label="Button" />
+          <Button>Button</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 label="Button" />
+  <Button>Button</Button>
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
   `,

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

@@ -2,11 +2,12 @@ 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 { Tab, TabList, TabPanel, TabPanels, Tabs } from '~components/Tabs'
+import { LinkButton } from '~components/LinkButton'
 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'
 
@@ -32,12 +33,10 @@ 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 label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -46,21 +45,29 @@ export const OnButton: Story = {
     const button = canvas.queryByRole('button') ?? canvas.getByRole('link')
 
     await step('Hover shows', async () => {
-      await userEvent.unhover(button)
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.hover(button)
-      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
-      expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
+      await expect(await canvas.findByRole('tooltip')).toBeInTheDocument()
+      await expect((await canvas.findByRole('tooltip')).checkVisibility()).toBe(true)
+      await expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
       await userEvent.unhover(button)
     })
 
     await step('Focus shows', async () => {
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.tab() // focus
-      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
+      await expect((await canvas.findByRole('tooltip')).checkVisibility()).toBe(true)
+      await expect(await canvas.findByRole('tooltip')).toBeInTheDocument()
       await userEvent.tab() // unfocus
-      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      waitFor(async () => expect(await canvas.queryByText('Tooltip content')).toBeNull())
     })
 
     await step('Escape closes', async () => {
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.tab() // focus
       await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
       await userEvent.keyboard('{Escape}')
@@ -76,7 +83,7 @@ export const OnLink: Story = {
   ...OnButton,
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" href="#" />
+      <LinkButton href="#">Button</LinkButton>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -86,12 +93,9 @@ export const OnButtonWithDesc: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <>
       <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-        <IconButton
-          label="(TESTING) Add label"
-          icon={<Icon name="add" isPresentational />}
-          primary
-          aria-describedby="blah"
-        />
+        <Button icon={<Icon name="add" isPresentational />} aria-describedby="blah" hasHiddenLabel>
+          (TESTING) Add label
+        </Button>
         <Tooltip {...args}>Tooltip content</Tooltip>
       </TooltipTrigger>
       <Text variant="body" id="blah" classNameOverride="p-4">
@@ -104,14 +108,9 @@ export const OnButtonWithDesc: Story = {
 export const OnIconButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <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}
-      />
+      <Button icon={<Icon name="add" isPresentational />} hasHiddenLabel>
+        Add something
+      </Button>
       <Tooltip {...args}>Add something</Tooltip>
     </TooltipTrigger>
   ),
@@ -120,36 +119,7 @@ export const OnIconButton: Story = {
 export const OnDisabledButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <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} />} />
+      <Button isDisabled>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),
@@ -175,9 +145,8 @@ export const OnTabs: Story = {
           <Tooltip {...args}>Tooltip content</Tooltip>
         </TooltipTrigger>
       </TabList>
-      <TabPanels>
-        <TabPanel classNameOverride="p-24 font-family-paragraph">Tab content</TabPanel>
-      </TabPanels>
+
+      <TabPanel className="p-24 font-family-paragraph">Tab content</TabPanel>
     </Tabs>
   ),
 }
@@ -185,7 +154,7 @@ export const OnTabs: Story = {
 export const Placement: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args} placement="top" shouldFlip={false}>
         Placement top
       </Tooltip>
@@ -205,7 +174,7 @@ export const Placement: Story = {
 export const ReversedColors: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
-      <Button label="Button" />
+      <Button>Button</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 label="Button" />
+      <Button>Button</Button>
       <Tooltip {...args}>Tooltip content</Tooltip>
     </TooltipTrigger>
   ),

package/src/utils/AppearanceAnim.module.scss

@@ -1,15 +1,17 @@
-// Sync with ./AppearanceAnim.tsx
-$anim-duration-ms: 0.2s;
+@layer kz-components {
+  // 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;
+  }
 }