Merge main into renovate/rollup

packages/components/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 1.70.9
+
+### Patch Changes
+
+- [#5446](https://github.com/cultureamp/kaizen-design-system/pull/5446) [`d132fc5`](https://github.com/cultureamp/kaizen-design-system/commit/d132fc5e188322b43f2780d45541a77aaa1581d5) - Override browser stylesheet for ul element used in TileGrid
+
+## 1.70.8
+
+### Patch Changes
+
+- [#5444](https://github.com/cultureamp/kaizen-design-system/pull/5444) [`8160df5`](https://github.com/cultureamp/kaizen-design-system/commit/8160df51c57a4fe645a38ce17bf17991612ba874) - Content: use padding instead of margin for inline spacing
+
+## 1.70.7
+
+### Patch Changes
+
+- [#5440](https://github.com/cultureamp/kaizen-design-system/pull/5440) [`2f03f04`](https://github.com/cultureamp/kaizen-design-system/commit/2f03f044eaa7ca5082555a14a00e6b7e6032c6fc) - Increase FilterSelect's CSS specificity to counteract CSS compile order issue and convert SCSS to CSS.
+
+## 1.70.6
+
+### Patch Changes
+
+- [#5426](https://github.com/cultureamp/kaizen-design-system/pull/5426) [`7303979`](https://github.com/cultureamp/kaizen-design-system/commit/7303979b102047ec73c8e29f9bafebd032768b7f) - Support having multiple KaizenProvider on the same page.
+
+  This is helpful when publishing a package which relies toast notification - setting up its own KaizenProvider (which also set up ToastNofitification) will ensure that we won't run into `useToastNotificationContext must be used within the ToastNotificationContext.Provider` as this relies on the consumers' applications having the exact `@kaizen/components` version and depends on how package manager resolves peer deps. Especially for [pnpm](https://pnpm.io/how-peers-are-resolved), it might end up with 2 copies of the exact same version of kaizen/components therefore won't be able to find the `ToastNotificationContext.Provider` set up by the application.
+
+## 1.70.5
+
+### Patch Changes
+
+- [#5438](https://github.com/cultureamp/kaizen-design-system/pull/5438) [`4ce10a0`](https://github.com/cultureamp/kaizen-design-system/commit/4ce10a0f7a815e672caa90b52e576089051f9ec9) - Menu v3: Changed MenuItem colour from purple-800 70% to purple-800
+
 ## 1.70.4
 
 ### Patch Changes

packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -5,7 +5,7 @@ import { type StringSuggestions } from '~components/types/StringSuggestions'
 // `undefined` means the icon has no usage, thus is not available in the new icon set
 type NewIconProps = { name: IconNames; isFilled?: boolean } | undefined
 
-const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
+export const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ['AcademyIcon', { name: 'school' }],
   ['ActionOffIcon', undefined],
   ['ActionOffWhiteIcon', undefined],

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.4",
+  "version": "1.70.9",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",

packages/components/src/Content/Content.module.scss

@@ -3,10 +3,10 @@
 
 .content {
   max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
+  padding: 0 $layout-content-side-margin;
   width: 100%;
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    margin: 0 $content-margin-width-on-medium-and-small;
+    padding: 0 $content-margin-width-on-medium-and-small;
   }
 }

packages/components/src/Filter/Filter/subcomponents/FilterContents/FilterContents.module.css

@@ -0,0 +1,3 @@
+.filterContents {
+  padding: var(--spacing-24);
+}

packages/components/src/Filter/Filter/subcomponents/FilterContents/FilterContents.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FilterContents.module.scss'
+import styles from './FilterContents.module.css'
 
 export type FilterContentsProps = {
   children: React.ReactNode

packages/components/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.css

@@ -0,0 +1,7 @@
+.filterPopover {
+  background-color: var(--color-white);
+  z-index: 1010;
+  box-shadow: var(--shadow-large-box-shadow);
+  border-radius: var(--border-borderless-border-radius);
+  display: inline-flex;
+}

packages/components/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.tsx

@@ -3,7 +3,7 @@ import { type Options } from '@popperjs/core'
 import classnames from 'classnames'
 import { usePopper } from 'react-popper'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FilterPopover.module.scss'
+import styles from './FilterPopover.module.css'
 
 export type FilterPopoverProps = {
   children: React.ReactNode

packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { Button } from '~components/Button'
 import { useFilterBarContext } from '../../context/FilterBarContext'
-import styles from './ClearAllButton.module.scss'
+import styles from './ClearAllButton.module.css'
 
 export const ClearAllButton = (): JSX.Element => {
   const { formatMessage } = useIntl()

packages/components/src/Filter/FilterSelect/FilterSelect.module.css

@@ -0,0 +1,8 @@
+/*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
+.filterContents.filterContents {
+  box-sizing: border-box;
+  min-width: 12.25rem; /* 196px */
+  max-width: 25rem; /* 400px */
+  overflow: auto;
+  padding: unset; /* Padding is added by <SelectPopoverContents> */
+}

packages/components/src/Filter/FilterSelect/FilterSelect.tsx

@@ -17,7 +17,7 @@ import { getDisabledKeysFromItems } from '~components/__rc__/Select/utils/getDis
 import { transformSelectItemToCollectionElement } from '~components/__rc__/Select/utils/transformSelectItemToCollectionElement'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type SelectItem, type SelectOption } from './types'
-import styles from './FilterSelect.module.scss'
+import styles from './FilterSelect.module.css'
 
 type OmittedAriaSelectProps =
   | 'label'

packages/components/src/KaizenProvider/KaizenProvider.tsx

@@ -11,21 +11,19 @@ export type KaizenProviderProps = {
 
 export const KaizenProvider = ({ children, locale = 'en' }: KaizenProviderProps): JSX.Element => {
   const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
-  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
 
   useEffect(() => {
     // SSR does not have a document, which is required for ToastNotificationsList.
     // Await document render before rendering the component.
     if (document !== undefined) {
-      setNotificationsList(<ToastNotificationsList />)
       setDocumentIsAvailable(true)
     }
-  }, [documentIsAvailable])
+  }, [])
 
   return (
     <OptionalIntlProvider locale={locale}>
       <ToastNotificationProvider>
-        {notificationsList}
+        {documentIsAvailable && <ToastNotificationsList />}
         {children}
       </ToastNotificationProvider>
       <FontDefinitions />

packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx

@@ -1,36 +1,35 @@
-import React from 'react'
-import { createPortal } from 'react-dom'
+import React, { useEffect, useState } from 'react'
 import { useToastNotificationContext } from '../context/ToastNotificationContext'
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap'
 import styles from './ToastNotificationsList.module.scss'
 
+const toastNotificationListId = 'toast-notifications-list'
+
 export const ToastNotificationsList = (): JSX.Element => {
   const { notifications, removeToastNotification } = useToastNotificationContext()
+  const [toastContainer, setToastContainer] = useState<Element | null>(null)
 
-  const containers = document.querySelectorAll('[data-testid="toast-notifications-list"')
-
-  if (containers) {
-    // Remove any duplicate instances
-    // (eg. Storybook docs page has multiple stories each with their own context)
-    containers.forEach((c, i) => {
-      if (i === 0) return
-      c.remove()
-    })
-  }
+  useEffect(() => {
+    // this is to ensure that the container is created only once. Regardless of how many KaizenProvider is set up, they will also reuse the same container.
+    let container = document.querySelector(`[id="${toastNotificationListId}"]`)
+    if (!container) {
+      container = document.createElement('div')
+      container.setAttribute('id', toastNotificationListId)
+      container.setAttribute('role', 'status')
+      container.className = styles.toastNotificationsList
+      document.body.appendChild(container)
+    }
+    setToastContainer(container)
+  }, [])
 
-  return createPortal(
-    <div
-      data-testid="toast-notifications-list"
-      role="status"
-      className={styles.toastNotificationsList}
-    >
-      <ToastNotificationsMap
-        notifications={notifications}
-        onHide={removeToastNotification}
-        container={containers[0]}
-      />
-    </div>,
-    document.body,
+  return toastContainer ? (
+    <ToastNotificationsMap
+      notifications={notifications}
+      onHide={removeToastNotification}
+      container={toastContainer}
+    />
+  ) : (
+    <></>
   )
 }
 

packages/components/src/Tile/TileGrid/TileGrid.module.scss

@@ -4,6 +4,8 @@
 
 .grid {
   list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
   display: grid;
   // the more we shave off the width here,
   // the less the tiles will grow when they lose one from the row

packages/components/src/__rc__/Icon/_docs/Icon--migration-guide.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as IconStories from './Icon.docs.stories'
+
+<Meta title="Components/Icon/Icon (Future)/Migration Guide" />
+
+# Icon Migration Guide
+
+This is a short guide to assist in migration from the old to new Icon component.
+
+## Codemod
+
+To assist in migration we have created the `upgradeiconv1` codemod. This will loop through the given directory and update all instances of Icon to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#upgradeiconv1) on how to run this within your repository.
+
+For more information on the changes to the API, we recommend referring the <LinkTo pageId="components-icon-icon-future-api-specification--docs">API Specification</LinkTo>.
+
+## Changes to Icon exportNames
+
+The following table outlines the changes to the Icons names and whether the new `isFilled` prop is required. This can be used if you are manually migrating components.
+
+Where `N/A` is shown, this indicates that an equivalent icon does not exist or has been made redundant by the new API, ie:
+
+- `ActionOffIcon` is not needed as the new `ActionOnIcon` (`flash_on`) can be used with the `isFilled` to handle the toggled states.
+- `ActionOffIconActionOffWhiteIcon` is not needed as the API allows for color to be set via `className` or inherited via it's parent element.
+
+You will need to discuss alternative with your design team or reach out in the #help_design_system channel if an equivalent icon does not exist.
+
+<Story of={IconStories.IconTableComparison} />

packages/components/src/__rc__/Icon/_docs/Icon.docs.stories.tsx

@@ -15,6 +15,7 @@ import { ToggleSwitchField } from '~components/ToggleSwitch'
 import { Button } from '~components/__rc__/Button'
 import { Tag } from '~components/__rc__/Tag'
 import { StickerSheet } from '~storybook/components/StickerSheet'
+import { iconMap } from '../../../../codemods/upgradeIconV1/getNewIconPropsFromOldIconName'
 import { iconDefaultSet } from '../constants'
 import { Icon } from '../index'
 import imgInterfaceDont from './assets/interface-dont.png'
@@ -476,3 +477,40 @@ export const TooltipDont: Story = {
     />
   ),
 }
+
+export const IconTableComparison: Story = {
+  render: () => {
+    return (
+      <TableContainer>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderRowCell width={4 / 12} labelText="Old name" />
+            <TableHeaderRowCell width={4 / 12} labelText="New name" />
+            <TableHeaderRowCell width={4 / 12} labelText="isFilled" />
+          </TableRow>
+        </TableHeader>
+        {Array.from(iconMap).map(([key, value]) => (
+          <TableCard key={key}>
+            <TableRow>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {key}
+                </Text>
+              </TableRowCell>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {value?.name ?? 'N/A'}
+                </Text>
+              </TableRowCell>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {value?.isFilled ? 'true' : value?.name ? 'false' : 'N/A'}
+                </Text>
+              </TableRowCell>
+            </TableRow>
+          </TableCard>
+        ))}
+      </TableContainer>
+    )
+  },
+}

packages/components/src/__rc__/Menu/MenuItem.module.css

@@ -5,7 +5,7 @@
   letter-spacing: var(--typography-paragraph-body-letter-spacing);
   font-weight: var(--typography-paragraph-body-font-weight);
   line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
+  color: var(--color-purple-800);
   padding: var(--spacing-6) var(--spacing-8);
   border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
   border-radius: 4px;