@kaizen/components 1.50.0 → 1.52.0

package/src/Button/GenericButton/GenericButton.tsx

@@ -1,13 +1,15 @@
 import React, {
   ComponentType,
-  forwardRef,
+  FocusEvent,
+  MouseEvent,
   Ref,
+  forwardRef,
   useImperativeHandle,
   useRef,
-  MouseEvent,
-  FocusEvent,
 } from "react"
 import classnames from "classnames"
+import { useFocusable, useLink } from "react-aria"
+import { LinkContext, useContextProps } from "react-aria-components"
 import { Badge, BadgeAnimated } from "~components/Badge"
 import { LoadingSpinner } from "~components/Loading"
 import styles from "./GenericButton.module.scss"
@@ -71,6 +73,7 @@ export type RenderProps = GenericButtonProps & {
   directionalLink?: boolean
   paginationLink?: boolean
   isActive?: boolean
+  "aria-describedby"?: string
 }
 
 export type ButtonRef = { focus: () => void }
@@ -135,6 +138,7 @@ export const GenericButton = forwardRef(
     ref: Ref<ButtonRef | undefined>
   ) => {
     const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>()
+    const wrapperRef = useRef<HTMLSpanElement>(null)
     useImperativeHandle(ref, () => ({
       focus: (): void => {
         buttonRef.current?.focus()
@@ -152,27 +156,22 @@ export const GenericButton = forwardRef(
       ...otherProps,
     }
 
-    const determineButtonRenderer = (): JSX.Element => {
-      if (props.component) {
-        return renderCustomComponent(props.component, props)
-      }
-
-      if (props.href && !props.disabled && !props.working) {
-        return renderLink(props, buttonRef as Ref<HTMLAnchorElement>)
-      }
-
-      return renderButton(props, buttonRef as Ref<HTMLButtonElement>)
+    if (props.component) {
+      return renderCustomComponent(props.component, props, wrapperRef)
     }
 
     return (
       <span
+        ref={wrapperRef}
         className={classnames(
           styles.container,
           props.fullWidth && styles.fullWidth
         )}
         aria-live={"workingLabel" in props ? "polite" : undefined}
       >
-        {determineButtonRenderer()}
+        {props.href && !props.disabled && !props.working
+          ? renderLink(props, buttonRef as Ref<HTMLAnchorElement>)
+          : renderButton(props, buttonRef as Ref<HTMLButtonElement>)}
       </span>
     )
   }
@@ -182,24 +181,56 @@ GenericButton.displayName = "GenericButton"
 
 const renderCustomComponent = (
   CustomComponent: ComponentType<CustomButtonProps>,
-  props: RenderProps
+  props: RenderProps,
+  ref: Ref<HTMLSpanElement>
 ): JSX.Element => {
-  const { id, disabled, href, onClick, onFocus, onBlur, ...rest } = props
-  const customProps = getCustomProps(rest)
+  const passedInProps = {
+    id: props.id,
+    className: buttonClass(props),
+    disabled: props.disabled,
+    href: props.href,
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    "aria-label": generateAriaLabel(props),
+    ...getCustomProps(props),
+  }
+
+  const [contextProps, contextRef] = useContextProps(
+    passedInProps,
+    ref,
+    // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
+    LinkContext
+  )
+  // @ts-expect-error
+  // @todo: Make a wrapper and take it out of Button
+  const { linkProps } = useLink(contextProps, contextRef)
+
+  // Unset this because the one defined in buttonProps shows
+  // focus-visible styles on click, in future we'll style using [data-focus-visible] which is consistent across browsers
+  delete linkProps.onPointerDown
+
   return (
-    <CustomComponent
-      id={id}
-      className={buttonClass(props)}
-      disabled={disabled}
-      href={href}
-      onClick={onClick}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      aria-label={generateAriaLabel(props)}
-      {...customProps}
+    <span
+      ref={contextRef}
+      className={classnames(
+        styles.container,
+        props.fullWidth && styles.fullWidth
+      )}
+      aria-live={"workingLabel" in props ? "polite" : undefined}
     >
-      {renderContent(props)}
-    </CustomComponent>
+      <CustomComponent
+        {...contextProps}
+        {...linkProps}
+        aria-describedby={
+          props["aria-describedby"] === null
+            ? undefined
+            : linkProps["aria-describedby"]
+        }
+      >
+        {renderContent(props)}
+      </CustomComponent>
+    </span>
   )
 }
 
@@ -207,51 +238,52 @@ const renderButton = (
   props: RenderProps,
   ref: Ref<HTMLButtonElement>
 ): JSX.Element => {
-  const {
-    id,
-    disabled,
-    onClick,
-    onMouseDown,
-    type,
-    disableTabFocusAndIUnderstandTheAccessibilityImplications,
-    onFocus,
-    onBlur,
-    form,
-    formAction,
-    formMethod,
-    formEncType,
-    formTarget,
-    formNoValidate,
-    ...rest
-  } = props
-  const customProps = getCustomProps(rest)
+  const disableActions = props.disabled || props.working
+  const passedInProps: React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > = {
+    id: props.id,
+    disabled: props.disabled,
+    onClick: !disableActions ? props.onClick : undefined,
+    onMouseDown: !disableActions ? props.onMouseDown : undefined,
+    type: props.type,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    form: props.form,
+    formAction: props.formAction,
+    formMethod: props.formMethod,
+    formEncType: props.formEncType,
+    formTarget: props.formTarget,
+    formNoValidate: props.formNoValidate,
+    className: buttonClass(props),
+    "aria-label": generateAriaLabel(props),
+    "aria-disabled": props.disabled || props.working ? true : undefined,
+    tabIndex: props.disableTabFocusAndIUnderstandTheAccessibilityImplications
+      ? -1
+      : undefined,
+    ...getCustomProps(props),
+  }
+
+  // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
+  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
+  // @ts-ignore
+  const { focusableProps } = useFocusable(passedInProps, ref)
 
   return (
+    // eslint-disable-next-line react/button-has-type
     <button
-      // eslint-disable-next-line react/button-has-type
-      type={type}
-      id={id}
-      disabled={disabled}
-      className={buttonClass(props)}
-      onClick={onClick}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onMouseDown={(e): void => onMouseDown && onMouseDown(e)}
-      aria-label={generateAriaLabel(props)}
-      aria-disabled={disabled || props.working ? true : undefined}
-      form={form}
-      formAction={formAction}
-      formMethod={formMethod}
-      formEncType={formEncType}
-      formTarget={formTarget}
-      formNoValidate={formNoValidate}
-      tabIndex={
-        disableTabFocusAndIUnderstandTheAccessibilityImplications
-          ? -1
-          : undefined
+      {...passedInProps}
+      {...focusableProps}
+      aria-describedby={
+        props["aria-describedby"] === null
+          ? undefined
+          : props["aria-describedby"] || focusableProps["aria-describedby"]
       }
+      // Unset this because the one defined in buttonProps shows
+      // focus-visible styles on click
+      onPointerDown={undefined}
       ref={ref}
-      {...customProps}
     >
       {renderContent(props)}
     </button>
@@ -262,34 +294,44 @@ const renderLink = (
   props: RenderProps,
   ref: Ref<HTMLAnchorElement>
 ): JSX.Element => {
-  const {
-    id,
-    href,
-    onClick,
-    newTabAndIUnderstandTheAccessibilityImplications,
-    onFocus,
-    onBlur,
-    ...rest
-  } = props
-  const customProps = getCustomProps(rest)
-
-  const target = newTabAndIUnderstandTheAccessibilityImplications
+  const target = props.newTabAndIUnderstandTheAccessibilityImplications
     ? "_blank"
     : "_self"
 
+  const passedInProps: React.DetailedHTMLProps<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > = {
+    id: props.id,
+    href: props.href,
+    target,
+    rel: target === "_blank" ? "noopener noreferrer" : undefined,
+    className: buttonClass(props),
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    "aria-label": generateAriaLabel(props),
+    ...getCustomProps(props),
+  }
+
+  // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
+  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
+  // @ts-ignore
+  const { focusableProps } = useFocusable(passedInProps, ref)
+
   return (
     <a
-      id={id}
-      href={href}
-      target={target}
-      rel={target === "_blank" ? "noopener noreferrer" : undefined}
-      className={buttonClass(props)}
-      onClick={onClick}
-      onFocus={onFocus}
-      onBlur={onBlur}
+      {...passedInProps}
+      {...focusableProps}
+      aria-describedby={
+        props["aria-describedby"] === null
+          ? undefined
+          : props["aria-describedby"] || focusableProps["aria-describedby"]
+      }
+      // Unset this because the one defined in linkProps shows
+      // focus-visible styles on click
+      onPointerDown={undefined}
       ref={ref}
-      aria-label={generateAriaLabel(props)}
-      {...customProps}
     >
       {renderContent(props)}
     </a>
@@ -301,6 +343,8 @@ const buttonClass = (props: RenderProps): string => {
   return classnames(
     styles.button,
     isDefault && styles.default,
+    // @ts-ignore
+    (props.disabled || props["aria-disabled"]) && styles.disabled,
     props.primary && styles.primary,
     props.destructive && styles.destructive,
     props.secondary && styles.secondary,

package/src/Button/utils/_mixins.scss

@@ -2,7 +2,7 @@
   $background-color: undefined,
   $border-color: undefined
 ) {
-  &:not(:disabled) {
+  &:not(.disabled, .working) {
     &:hover,
     &:active,
     &:focus-visible {

package/src/ButtonGroup/ButtonGroup.tsx

@@ -4,7 +4,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip, TooltipProps } from "~components/Tooltip"
+import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./ButtonGroup.module.scss"
 

package/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { ClearIcon } from "~components/Icon"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { DataAttributes } from "~types/DataAttributes"
 import { isRefObject } from "~utils/isRefObject"
 import { FilterButton, FilterButtonProps } from "../FilterButton"

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -6,7 +6,7 @@ import { Heading, HeadingProps } from "~components/Heading"
 import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
-import { Tooltip, TooltipProps } from "~components/Tooltip"
+import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
 

package/src/KaizenProvider/KaizenProvider.tsx

@@ -27,13 +27,11 @@ export const KaizenProvider = ({
 
   return (
     <OptionalIntlProvider locale={locale}>
-      <>
-        <ToastNotificationProvider>
-          {notificationsList}
-          {children}
-        </ToastNotificationProvider>
-        <FontDefinitions />
-      </>
+      <ToastNotificationProvider>
+        {notificationsList}
+        {children}
+      </ToastNotificationProvider>
+      <FontDefinitions />
     </OptionalIntlProvider>
   )
 }

package/src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.tsx

@@ -1,10 +1,11 @@
-import React, { useContext } from "react"
+import React, { ReactNode, useContext } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
+import { I18nProvider } from "react-aria"
 import { IntlContext } from "react-intl"
 
 type Props = {
   locale: string
-  children: React.ReactElement
+  children: ReactNode
 }
 export const OptionalIntlProvider = ({
   locale,
@@ -12,8 +13,17 @@ export const OptionalIntlProvider = ({
 }: Props): JSX.Element => {
   const parent = useContext(IntlContext)
 
-  if (parent) return children
-  return <StaticIntlProvider locale={locale}>{children}</StaticIntlProvider>
+  if (parent) {
+    // we always wrap with react-aria provider as we have no way checking if parent is wrapped (useLocale returns default value if not)
+    // but it's not a big deal as we'll consume the defined locale anyways so no effect on children
+    return <I18nProvider locale={parent.locale}>{children}</I18nProvider>
+  }
+
+  return (
+    <StaticIntlProvider locale={locale}>
+      <I18nProvider locale={locale}>{children}</I18nProvider>
+    </StaticIntlProvider>
+  )
 }
 
 OptionalIntlProvider.displayName = "OptionalIntlProvider"

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { FieldMessageProps } from "~components/FieldMessage"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import { RemovableTag } from "~components/__future__/Tag"
+import { RemovableTag } from "~components/__future__"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import styles from "./MultiSelectToggle.module.scss"

package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx

@@ -18,7 +18,7 @@ export type GenericNotificationProps = {
   noBottomMargin?: boolean
   forceMultiline?: boolean
   headingProps?: HeadingProps
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+} & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "style">
 
 export const GenericNotification = ({
   type,

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { ToggleIconButtonMoods } from "./types"
 import styles from "./ToggleIconButton.module.scss"

package/src/Table/Table.tsx

@@ -7,7 +7,7 @@ import {
   SortAscendingIcon,
   SortDescendingIcon,
 } from "~components/Icon"
-import { Tooltip } from "~components/Tooltip"
+import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Table.module.scss"
 

package/src/Tabs/_docs/Tabs.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { Button } from "~components/Button"
 import { Card } from "~components/Card"
 import { Text } from "~components/Text"
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from "../index"
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "../index"
 
 const meta = {
   title: "Components/Tabs",

package/src/Tabs/subcomponents/Tab.tsx

@@ -1,11 +1,13 @@
 import React, {
   HTMLAttributes,
   ReactNode,
-  useState,
   SyntheticEvent,
+  useRef,
+  useState,
 } from "react"
 import { Tab as ReachTab } from "@reach/tabs"
 import classnames from "classnames"
+import { useFocusable } from "react-aria"
 import { Badge } from "~components/Badge"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Tab.module.scss"
@@ -44,34 +46,38 @@ export const Tab = (props: TabProps): JSX.Element => {
     classNameOverride,
     ...restProps
   } = props
+  const ref = useRef<HTMLButtonElement>(null)
   const [isHovered, setIsHovered] = useState<boolean>(false)
   const [isFocused, setIsFocused] = useState<boolean>(false)
   const showActiveBadge = isSelected || isHovered || isFocused
 
-  const onFocus = (event: SyntheticEvent): void => {
-    setIsFocused(true)
-    props.onFocus?.(event)
+  const tabProps = {
+    disabled,
+    className: classnames(
+      styles.tab,
+      classNameOverride,
+      isSelected && styles.selected
+    ),
+    onFocus: (event: SyntheticEvent): void => {
+      setIsFocused(true)
+      props.onFocus?.(event)
+    },
+    onBlur: (event: SyntheticEvent): void => {
+      setIsFocused(false)
+      props.onBlur?.(event)
+    },
+    onMouseEnter: (): void => setIsHovered(true),
+    onMouseLeave: (): void => setIsHovered(false),
+    ...restProps,
   }
 
-  const onBlur = (event: SyntheticEvent): void => {
-    setIsFocused(false)
-    props.onBlur?.(event)
-  }
+  const { focusableProps } = useFocusable(tabProps, ref)
+
+  // Reach is setting and managing tabIndex for us here, so we remove it from the focusableProps (also it needs to be non-defined, undefined is not enough)
+  delete focusableProps.tabIndex
 
   return (
-    <ReachTab
-      disabled={disabled}
-      className={classnames(
-        styles.tab,
-        classNameOverride,
-        isSelected && styles.selected
-      )}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onMouseEnter={(): void => setIsHovered(true)}
-      onMouseLeave={(): void => setIsHovered(false)}
-      {...restProps}
-    >
+    <ReachTab ref={ref} {...tabProps} {...focusableProps}>
       {children}
       {badge && (
         <span className={styles.badge}>

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -171,17 +171,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 .titleTextOverride.titleTextOverride {
   padding: 4px 0;
 
-  @media (max-width: $breadcrumb-breakpoint-width) {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-  }
-
   @include title-block-under-1366 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
     font-size: $typography-heading-2-font-size;
     line-height: $typography-heading-2-line-height;
     letter-spacing: $typography-heading-2-letter-spacing;
@@ -190,8 +180,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   .hasLongTitle & {
     @include title-block-under-1366 {
-      font-family: $typography-heading-3-font-family;
-      font-weight: $typography-heading-3-font-weight;
       font-size: $typography-heading-3-font-size;
       line-height: $typography-heading-3-line-height;
       letter-spacing: $typography-heading-3-letter-spacing;
@@ -200,8 +188,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   }
 
   @include title-block-medium-and-small {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
     font-size: $typography-heading-4-font-size;
     line-height: $typography-heading-4-line-height;
     letter-spacing: $typography-heading-4-letter-spacing;

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -329,7 +329,7 @@ export const TitleBlockZen = ({
                       <div className={styles.titleAndSubtitleInner}>
                         <div className={styles.title}>
                           <Heading
-                            variant="heading-1"
+                            variant="composable-header-title"
                             color={isReversed(variant) ? "white" : "dark"}
                             classNameOverride={styles.titleTextOverride}
                             data-automation-id={titleAutomationId}

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -98,6 +98,60 @@ export const Playground: Story = {
   },
 }
 
+export const Viewports: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: "Above or equal to 1366",
+          styles: { width: "1366px", height: "800px" },
+          type: "desktop",
+        },
+        under1366: {
+          name: "Under 1366",
+          styles: { width: "1365px", height: "800px" },
+          type: "desktop",
+        },
+        mediumSmall: {
+          name: "Medium and small",
+          styles: { width: "1079px", height: "800px" },
+          type: "desktop",
+        },
+      },
+      defaultViewport: "default",
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1079, 1365, 1366],
+    },
+  },
+}
+
+export const HasLongTitle: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: "Above or equal to 1366",
+          styles: { width: "1366px", height: "800px" },
+          type: "desktop",
+        },
+        under1366: {
+          name: "Under 1366",
+          styles: { width: "1365px", height: "800px" },
+          type: "desktop",
+        },
+      },
+      defaultViewport: "default",
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1365, 1366],
+    },
+  },
+  args: { title: "A long title with over thirty characters" },
+}
+
 export const StickerSheetDefault: Story = {
   parameters: {
     docs: {

package/src/__overlays__/Focusable/v3/Focusable.module.scss

@@ -0,0 +1,3 @@
+.focusableWrapper {
+  display: inline-flex;
+}