uikit-react-public 0.37.2 → 0.38.1

package/lib/components/Input/__tests__/__snapshots__/Input.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Label/Label.tsx

@@ -43,7 +43,7 @@ const Label = forwardRef<Ref, LabelProps>(
 
     const baseStyle = css`
       width: 100%;
-      color: ${theme.color.neutral.grey90};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
     `;
@@ -61,7 +61,7 @@ const Label = forwardRef<Ref, LabelProps>(
     `;
 
     const disabledStyle = css`
-      color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.disabled};
     `;
 
     const style = cx(

package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -52,7 +52,7 @@ exports[`Label > snapshot: type prop with inline value 1`] = `
 
 exports[`Label > snapshot: with disabled prop 1`] = `
 <label
-  class="ucl-uikit-label css-19nek55"
+  class="ucl-uikit-label css-h3b4e6"
   data-testid="ucl-uikit-label"
   for=""
 >

package/lib/components/Layout/Layout.stories.tsx

@@ -26,7 +26,7 @@ export const ThreeColumns: Story = {
     const sectionStyle = css`
       grid-column: span 4;
       height: 100%;
-      background-color: ${theme.color.display.blueMuted};
+      background-color: ${theme.primitiveColour.blue['06'].$value.hex};
     `;
 
     const numberMarkerStyle = css`
@@ -36,7 +36,7 @@ export const ThreeColumns: Story = {
       height: 8rem;
       font-size: ${theme.font.size.f20};
       font-weight: ${theme.font.weight.semiBold};
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.fixed};
       font-size: ${theme.font.size.f20};
     `;
@@ -65,7 +65,7 @@ export const FourColumns: Story = {
     const sectionStyle = css`
       grid-column: span 4;
       height: 100%;
-      background-color: ${theme.color.display.pinkMuted};
+      background-color: ${theme.primitiveColour.red['03'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: span 2;
@@ -83,7 +83,7 @@ export const FourColumns: Story = {
       height: 8rem;
       font-size: ${theme.font.size.f20};
       font-weight: ${theme.font.weight.semiBold};
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.fixed};
       font-size: ${theme.font.size.f20};
     `;
@@ -155,7 +155,7 @@ export const GenericScreen: Story = {
     `;
 
     const colourBlockStyle = css`
-      background-color: ${theme.color.display.yellowVibrant};
+      background-color: ${theme.primitiveColour.yellow['08'].$value.hex};
       height: 250px;
     `;
 
@@ -236,7 +236,7 @@ export const CreativeGrid: Story = {
 
     const block1Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.purpleVibrant};
+      background-color: ${theme.primitiveColour.brandPurple['10'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 8;
@@ -264,7 +264,7 @@ export const CreativeGrid: Story = {
 
     const block2Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.blueVibrant};
+      background-color: ${theme.primitiveColour.blue['09'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 8 / 13;
@@ -291,7 +291,7 @@ export const CreativeGrid: Story = {
 
     const block3Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.greenVibrant};
+      background-color: ${theme.primitiveColour.green['07'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 8 / 13;
@@ -319,7 +319,7 @@ export const CreativeGrid: Story = {
 
     const block4Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.blueMuted};
+      background-color: ${theme.primitiveColour.blue['06'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 8;
@@ -346,7 +346,7 @@ export const CreativeGrid: Story = {
 
     const block5Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.yellowVibrant};
+      background-color: ${theme.primitiveColour.yellow['08'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 8;
@@ -373,7 +373,7 @@ export const CreativeGrid: Story = {
 
     const block6Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.pinkVibrant};
+      background-color: ${theme.primitiveColour.red['11'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 8 / 13;
@@ -400,7 +400,7 @@ export const CreativeGrid: Story = {
 
     const block7Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.blueVibrant};
+      background-color: ${theme.primitiveColour.blue['09'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 13;

package/lib/components/Link/Link.tsx

@@ -51,10 +51,10 @@ const Link = forwardRef(function LinkInner(
 
   // todo: deprecate secondary
   const secondaryStyle = css`
-    color: ${theme.color.link.secondaryDefault};
+    color: ${theme.colour.link.default};
 
     &:active {
-      color: ${theme.color.link.secondaryHover};
+      color: ${theme.colour.link.brandHover};
     }
   `;
 
@@ -72,7 +72,7 @@ const Link = forwardRef(function LinkInner(
 
   const secondaryNoVisitedStyle = css`
     &:visited {
-      color: ${theme.color.link.secondaryDefault};
+      color: ${theme.colour.link.default};
     }
   `;
 
@@ -84,7 +84,7 @@ const Link = forwardRef(function LinkInner(
 
   const secondaryHoverStyle = css`
     &:hover {
-      color: ${theme.color.link.secondaryHover};
+      color: ${theme.colour.link.brandHover};
     }
   `;
 

package/lib/components/Menu/MenuContent.tsx

@@ -38,8 +38,8 @@ const MenuContent: React.FC<MenuContentProps> = ({
     z-index: 100;
     ${position === 'left' ? 'left: 0;' : 'right: 0;'}
     white-space: nowrap;
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.surface.default};
+    color: ${theme.colour.text.default};
 
     position: fixed;
     height: 100vh;
@@ -58,7 +58,7 @@ const MenuContent: React.FC<MenuContentProps> = ({
       position: absolute;
       height: auto;
       min-width: 600px;
-      border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
       box-shadow: ${theme.boxShadow.y1};
     }
   `;

package/lib/components/Menu/MenuItem.tsx

@@ -32,19 +32,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
     align-items: center;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    font-weight: ${secondary
-      ? `${theme.font.weight.medium}`
-      : `${theme.font.weight.bold}`};
-    color: ${theme.color.text.secondary};
+    font-weight: ${
+      secondary ? `${theme.font.weight.medium}` : `${theme.font.weight.bold}`
+    };
+    color: ${theme.colour.text.secondary};
   `;
 
   const clickableMenuItemStyle = css`
-    color: ${secondary
-      ? `${theme.color.text.secondary}`
-      : `${theme.color.text.primary}`};
+    color: ${
+      secondary
+        ? `${theme.colour.text.secondary}`
+        : `${theme.colour.text.default}`
+    };
     cursor: pointer;
     &:hover {
-      background-color: ${theme.color.interaction.blue5};
+      background-color: ${theme.colour.fill.brandSubtleHover};
     }
     &:focus-visible {
       outline: none;

package/lib/components/Menu/MenuSection.tsx

@@ -21,7 +21,7 @@ const MenuSection: React.FC<MenuSectionProps> = ({
     margin-bottom: ${theme.margin.m32};
 
     &:not(:last-of-type) {
-      border-bottom: 1px solid ${theme.color.neutral.grey10};
+      border-bottom: 1px solid ${theme.colour.border.default};
     }
   `;
 

package/lib/components/Modal/Modal.tsx

@@ -1,17 +1,11 @@
-import {
-  HTMLAttributes,
-  forwardRef,
-  memo,
-  useCallback,
-} from 'react';
+import { HTMLAttributes, forwardRef, memo, useCallback } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import Blanket from '../Blanket';
 
 export const NAME = 'ucl-modal';
 
-export interface ModalProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   centered?: boolean;
   closeOnClickOutside?: boolean;
   onClose?: () => void;
@@ -40,7 +34,7 @@ const Modal = forwardRef<Ref, ModalProps>(
       max-width: 600px;
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
       pointer-events: none;
     `;
 
@@ -61,7 +55,7 @@ const Modal = forwardRef<Ref, ModalProps>(
     const dialogStyle = css`
       position: relative;
       background-clip: padding-box;
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.surface.default};
       box-shadow: ${theme.boxShadow.x2y4};
       outline: 0;
       pointer-events: auto;
@@ -79,11 +73,7 @@ const Modal = forwardRef<Ref, ModalProps>(
     return (
       <Blanket
         className={className}
-        onClick={
-          closeOnClickOutside
-            ? handleOutsideDialogClick
-            : undefined
-        }
+        onClick={closeOnClickOutside ? handleOutsideDialogClick : undefined}
       >
         <div
           className={positioningStyle}

package/lib/components/Modal/__tests__/__snapshots__/Modal.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Modal > snapshot: default 1`] = `
 <div
   aria-hidden="true"
   aria-label="Backdrop overlay, click to close modal"
-  class="ucl-blanket css-gsa5om"
+  class="ucl-blanket css-1kp3xax"
   data-testid="ucl-blanket"
 >
   <div
@@ -12,7 +12,7 @@ exports[`Modal > snapshot: default 1`] = `
   >
     <div
       aira-modal="true"
-      class="css-fjo1in"
+      class="css-1py9lz2"
       data-testid="ucl-modal"
       role="dialog"
     />

package/lib/components/NativeDatepicker/NativeDatepicker.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { theme } from '../../theme';
+import { useTheme } from '../../theme';
 import { dateToLocaleISOString } from './utils';
 import type { NativeDatepickerProps } from './NativeDatepicker.types';
 
@@ -16,13 +16,15 @@ const NativeDatepicker = ({
   ref,
   ...props
 }: NativeDatepickerProps) => {
+  const [theme] = useTheme();
+
   const baseStyle = css`
     width: 196px;
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
-    border: 1px solid ${theme.color.neutral.grey60};
-    color: #1a1a1a;
+    border: 1px solid ${theme.colour.speciality.inputDefault};
+    color: ${theme.colour.text.default};
     font-size: 16px;
     font-family: sans-serif;
     text-transform: uppercase;
@@ -34,14 +36,14 @@ const NativeDatepicker = ({
     }
 
     &::placeholder {
-      color: #8c8c8c; // TODO: Needs a design token -- Figma says 'color/text/tertiary'
+      color: ${theme.colour.text.tertiary};
     }
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    background-color: ${theme.color.neutral.white};
-    border-color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.disabled};
+    background-color: ${theme.colour.fill.inverse};
+    border-color: ${theme.colour.border.disabled};
     cursor: not-allowed;
   `;
 

package/lib/components/Overlay/Overlay.tsx

@@ -21,7 +21,7 @@ import {
   Placement,
   type FlipOptions,
   type ShiftOptions,
-  // Strategy,
+  type Strategy,
 } from '@floating-ui/react-dom';
 
 import { css, cx } from '@emotion/css';
@@ -44,6 +44,7 @@ export type OverlaySize = {
 export interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
   reference: RefObject<HTMLElement | null>;
   placement?: Placement;
+  strategy?: Strategy;
   blanket?: boolean;
   flip?: boolean | FlipOptions;
   shift?: boolean | ShiftOptions;
@@ -62,6 +63,7 @@ const Overlay = forwardRef<Ref, OverlayProps>(
     {
       reference,
       placement = 'bottom',
+      strategy = 'absolute',
       blanket = false,
       flip = true,
       shift = true,
@@ -84,10 +86,21 @@ const Overlay = forwardRef<Ref, OverlayProps>(
     useImperativeHandle<Ref, Ref>(forwardedRef, () => ref.current);
 
     const fuiMiddleware = [];
-    if (flip) fuiMiddleware.push(fuiFlip(typeof flip === 'object' ? flip : {}));
+    if (offset) fuiMiddleware.push(fuiOffset(offset));
+    if (flip)
+      fuiMiddleware.push(
+        fuiFlip({
+          // When escaping a containing element (e.g. a small Dialog) via
+          // `fixed` positioning, fall back to the originally-requested side
+          // rather than floating-ui's default "best fit" placement - bestFit
+          // can pick a placement that overlaps the reference entirely when
+          // nothing fits within the (still dialog-sized) boundary.
+          ...(strategy === 'fixed' && { fallbackStrategy: 'initialPlacement' }),
+          ...(typeof flip === 'object' ? flip : {}),
+        })
+      );
     if (shift)
       fuiMiddleware.push(fuiShift(typeof shift === 'object' ? shift : {}));
-    if (offset) fuiMiddleware.push(fuiOffset(offset));
     if (size) {
       const sizeOptions = typeof size === 'object' ? size : {};
       const { padding = 0, matchReferenceWidth = false } = sizeOptions;
@@ -116,13 +129,12 @@ const Overlay = forwardRef<Ref, OverlayProps>(
       x,
       y,
       refs,
-      strategy,
       placement: currentPlacement,
     } = useFloating({
       open: true,
       middleware: fuiMiddleware,
       placement,
-      // strategy: 'absolute',
+      strategy,
       whileElementsMounted: autoUpdate,
     });
 

package/lib/components/Radio/Radio.tsx

@@ -50,7 +50,7 @@ const Radio = forwardRef<Ref, RadioProps>(
       border-style: solid;
       outline: none;
       box-sizing: border-box;
-      color: ${theme.color.neutral.white};
+      color: ${theme.colour.icon.inverse};
       transition:
         background-color 0.15s ease-out,
         border-color 0.15s ease-out;
@@ -74,7 +74,13 @@ const Radio = forwardRef<Ref, RadioProps>(
       border-color: ${theme.colour.speciality.inputDefault};
     `;
 
-    const disabledStyle = css`
+    const disabledUncheckedStyle = css`
+      background-color: ${theme.colour.icon.inverse};
+      border-color: ${theme.colour.border.disabled};
+      cursor: not-allowed;
+    `;
+
+    const disabledCheckedStyle = css`
       background-color: ${theme.colour.icon.disabled};
       border-color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
@@ -87,7 +93,8 @@ const Radio = forwardRef<Ref, RadioProps>(
       !disabled && focusStyle,
       isChecked && checkedStyle,
       !isChecked && uncheckedStyle,
-      disabled && disabledStyle,
+      disabled && !isChecked && disabledUncheckedStyle,
+      disabled && isChecked && disabledCheckedStyle,
       className
     );
 
@@ -112,7 +119,9 @@ const Radio = forwardRef<Ref, RadioProps>(
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background-color: ${theme.colour.icon.inverse};
+      background-color: ${
+        disabled ? theme.colour.icon.brandInverse : theme.colour.icon.inverse
+      };
       user-select: none;
       pointer-events: none;
     `;

package/lib/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Radio > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-radio css-1y63xt7"
+  class="ucl-uikit-radio css-1elh2am"
 >
   <input
     checked=""
@@ -18,7 +18,7 @@ exports[`Radio > snapshot: checked prop 1`] = `
 
 exports[`Radio > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-radio css-121ivaw"
+  class="ucl-uikit-radio css-auet16"
 >
   <input
     class="css-19qtec1"
@@ -30,7 +30,7 @@ exports[`Radio > snapshot: no props 1`] = `
 
 exports[`Radio > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-radio css-121ivaw"
+  class="ucl-uikit-radio css-auet16"
 >
   <input
     class="css-19qtec1"

package/lib/components/Search/Search.tsx

@@ -119,7 +119,7 @@ const Search = ({
   `;
 
   const cancelIconButtonInactiveStyle = css`
-    color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.icon.disabled};
   `;
 
   const cancelButtonStyle = cx(
@@ -130,7 +130,7 @@ const Search = ({
   const dividerStyle = css`
     width: 1px;
     height: 38px;
-    background-color: ${theme.color.neutral.grey20};
+    background-color: ${theme.colour.border.disabled};
   `;
 
   const submitButtonStyle = css`

package/lib/components/Search/__tests__/__snapshots__/Search.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Search > snapshot: no props 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-181a0dk"
+      class="ucl-uikit-input__input css-1g04erc"
       data-testid="ucl-uikit-search"
       id=""
       placeholder=""
@@ -87,7 +87,7 @@ exports[`Search > snapshot: testId prop 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-181a0dk"
+      class="ucl-uikit-input__input css-1g04erc"
       data-testid="test123"
       id=""
       placeholder=""

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -588,18 +588,18 @@ const CustomSelect = <T extends string | number>({
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.disabled};
+    border: ${theme.border.b1} solid ${theme.colour.border.disabled};
     cursor: not-allowed;
 
     &:hover {
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.fill.inverse};
     }
   `;
 
   const noOptionsStyle = css`
     padding: ${theme.padding.p8} ${theme.padding.p16};
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
   `;
 
   // Visually hidden but available to assistive technology

package/lib/components/Spinner/Spinner.stories.tsx

@@ -25,7 +25,7 @@ export const White: Story = {
   },
   args: {
     className: css`
-      color: ${theme.color.neutral.white};
+      color: ${theme.colour.fill.inverse};
     `,
   },
 };
@@ -33,7 +33,7 @@ export const White: Story = {
 export const Blue: Story = {
   args: {
     className: css`
-      color: ${theme.color.system.blue70};
+      color: ${theme.colour.fill.brand};
     `,
   },
 };
@@ -41,7 +41,7 @@ export const Blue: Story = {
 export const Red: Story = {
   args: {
     className: css`
-      color: ${theme.color.system.red70};
+      color: ${theme.colour.fill.critical};
     `,
   },
 };

package/lib/components/Spinner/Spinner.tsx

@@ -27,7 +27,7 @@ const Spinner = ({
   const dashDuration = `2s`; // dash duration
 
   const baseStyle = css`
-    color: ${inheritColour ? 'inherit' : theme.colour.icon.brand};
+    color: ${inheritColour ? 'inherit' : theme.colour.fill.brand};
   `;
 
   const gStyle = css`

package/lib/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -6,11 +6,11 @@ exports[`Table > Snapshot: basic table 1`] = `
   data-testid="ucl-uikit-table"
 >
   <thead
-    class="css-1ux39q6 ucl-uikit-table__head"
+    class="css-b9vb4h ucl-uikit-table__head"
     data-testid="ucl-uikit-table__head"
   >
     <tr
-      class="css-1pr7kjy"
+      class="css-7kbd2r"
     >
       <th
         class="css-x1n4gt ucl-uikit-table__head-cell"
@@ -173,7 +173,7 @@ exports[`Table > Snapshot: basic table 1`] = `
   >
     <tr
       aria-selected="false"
-      class="css-icxsp9 ucl-uikit-table__row"
+      class="css-h7fw6w ucl-uikit-table__row"
       data-mobile-expanded="true"
       data-testid="ucl-uikit-table__row"
     >

package/lib/components/Table/subcomponents/Head.tsx

@@ -10,7 +10,7 @@ const Head = ({ className, children, ...props }: TableHeadProps) => {
 
   const baseStyle = css`
     height: 40px;
-    background-color: #f8f8f8; // TODO: Add a design token
+    background-color: ${theme.colour.surface.secondary};
 
     @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
       position: absolute;
@@ -26,7 +26,7 @@ const Head = ({ className, children, ...props }: TableHeadProps) => {
   `;
 
   const rowStyle = css`
-    border-bottom: 1px solid ${theme.colour.border.default};
+    border-bottom: 1px solid ${theme.colour.border.disabled};
   `;
 
   const style = cx(baseStyle, className, NAME);

package/lib/components/Table/subcomponents/Row.tsx

@@ -87,7 +87,7 @@ const Row = ({
 
   const baseStyle = css`
     height: 40px;
-    border-bottom: 1px solid ${theme.colour.border.default};
+    border-bottom: 1px solid ${theme.colour.border.disabled};
 
     &:hover {
       background-color: ${theme.colour.surface.secondary};