uikit-react-public 0.26.1 → 0.26.3

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,
@@ -68,9 +69,9 @@ const MenuAccordion = ({
     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 +80,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

@@ -5,6 +5,7 @@ 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;
@@ -21,11 +22,12 @@ const MenuAccordionItem = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    margin: 0;
-    padding-left: ${theme.padding.p40};
+    width: calc(100% - ${FOCUS_RING_GUTTER_PX * 2}px);
+    margin: 0 ${FOCUS_RING_GUTTER_PX}px;
+    padding-left: calc(${theme.padding.p40} - ${FOCUS_RING_GUTTER_PX}px);
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
-      padding: 0 ${theme.padding.p56};
+      padding: 0 calc(${theme.padding.p56} - ${FOCUS_RING_GUTTER_PX}px);
     }
   `;
 

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

@@ -113,6 +113,36 @@ 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;
+
+    expect(accordionItem).toHaveStyle({
+      marginTop: '0px',
+      marginLeft: '6px',
+      marginRight: '6px',
+      marginBottom: '0px',
+      width: 'calc(100% - 12px)',
+    });
+    expect(accordionContentInner).toHaveStyle({
+      paddingTop: '6px',
+      paddingBottom: '6px',
+    });
+  });
+
   test('accordion item supports asChild link content', () => {
     wrap(
       <Menu>

package/package.json

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