uikit-react-public 0.26.1 → 0.27.1

package/lib/components/MenuNew/MenuAccordion/MenuAccordion.tsx

@@ -14,6 +14,7 @@ import MenuAccordionChevron from './MenuAccordionChevron';
 import MenuAccordionItem, { MenuAccordionItemProps } from './MenuAccordionItem';
 
 export const NAME = 'ucl-uikit-menu__accordion';
+const FOCUS_RING_GUTTER_PX = 6;
 
 export interface MenuAccordionProps extends Omit<
   MenuBaseItemProps,
@@ -62,15 +63,16 @@ const MenuAccordion = ({
   const bodyStyle = css`
     display: grid;
     grid-template-rows: 0fr;
-    width: 100%;
+    width: calc(100% + ${FOCUS_RING_GUTTER_PX * 2}px);
+    margin-left: -${FOCUS_RING_GUTTER_PX}px;
     margin-top: 0;
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
     transition:
-      grid-template-rows 300ms ease-in,
-      margin-top 300ms ease-in,
-      opacity 300ms ease-in;
+      grid-template-rows 200ms ease-in-out,
+      margin-top 200ms ease-in-out,
+      opacity 200ms ease-in-out;
   `;
 
   const bodyExpandedStyle = css`
@@ -79,13 +81,15 @@ const MenuAccordion = ({
     opacity: 1;
     pointer-events: auto;
     transition:
-      grid-template-rows 300ms ease-out,
-      margin-top 300ms ease-out,
-      opacity 300ms ease-out;
+      grid-template-rows 200ms ease-in-out,
+      margin-top 200ms ease-in-out,
+      opacity 200ms ease-in-out;
   `;
 
   const bodyInnerStyle = css`
     min-height: 0;
+    padding-top: ${FOCUS_RING_GUTTER_PX}px;
+    padding-bottom: ${FOCUS_RING_GUTTER_PX}px;
     overflow: hidden;
   `;
 

package/lib/components/MenuNew/MenuAccordion/MenuAccordionItem.tsx

@@ -1,13 +1,15 @@
-import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import MenuBaseItem from '../MenuBaseItem';
+import MenuBaseItem, { MenuBaseItemProps } from '../MenuBaseItem';
 import MenuItemText from '../MenuItemText';
 import { useTheme } from '../../../theme';
 
 export const NAME = 'ucl-uikit-menu__accordion-item';
+const FOCUS_RING_GUTTER_PX = 6;
 
-export interface MenuAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
-  asChild?: boolean;
+export interface MenuAccordionItemProps extends Omit<
+  MenuBaseItemProps,
+  'iconPosition'
+> {
   testId?: string;
 }
 
@@ -21,7 +23,8 @@ const MenuAccordionItem = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    margin: 0;
+    width: calc(100% - ${FOCUS_RING_GUTTER_PX * 2}px);
+    margin: 0 ${FOCUS_RING_GUTTER_PX}px;
     padding-left: ${theme.padding.p40};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -8,6 +8,7 @@ export interface MenuBaseItemProps extends HTMLAttributes<HTMLDivElement> {
   endAdornment?: ReactNode;
   hoverMode?: 'background' | 'underline';
   asChild?: boolean;
+  active?: boolean;
 }
 
 const MenuBaseItem = ({
@@ -22,6 +23,7 @@ const MenuBaseItem = ({
   tabIndex,
   hoverMode = 'background',
   asChild = false,
+  active = false,
   ...props
 }: MenuBaseItemProps) => {
   const [theme] = useTheme();
@@ -53,6 +55,7 @@ const MenuBaseItem = ({
     display: flex;
     align-items: center;
     gap: ${theme.margin.m16};
+    position: relative;
     cursor: pointer;
     outline: none;
 
@@ -65,6 +68,19 @@ const MenuBaseItem = ({
     }
   `;
 
+  const activeStyle = css`
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: calc(50% - 12px);
+      width: 6px;
+      height: 24px;
+      background-color: ${theme.colour.fill.brand};
+      pointer-events: none;
+    }
+  `;
+
   const backgroundOnHoverStyle = css`
     &:hover {
       background-color: ${theme.colour.fill.brandSubtleHover};
@@ -79,6 +95,7 @@ const MenuBaseItem = ({
 
   const style = cx(
     baseStyle,
+    active && activeStyle,
     hoverMode === 'underline' && underlineStyleOnHoverStyle,
     hoverMode === 'background' && backgroundOnHoverStyle,
     className

package/lib/components/MenuNew/__tests__/Menu.test.tsx

@@ -113,6 +113,41 @@ describe('Menu', () => {
     expect(screen.getByText('Library')).toBeInTheDocument();
   });
 
+  test('accordion items allow space for focus borders', () => {
+    wrap(
+      <Menu>
+        <Menu.Accordion
+          label='Services'
+          defaultExpanded
+        >
+          <Menu.Accordion.Item>Library</Menu.Accordion.Item>
+        </Menu.Accordion>
+      </Menu>
+    );
+
+    const accordionItem = screen
+      .getByText('Library')
+      .closest('.ucl-uikit-menu__accordion-item');
+    const accordionContentInner = accordionItem?.parentElement;
+    const accordionContent = accordionContentInner?.parentElement;
+
+    expect(accordionItem).toHaveStyle({
+      marginTop: '0px',
+      marginLeft: '6px',
+      marginRight: '6px',
+      marginBottom: '0px',
+      width: 'calc(100% - 12px)',
+    });
+    expect(accordionContent).toHaveStyle({
+      marginLeft: '-6px',
+      width: 'calc(100% + 12px)',
+    });
+    expect(accordionContentInner).toHaveStyle({
+      paddingTop: '6px',
+      paddingBottom: '6px',
+    });
+  });
+
   test('accordion item supports asChild link content', () => {
     wrap(
       <Menu>
@@ -227,6 +262,65 @@ describe('Menu', () => {
     expect(item?.firstChild).toHaveAttribute('data-testid', 'left-icon');
   });
 
+  test('active items render a non-disruptive marker', () => {
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem active>Home</Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const item = screen
+      .getByText('Home')
+      .closest('.ucl-uikit-menu__primary-item');
+    const generatedClass = Array.from(item?.classList ?? []).find((className) =>
+      className.startsWith('css-')
+    );
+    const cssRules = Array.from(document.styleSheets)
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join(' ');
+
+    expect(item).not.toHaveAttribute('active');
+    expect(item).toHaveStyle({ position: 'relative' });
+    expect(cssRules).toContain(`.${generatedClass}::before`);
+    expect(cssRules).toContain('width: 6px');
+    expect(cssRules).toContain('height: 24px');
+  });
+
+  test.each([
+    {
+      name: 'accordion',
+      menu: (
+        <Menu.Accordion
+          active
+          label='Systems'
+        />
+      ),
+      text: 'Systems',
+      selector: '.ucl-uikit-menu__accordion',
+    },
+    {
+      name: 'accordion item',
+      menu: <Menu.Accordion.Item active>Library</Menu.Accordion.Item>,
+      text: 'Library',
+      selector: '.ucl-uikit-menu__accordion-item',
+    },
+  ])('$name supports active state', ({ menu, text, selector }) => {
+    wrap(<Menu>{menu}</Menu>);
+
+    const item = screen.getByText(text).closest(selector);
+    const generatedClass = Array.from(item?.classList ?? []).find((className) =>
+      className.startsWith('css-')
+    );
+    const cssRules = Array.from(document.styleSheets)
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join(' ');
+
+    expect(item).not.toHaveAttribute('active');
+    expect(cssRules).toContain(`.${generatedClass}::before`);
+  });
+
   test('primary items use background hover instead of underline hover', () => {
     wrap(
       <Menu>

package/lib/components/MenuNew/index.ts

@@ -6,6 +6,7 @@ export type {
   MenuHeadingProps,
   MenuSectionProps,
   MenuAccordionProps,
+  MenuAccordionItemProps,
   MenuBaseItemProps,
   PrimaryMenuItemProps,
   SecondaryMenuItemProps,

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

@@ -44,13 +44,18 @@ exports[`Cell > Snapshot: variants 1`] = `
           data-testid="ucl-uikit-table__cell-content"
         >
           <span
-            class="ucl-uikit-checkbox css-tumlz"
+            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+            data-testid="ucl-uikit-checkbox__root"
           >
             <input
-              class="css-nzy7im"
+              class="css-1bjd9qx"
               data-testid="ucl-uikit-checkbox"
               type="checkbox"
             />
+            <span
+              aria-hidden="true"
+              class="css-1quq9cp"
+            />
           </span>
         </div>
       </td>

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

@@ -14,14 +14,19 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
           data-testid="ucl-uikit-table__head-cell-content"
         >
           <span
-            class="ucl-uikit-checkbox css-tumlz"
+            class="ucl-uikit-base-checkbox ucl-uikit-checkbox css-tfrbiv"
+            data-testid="ucl-uikit-checkbox__root"
           >
             <input
               aria-label="Select all rows"
-              class="css-nzy7im"
+              class="css-1bjd9qx"
               data-testid="ucl-uikit-checkbox"
               type="checkbox"
             />
+            <span
+              aria-hidden="true"
+              class="css-1quq9cp"
+            />
           </span>
         </div>
       </th>

package/lib/components/index.ts

@@ -34,6 +34,9 @@ export type { AvatarProps } from './Avatar';
 export { default as Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 
+export { default as BaseCheckbox } from './BaseCheckbox';
+export type { BaseCheckboxProps, BaseCheckboxState } from './BaseCheckbox';
+
 export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.26.1",
+  "version": "0.27.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",