braid-design-system 31.2.2 → 31.4.0

package/color-mode/index.ts

@@ -1,9 +1,13 @@
 import { darkMode } from '../lib/css/atoms/sprinkles.css';
-const flag = '_bdsdm=1';
+const flag = '_bdsdm';
+// VALUES
+// 0 = light mode
+// 1 = dark mode
+// 2 = OS Preference
 // TODO: COLORMODE RELEASE
 // Finalise import contract
-export const __experimentalDarkMode__ = `
-<script>
-((l,p)=>{try{r=new RegExp(\`[\?&]\${p}\`);if(r.test(l.search)){history.replaceState(null,null,l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('${darkMode}')}}catch(e){}})(location,'${flag}')
-</script>
-`;
+export const __experimentalDarkMode__ = [
+  '<script>',
+  `((l)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${darkMode}')}}catch(e){}})(location)`,
+  '</script>',
+].join('');

package/css/index.ts

@@ -10,6 +10,7 @@ const {
   grid,
   space,
   touchableSize,
+  contentWidth,
   // TODO: COLORMODE RELEASE
   // Release new backgrounds
   backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor },
@@ -24,6 +25,7 @@ const vars = {
   grid,
   space,
   touchableSize,
+  contentWidth,
   backgroundColor,
   foregroundColor,
   textWeight,

package/css/vars.docs.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { vars } from '.';
 import {
   Text,
@@ -13,7 +13,7 @@ import {
 } from '../lib/components';
 import { ReactNodeNoStrings } from '../lib/components/private/ReactNodeNoStrings';
 import Code from '../site/src/App/Code/Code';
-import { ThemedExample } from '../site/src/App/ThemeSetting';
+import { ThemedExample, useThemeSettings } from '../site/src/App/ThemeSetting';
 import { CssDoc } from '../site/src/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
@@ -43,6 +43,32 @@ const Row = ({
   </Columns>
 );
 
+const ContentWidthValue = ({ var: varName }: { var: string }) => {
+  const [size, setSize] = useState(0);
+  const { themeKey } = useThemeSettings();
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && themeKey) {
+      setSize(ref.current.offsetWidth);
+    }
+  }, [themeKey]);
+
+  return (
+    <>
+      <Box
+        component="span"
+        position="absolute"
+        pointerEvents="none"
+        opacity={0}
+        ref={ref}
+        style={{ width: varName }}
+      />
+      {size > 0 ? `${size}px` : '&nbsp;'}
+    </>
+  );
+};
+
 const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
   grid: (
     <Row name="grid">
@@ -67,6 +93,17 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
       />
     </Row>
   ),
+  contentWidth: (
+    <Stack space="medium" dividers>
+      {Object.entries(vars.contentWidth).map(([widthName, widthVar]) => (
+        <Row key={widthName} group="contentWidth" name={widthName}>
+          <Text>
+            <ContentWidthValue var={widthVar} />
+          </Text>
+        </Row>
+      ))}
+    </Stack>
+  ),
   space: (
     <Stack space="medium" dividers>
       {Object.entries(vars.space).map(([spaceName, spaceVar]) => (

package/lib/components/Accordion/Accordion.docs.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { ComponentDocs } from '../../../site/src/types';
 import source from '../../utils/source.macro';
-import { Accordion, AccordionItem, Card, Text, TextLink, Strong } from '../';
+import {
+  Accordion,
+  AccordionItem,
+  Badge,
+  Card,
+  Text,
+  TextLink,
+  Strong,
+} from '../';
 import { Placeholder } from '../../playroom/components';
 import { validSpaceValues } from './Accordion';
 
@@ -97,6 +105,37 @@ const docs: ComponentDocs = {
           </Card>,
         ),
     },
+    {
+      label: 'Badge support',
+      description: (
+        <Text>
+          Add a <TextLink href="/components/Badge">Badge</TextLink> alongside
+          the label of the AccordionItem using the <Strong>badge</Strong> prop.
+        </Text>
+      ),
+      Example: ({ id }) =>
+        source(
+          <Accordion>
+            <AccordionItem label="Accordion item 1" id={`${id}_1`}>
+              <Placeholder height={80} />
+            </AccordionItem>
+            <AccordionItem
+              label="Accordion item 2"
+              id={`${id}_2`}
+              badge={
+                <Badge tone="promote" weight="strong">
+                  Badge
+                </Badge>
+              }
+            >
+              <Placeholder height={80} />
+            </AccordionItem>
+            <AccordionItem label="Accordion item 3" id={`${id}_3`}>
+              <Placeholder height={80} />
+            </AccordionItem>
+          </Accordion>,
+        ),
+    },
     {
       label: 'Managing state',
       description: (

package/lib/components/Accordion/Accordion.gallery.tsx

@@ -4,6 +4,7 @@ import source from '../../utils/source.macro';
 import {
   Accordion,
   AccordionItem,
+  Badge,
   Placeholder,
 } from '../../playroom/components';
 import { ComponentExample } from '../../../site/src/types';
@@ -43,4 +44,28 @@ export const galleryItems: ComponentExample[] = [
         </Accordion>,
       ),
   },
+  {
+    label: 'With a Badge',
+    Example: () =>
+      source(
+        <Accordion size="standard" dividers={false}>
+          <AccordionItem label="Item 1">
+            <Placeholder height={100} />
+          </AccordionItem>
+          <AccordionItem
+            label="Item 2"
+            badge={
+              <Badge tone="promote" weight="strong">
+                Badge
+              </Badge>
+            }
+          >
+            <Placeholder height={100} />
+          </AccordionItem>
+          <AccordionItem label="Item 3">
+            <Placeholder height={100} />
+          </AccordionItem>
+        </Accordion>,
+      ),
+  },
 ];

package/lib/components/Accordion/Accordion.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { AccordionItem, Accordion, Text } from '../../components';
+import { AccordionItem, Accordion, Badge, Text } from '../../components';
 import { Placeholder } from '../../playroom/components';
 
 export const screenshots: ComponentScreenshot = {
@@ -355,5 +355,21 @@ export const screenshots: ComponentScreenshot = {
         </AccordionItem>
       ),
     },
+    {
+      label: 'AccordionItem with a badge',
+      Example: ({ id }) => (
+        <AccordionItem
+          label="Label"
+          id={id}
+          badge={
+            <Badge tone="promote" weight="strong">
+              Badge
+            </Badge>
+          }
+        >
+          <Text size="small">Content</Text>
+        </AccordionItem>
+      ),
+    },
   ],
 };

package/lib/components/Accordion/Accordion.snippets.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   AccordionItem,
   Accordion,
+  Badge,
   Placeholder,
 } from '../../playroom/components';
 import source from '../../utils/source.macro';
@@ -88,4 +89,19 @@ export const snippets: Snippets = [
       </AccordionItem>,
     ),
   },
+  {
+    name: 'Standalone item with a badge',
+    code: source(
+      <AccordionItem
+        label="Label"
+        badge={
+          <Badge tone="promote" weight="strong">
+            Badge
+          </Badge>
+        }
+      >
+        <Placeholder height={100} />
+      </AccordionItem>,
+    ),
+  },
 ];

package/lib/components/Accordion/AccordionItem.tsx

@@ -1,9 +1,16 @@
-import React, { ReactNode, useContext } from 'react';
+import React, {
+  cloneElement,
+  ReactElement,
+  ReactNode,
+  useContext,
+} from 'react';
 import assert from 'assert';
 import { Box } from '../Box/Box';
 import { Text, TextProps } from '../Text/Text';
 import { Columns } from '../Columns/Columns';
 import { Column } from '../Column/Column';
+import { Inline } from '../Inline/Inline';
+import { BadgeProps } from '../Badge/Badge';
 import { IconChevron } from '../icons';
 import {
   useDisclosure,
@@ -37,6 +44,7 @@ export type AccordionItemBaseProps = {
   size?: TextProps['size'];
   tone?: AccordionContextValue['tone'];
   data?: DataAttributeMap;
+  badge?: ReactElement<BadgeProps>;
 };
 
 export type AccordionItemProps = AccordionItemBaseProps & UseDisclosureProps;
@@ -46,6 +54,7 @@ export const AccordionItem = ({
   id,
   label,
   children,
+  badge,
   size: sizeProp,
   tone: toneProp,
   data,
@@ -69,6 +78,17 @@ export const AccordionItem = ({
       .join(', ')}`,
   );
 
+  assert(
+    // @ts-expect-error
+    !badge || badge.type.__isBadge__,
+    `AccordionItem badge prop can only be an instance of Badge. e.g. <AccordionItem badge={<Badge>New</Badge>}>`,
+  );
+
+  assert(
+    !badge || badge.props.bleedY === undefined,
+    "Badge elements cannot set the 'bleedY' prop when passed to an AccordionItem component",
+  );
+
   const size = accordionContext?.size ?? sizeProp ?? 'large';
   const tone = accordionContext?.tone ?? toneProp ?? 'neutral';
   const weight = 'medium';
@@ -111,9 +131,12 @@ export const AccordionItem = ({
           <Box position="relative">
             <Columns space={itemSpace}>
               <Column>
-                <Text size={size} weight={weight} tone={tone} component="div">
-                  {label}
-                </Text>
+                <Inline space="small" alignY="center">
+                  <Text size={size} weight={weight} tone={tone} component="div">
+                    {label}
+                  </Text>
+                  {badge ? cloneElement(badge, { bleedY: true }) : null}
+                </Inline>
               </Column>
               <Column width="content">
                 <Text

package/lib/components/Autosuggest/Autosuggest.tsx

@@ -496,6 +496,19 @@ export const Autosuggest = forwardRef(function <Value>(
     tablet: false,
   });
 
+  useEffect(() => {
+    if (menuRef.current && isOpen && !isMobile) {
+      const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
+      const viewportHeight = document.documentElement.clientHeight;
+
+      if (menuBottom > viewportHeight) {
+        menuRef.current.scrollIntoView(false);
+      }
+    }
+    // re-running this effect if the suggestionCount changes
+    // to ensure asychronous updates aren't left out of view.
+  }, [isOpen, isMobile, suggestionCount]);
+
   const inputProps = {
     value: previewValue ? previewValue.text : value.text,
     type: type === 'search' ? type : 'text',

package/lib/components/Badge/Badge.playroom.tsx

@@ -7,3 +7,5 @@ export const Badge = ({ tone, ...restProps }: BadgeProps) => (
     {...restProps}
   />
 );
+
+Badge.__isBadge__ = true;

package/lib/components/Badge/Badge.tsx

@@ -105,3 +105,5 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
 );
 
 Badge.displayName = 'Badge';
+// @ts-expect-error
+Badge.__isBadge__ = true;

package/lib/components/Button/Button.docs.tsx

@@ -215,8 +215,8 @@ const docs: ComponentDocs = {
       description: (
         <>
           <Text>
-            For cases where actions need may need to be de-emphasized, you can
-            set the button’s <Strong>tone</Strong> to <Strong>neutral.</Strong>
+            For cases where actions need to be de-emphasized, the{' '}
+            <Strong>tone</Strong> can be set to <Strong>neutral.</Strong>
           </Text>
           <Text>
             This makes the button follow the default text colour, including{' '}

package/lib/components/MenuItem/MenuItem.docs.tsx

@@ -22,7 +22,7 @@ const docs: ComponentDocs = {
   subComponents: ['MenuItemLink'],
   Example: () =>
     source(
-      <Box paddingLeft="xxlarge">
+      <Box style={{ maxWidth: '100px' }}>
         <OverflowMenu label="Options">
           <MenuItem onClick={() => {}}>Button</MenuItem>
           <MenuItemLink onClick={() => {}} href="#">
@@ -42,7 +42,7 @@ const docs: ComponentDocs = {
   accessibility: (
     <Text>
       Follows the{' '}
-      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">
+      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.2/#menu">
         WAI-ARIA Menu Pattern.
       </TextLink>
     </Text>
@@ -89,7 +89,7 @@ const docs: ComponentDocs = {
       Example: ({ id, getState, toggleState, showToast }) =>
         source(
           <>
-            <Box paddingLeft="xxlarge">
+            <Box style={{ maxWidth: '100px' }}>
               <OverflowMenu label="Options">
                 <MenuItem
                   onClick={() => toggleState('confirm')}

package/lib/components/MenuItemCheckbox/MenuItemCheckbox.docs.tsx

@@ -7,7 +7,7 @@ const docs: ComponentDocs = {
   category: 'Content',
   Example: ({ getState, setState }) =>
     source(
-      <Box style={{ paddingLeft: 200 }}>
+      <Box style={{ maxWidth: '150px' }}>
         <OverflowMenu label="Checklist">
           <MenuItemCheckbox
             checked={getState('checked1')}
@@ -40,7 +40,7 @@ const docs: ComponentDocs = {
   accessibility: (
     <Text>
       Follows the{' '}
-      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">
+      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.2/#menu">
         WAI-ARIA Menu Pattern.
       </TextLink>
     </Text>

package/lib/components/MenuItemCheckbox/MenuItemCheckbox.gallery.tsx

@@ -12,7 +12,7 @@ export const galleryItems: ComponentExample[] = [
           {setDefaultState('checked1', false)}
           {setDefaultState('checked2', false)}
           {setDefaultState('checked3', false)}
-          <Box style={{ paddingLeft: 200 }}>
+          <Box style={{ maxWidth: '120px' }}>
             <OverflowMenu label="Checklist">
               <MenuItemCheckbox
                 checked={getState('checked1')}

package/lib/components/MenuItemDivider/MenuItemDivider.docs.tsx

@@ -17,7 +17,7 @@ const docs: ComponentDocs = {
   category: 'Content',
   Example: ({ getState, setState }) =>
     source(
-      <Box style={{ paddingLeft: 200 }}>
+      <Box style={{ maxWidth: '150px' }}>
         <OverflowMenu label="Options">
           <MenuItem onClick={() => {}}>Button</MenuItem>
           <MenuItemLink href="#" onClick={() => {}}>
@@ -55,7 +55,7 @@ const docs: ComponentDocs = {
   accessibility: (
     <Text>
       Follows the{' '}
-      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">
+      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.2/#menu">
         WAI-ARIA Menu Pattern.
       </TextLink>
     </Text>

package/lib/components/MenuItemDivider/MenuItemDivider.gallery.tsx

@@ -20,7 +20,7 @@ export const galleryItems: ComponentExample[] = [
           {setDefaultState('checked2', false)}
           {setDefaultState('checked3', false)}
 
-          <Box style={{ paddingLeft: 200 }}>
+          <Box style={{ maxWidth: '120px' }}>
             <OverflowMenu label="Options">
               <MenuItem onClick={handler}>Button</MenuItem>
               <MenuItemLink href="#" onClick={handler}>

package/lib/components/MenuRenderer/MenuRenderer.css.ts

@@ -2,11 +2,6 @@ import { style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { vars } from '../../themes/vars.css';
 
-export const root = style({
-  padding: '0.05px',
-  lineHeight: 0,
-});
-
 export const backdrop = style({
   width: '100vw',
   height: '100vh',

package/lib/components/MenuRenderer/MenuRenderer.docs.tsx

@@ -15,29 +15,32 @@ import {
   Button,
   Dialog,
   IconDelete,
+  Inline,
 } from '..';
 
 const docs: ComponentDocs = {
   category: 'Content',
   Example: () =>
     source(
-      <MenuRenderer
-        offsetSpace="small"
-        trigger={(triggerProps, { open }) => (
-          <Box userSelect="none" cursor="pointer" {...triggerProps}>
-            <Text>
-              Menu{' '}
-              <IconChevron
-                direction={open ? 'up' : 'down'}
-                alignY="lowercase"
-              />
-            </Text>
-          </Box>
-        )}
-      >
-        <MenuItem onClick={() => {}}>Button</MenuItem>
-        <MenuItemLink href="#">Link</MenuItemLink>
-      </MenuRenderer>,
+      <Inline space="none">
+        <MenuRenderer
+          offsetSpace="small"
+          trigger={(triggerProps, { open }) => (
+            <Box userSelect="none" cursor="pointer" {...triggerProps}>
+              <Text>
+                Menu{' '}
+                <IconChevron
+                  direction={open ? 'up' : 'down'}
+                  alignY="lowercase"
+                />
+              </Text>
+            </Box>
+          )}
+        >
+          <MenuItem onClick={() => {}}>Button</MenuItem>
+          <MenuItemLink href="#">Link</MenuItemLink>
+        </MenuRenderer>
+      </Inline>,
     ),
   description: (
     <Stack space="large">
@@ -53,7 +56,7 @@ const docs: ComponentDocs = {
   accessibility: (
     <Text>
       Follows the{' '}
-      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">
+      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.2/#menu">
         WAI-ARIA Menu Pattern.
       </TextLink>
     </Text>
@@ -75,7 +78,7 @@ const docs: ComponentDocs = {
       ),
       Example: () =>
         source(
-          <Box style={{ paddingLeft: '40px', maxWidth: '220px' }}>
+          <Inline space="none">
             <MenuRenderer
               align="right"
               offsetSpace="small"
@@ -94,7 +97,7 @@ const docs: ComponentDocs = {
               <MenuItem onClick={() => {}}>Button</MenuItem>
               <MenuItemLink href="#">Link</MenuItemLink>
             </MenuRenderer>
-          </Box>,
+          </Inline>,
         ),
     },
     {
@@ -111,23 +114,25 @@ const docs: ComponentDocs = {
       ),
       Example: () =>
         source(
-          <MenuRenderer
-            offsetSpace={{ mobile: 'xsmall', tablet: 'small' }}
-            trigger={(triggerProps, { open }) => (
-              <Box userSelect="none" cursor="pointer" {...triggerProps}>
-                <Text>
-                  Custom space{' '}
-                  <IconChevron
-                    direction={open ? 'up' : 'down'}
-                    alignY="lowercase"
-                  />
-                </Text>
-              </Box>
-            )}
-          >
-            <MenuItem onClick={() => {}}>Button</MenuItem>
-            <MenuItemLink href="#">Link</MenuItemLink>
-          </MenuRenderer>,
+          <Inline space="none">
+            <MenuRenderer
+              offsetSpace={{ mobile: 'xsmall', tablet: 'small' }}
+              trigger={(triggerProps, { open }) => (
+                <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                  <Text>
+                    Custom space{' '}
+                    <IconChevron
+                      direction={open ? 'up' : 'down'}
+                      alignY="lowercase"
+                    />
+                  </Text>
+                </Box>
+              )}
+            >
+              <MenuItem onClick={() => {}}>Button</MenuItem>
+              <MenuItemLink href="#">Link</MenuItemLink>
+            </MenuRenderer>
+          </Inline>,
         ),
     },
     {
@@ -143,24 +148,29 @@ const docs: ComponentDocs = {
       Example: ({ id, getState, toggleState, showToast }) =>
         source(
           <>
-            <MenuRenderer
-              offsetSpace="small"
-              trigger={(triggerProps, { open }) => (
-                <Box userSelect="none" cursor="pointer" {...triggerProps}>
-                  <Text>
-                    Menu{' '}
-                    <IconChevron
-                      direction={open ? 'up' : 'down'}
-                      alignY="lowercase"
-                    />
-                  </Text>
-                </Box>
-              )}
-            >
-              <MenuItem onClick={() => toggleState('confirm')} tone="critical">
-                Delete
-              </MenuItem>
-            </MenuRenderer>
+            <Inline space="none">
+              <MenuRenderer
+                offsetSpace="small"
+                trigger={(triggerProps, { open }) => (
+                  <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                    <Text>
+                      Menu{' '}
+                      <IconChevron
+                        direction={open ? 'up' : 'down'}
+                        alignY="lowercase"
+                      />
+                    </Text>
+                  </Box>
+                )}
+              >
+                <MenuItem
+                  onClick={() => toggleState('confirm')}
+                  tone="critical"
+                >
+                  Delete
+                </MenuItem>
+              </MenuRenderer>
+            </Inline>
             <Dialog
               id={id}
               width="content"