braid-design-system 30.4.2 → 30.6.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # braid-design-system
 
+## 30.6.0
+
+### Minor Changes
+
+- **TextLinkButton:** Add support for `tabIndex` ([#1025](https://github.com/seek-oss/braid-design-system/pull/1025))
+
+## 30.5.1
+
+### Patch Changes
+
+- Move `@types/react` to devDependencies ([#1023](https://github.com/seek-oss/braid-design-system/pull/1023))
+
+  Braid requires consumers to provide React, therefore they should also provide the appropriate version of `@types/react` rather than rely on the version installed in Braid.
+
+## 30.5.0
+
+### Minor Changes
+
+- **FieldLabel:** Dim label when `disabled` ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))
+
+### Patch Changes
+
+- **Autosuggest, Dropdown, MonthPicker, PasswordField, TextField, Textarea:** Hide `placeholder` text when field is `disabled` ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))
+
+- **Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup:** Dim the field value and label when field is `disabled` ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))
+
+- **Autosuggest, TextField:** Hide clear button when field is `disabled`. ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))
+
+## 30.4.3
+
+### Patch Changes
+
+- **Buttons, Fields, TextLinks, Toggle:** Use `span` for field state overlays instead of `div` ([#1006](https://github.com/seek-oss/braid-design-system/pull/1006))
+
+  Produce more valid HTML as `div` elements are not as flexible with which elements they can be inside (from a validators perspective).
+
+- Update vanilla-extract dependencies ([#1008](https://github.com/seek-oss/braid-design-system/pull/1008))
+
 ## 30.4.2
 
 ### Patch Changes

package/lib/components/Actions/Actions.docs.tsx

@@ -18,7 +18,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Actions>
           <Button>Button 1</Button>
           <Button>Button 2</Button>

package/lib/components/Autosuggest/Autosuggest.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { useState, ReactNode } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { Autosuggest, filterSuggestions, IconSearch } from '../';
+import { Autosuggest, filterSuggestions, IconSearch, Stack } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -148,6 +148,48 @@ export const screenshots: ComponentScreenshot = {
         );
       },
     },
+    {
+      label: 'Autosuggest when disabled',
+      Container,
+      Example: ({ id, handler }) => (
+        <Stack space="gutter">
+          <Autosuggest
+            label="With no value or placeholder"
+            id={`${id}_1`}
+            value={{ text: '' }}
+            disabled={true}
+            onChange={handler}
+            suggestions={[]}
+          />
+          <Autosuggest
+            label="With value and no placeholder"
+            id={`${id}_2`}
+            value={{ text: 'Text value' }}
+            disabled={true}
+            onChange={handler}
+            suggestions={[]}
+          />
+          <Autosuggest
+            label="With no value and a placeholder"
+            id={`${id}_3`}
+            value={{ text: '' }}
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+            suggestions={[]}
+          />
+          <Autosuggest
+            label="With value and a placeholder"
+            id={`${id}_4`}
+            value={{ text: 'Text value' }}
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+            suggestions={[]}
+          />
+        </Stack>
+      ),
+    },
     {
       label: 'Autosuggest with no visual label',
       Container,

package/lib/components/Autosuggest/Autosuggest.tsx

@@ -499,7 +499,7 @@ export const Autosuggest = forwardRef(function <Value>(
   const inputProps = {
     value: previewValue ? previewValue.text : value.text,
     type: type === 'search' ? type : 'text',
-    placeholder,
+    placeholder: !restProps.disabled ? placeholder : undefined,
     onChange: (e: ChangeEvent<HTMLInputElement>) => {
       const inputValue = e.target.value;
 
@@ -590,6 +590,7 @@ export const Autosuggest = forwardRef(function <Value>(
 
   const clearable = Boolean(
     typeof onClear !== 'undefined' &&
+      !restProps.disabled &&
       typeof value !== 'undefined' &&
       value.text.length > 0,
   );

package/lib/components/Badge/Badge.docs.tsx

@@ -8,7 +8,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Inline space="medium" align="center">
           <Inline space="medium" collapseBelow="desktop" align="center">
             <Badge tone="positive">Positive</Badge>

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

@@ -20,7 +20,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Inline space="small" collapseBelow="desktop">
           <Button>Solid</Button>
           <Button variant="ghost">Ghost</Button>

package/lib/components/ButtonLink/ButtonLink.docs.tsx

@@ -9,7 +9,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Inline space="small" collapseBelow="desktop">
           <ButtonLink href="#">Solid</ButtonLink>
           <ButtonLink href="#" variant="ghost">

package/lib/components/Card/Card.docs.tsx

@@ -10,7 +10,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Placeholder label="This content is inside a card" height={60} />
       </Card>,
     ),

package/lib/components/Checkbox/Checkbox.docs.tsx

@@ -147,16 +147,24 @@ const docs: ComponentDocs = {
           to the <Strong>disabled</Strong> prop.
         </Text>
       ),
-      background: 'card',
-      Example: ({ id, getState, toggleState }) =>
+      Example: ({ id, toggleState }) =>
         source(
-          <Checkbox
-            id={id}
-            disabled={true}
-            checked={getState('checked')}
-            onChange={() => toggleState('checked')}
-            label="Label"
-          />,
+          <Stack space="medium">
+            <Checkbox
+              id={id}
+              disabled={true}
+              checked={false}
+              onChange={() => toggleState('checked')}
+              label="Unchecked"
+            />
+            <Checkbox
+              id={id}
+              disabled={true}
+              checked={true}
+              onChange={() => toggleState('checked')}
+              label="Checked"
+            />
+          </Stack>,
         ),
     },
     {

package/lib/components/Checkbox/CheckboxStandalone.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { CheckboxStandalone } from '../';
+import { CheckboxStandalone, Stack } from '../';
 
 export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320],
@@ -58,15 +58,23 @@ export const screenshots: ComponentScreenshot = {
     },
     {
       label: 'Disabled',
-      background: 'card',
       Example: ({ id, handler }) => (
-        <CheckboxStandalone
-          id={id}
-          disabled={true}
-          checked={false}
-          onChange={handler}
-          aria-label="Label"
-        />
+        <Stack space="gutter">
+          <CheckboxStandalone
+            id={id}
+            disabled={true}
+            checked={false}
+            onChange={handler}
+            aria-label="Disabled unchecked"
+          />
+          <CheckboxStandalone
+            id={id}
+            disabled={true}
+            checked={true}
+            onChange={handler}
+            aria-label="Disabled checked"
+          />
+        </Stack>
       ),
     },
     {

package/lib/components/Divider/Divider.docs.tsx

@@ -7,7 +7,7 @@ const docs: ComponentDocs = {
   category: 'Layout',
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Stack space="xlarge">
           <Stack space="medium">
             <Text tone="secondary">Regular weight</Text>

package/lib/components/Dropdown/Dropdown.docs.tsx

@@ -10,6 +10,7 @@ import {
   IconLocation,
   Stack,
   Heading,
+  Notice,
 } from '../';
 import source from '../../utils/source.macro';
 
@@ -202,13 +203,13 @@ const docs: ComponentDocs = {
         </Text>
       ),
       background: 'card',
-      Example: ({ id, getState, setState }) =>
+      Example: ({ id, setState }) =>
         source(
           <Dropdown
             label="Label"
             id={id}
             onChange={setState('dropdown')}
-            value={getState('dropdown')}
+            value="Option 1"
             disabled={true}
           >
             <option>Option 1</option>
@@ -219,10 +220,18 @@ const docs: ComponentDocs = {
     {
       label: 'Placeholder prompt',
       description: (
-        <Text>
-          Providing a <Strong>placeholder</Strong> will display as a prompt to
-          the user no value is selected.
-        </Text>
+        <>
+          <Text>
+            Providing a <Strong>placeholder</Strong> will display as a prompt to
+            the user no value is selected.
+          </Text>
+          <Notice tone="info">
+            <Text>
+              A placeholder is not visible when the field is{' '}
+              <TextLink href="#disabled-field">disabled</TextLink>.
+            </Text>
+          </Notice>
+        </>
       ),
       Example: ({ id, getState, setState }) =>
         source(
@@ -242,7 +251,7 @@ const docs: ComponentDocs = {
       label: 'Inserting an icon',
       description: (
         <Text>
-          For decoration and help disguinishing fields an <Strong>icon</Strong>{' '}
+          For decoration and help distinguishing fields an <Strong>icon</Strong>{' '}
           can be provided. This will be placed in the left of the field and is
           not interactive.
         </Text>

package/lib/components/Dropdown/Dropdown.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { Dropdown, IconLocation } from '../';
+import { Dropdown, IconLocation, Stack } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -88,6 +88,56 @@ export const screenshots: ComponentScreenshot = {
         </Dropdown>
       ),
     },
+    {
+      label: 'Dropdown in disabled state',
+      Container,
+      Example: ({ id, handler }) => (
+        <Stack space="gutter">
+          <Dropdown
+            label="With no value or placeholder"
+            id={`${id}_1`}
+            onChange={handler}
+            value=""
+            disabled={true}
+          >
+            <option value="1">Developer</option>
+            <option value="2">Designer</option>
+          </Dropdown>
+          <Dropdown
+            label="With value and no placeholder"
+            id={`${id}_2`}
+            onChange={handler}
+            value="1"
+            disabled={true}
+          >
+            <option value="1">Developer</option>
+            <option value="2">Designer</option>
+          </Dropdown>
+          <Dropdown
+            label="With no value and a placeholder"
+            id={`${id}_3`}
+            onChange={handler}
+            value=""
+            disabled={true}
+            placeholder="Placeholder text"
+          >
+            <option value="1">Developer</option>
+            <option value="2">Designer</option>
+          </Dropdown>
+          <Dropdown
+            label="With value and a placeholder"
+            id={`${id}_4`}
+            onChange={handler}
+            value="1"
+            disabled={true}
+            placeholder="Placeholder text"
+          >
+            <option value="1">Developer</option>
+            <option value="2">Designer</option>
+          </Dropdown>
+        </Stack>
+      ),
+    },
     {
       label: 'Dropdown on Brand Background',
       background: 'brand',

package/lib/components/Dropdown/Dropdown.tsx

@@ -66,7 +66,7 @@ export const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>(
             >
               {!value || placeholder ? (
                 <option value="" disabled={true}>
-                  {placeholder}
+                  {disabled ? '' : placeholder}
                 </option>
               ) : null}
               {children}

package/lib/components/FieldLabel/FieldLabel.docs.tsx

@@ -10,18 +10,23 @@ import {
   Box,
   Hidden,
   Alert,
-  List,
+  Notice,
 } from '../';
 import { Placeholder } from '../../playroom/components';
+import { ReactNode } from 'markdown-to-jsx/node_modules/@types/react';
+
+const Container = ({ children }: { children: ReactNode }) => (
+  <Box maxWidth="xsmall">{children}</Box>
+);
 
 const docs: ComponentDocs = {
   category: 'Content',
   Example: () =>
     source(
-      <Box style={{ maxWidth: 400 }}>
-        <Stack space="small">
+      <Box maxWidth="xsmall">
+        <Stack space="xsmall">
           <FieldLabel
-            htmlFor="field"
+            htmlFor="example"
             label="Label"
             secondaryLabel={
               <>
@@ -34,7 +39,7 @@ const docs: ComponentDocs = {
               </TextLink>
             }
           />
-          <Box id="field">
+          <Box id="example">
             <Placeholder height={40} />
           </Box>
         </Stack>
@@ -55,18 +60,151 @@ const docs: ComponentDocs = {
       associate the label with its associated field.
     </Text>
   ),
-  alternatives: [],
+  alternatives: [
+    {
+      name: 'FieldMessage',
+      description: 'For displaying messages below a custom field.',
+    },
+  ],
   additional: [
     {
-      label: 'See also',
+      label: 'Label',
+      Container,
+      description: <Text>Sets the primary label of field.</Text>,
+      Example: () =>
+        source(
+          <Stack space="xsmall">
+            <FieldLabel htmlFor="labelExample" label="Label" />
+            <Box id="labelExample">
+              <Placeholder height={40} />
+            </Box>
+          </Stack>,
+        ),
+    },
+    {
+      label: 'Secondary label',
+      Container,
+      description: (
+        <>
+          <Text>
+            Provide additional context, typically used to indicate optionality
+            of a field.
+          </Text>
+          <Notice tone="info">
+            <Text>
+              Only displayed when provided in addition to a{' '}
+              <TextLink href="#label">label</TextLink>.
+            </Text>
+          </Notice>
+        </>
+      ),
+      Example: () =>
+        source(
+          <Stack space="xsmall">
+            <FieldLabel
+              htmlFor="secondaryExample"
+              label="Label"
+              secondaryLabel="Secondary label"
+            />
+            <Box id="secondaryExample">
+              <Placeholder height={40} />
+            </Box>
+          </Stack>,
+        ),
+    },
+    {
+      label: 'Tertiary label',
+      Container,
+      description: (
+        <>
+          <Text>
+            Provide further context, typically used for providing assistance
+            with a field.
+          </Text>
+          <Notice tone="info">
+            <Text>
+              Only displayed when provided in addition to a{' '}
+              <TextLink href="#label">label</TextLink>.
+            </Text>
+          </Notice>
+        </>
+      ),
+      Example: () =>
+        source(
+          <Stack space="xsmall">
+            <FieldLabel
+              htmlFor="tertiaryExample"
+              label="Label"
+              tertiaryLabel={
+                <TextLink href="#">
+                  Tertiary<Hidden below="tablet"> label</Hidden>
+                </TextLink>
+              }
+            />
+            <Box id="tertiaryExample">
+              <Placeholder height={40} />
+            </Box>
+          </Stack>,
+        ),
+    },
+    {
+      label: 'Additional description',
+      Container,
       description: (
-        <List space="large">
-          <Text tone="secondary">
-            <TextLink href="/components/FieldMessage">FieldMessage</TextLink>{' '}
-            &mdash; For displaying messages below a custom field.
+        <>
+          <Text>
+            Additional context can be provided with a{' '}
+            <Strong>description</Strong>. This will display below the field
+            label.
           </Text>
-        </List>
+          <Alert tone="info">
+            <Text>
+              It is strongly recommended that a <Strong>descriptionId</Strong>{' '}
+              is also passed in, allowing the description to be associated with
+              your custom field via <Strong>aria-describedby</Strong> prop. This
+              will allow a screen reader to provide this additional context upon
+              focusing the field.
+            </Text>
+          </Alert>
+        </>
+      ),
+      Example: () =>
+        source(
+          <Stack space="xsmall">
+            <FieldLabel
+              htmlFor="descriptionExample"
+              label="Label"
+              description="Extra information about the field"
+              descriptionId="fieldDescription"
+            />
+            <Box id="descriptionExample" aria-describedby="fieldDescription">
+              <Placeholder height={40} />
+            </Box>
+          </Stack>,
+        ),
+    },
+    {
+      label: 'Disabled field',
+      Container,
+      description: (
+        <Text>
+          Setting the <Strong>disabled</Strong> prop to <Strong>true</Strong>{' '}
+          dims the field label.
+        </Text>
       ),
+      Example: () =>
+        source(
+          <Stack space="xsmall">
+            <FieldLabel
+              htmlFor="disabledExample"
+              label="Label"
+              disabled={true}
+            />
+            <Box id="disabledExample">
+              <Placeholder height={40} />
+            </Box>
+          </Stack>,
+        ),
     },
   ],
 };

package/lib/components/FieldLabel/FieldLabel.screenshots.tsx

@@ -50,5 +50,18 @@ export const screenshots: ComponentScreenshot = {
         />
       ),
     },
+    {
+      label: 'Field Label when disabled',
+      Container,
+      Example: ({ id }) => (
+        <FieldLabel
+          htmlFor={id}
+          label="Title"
+          disabled={true}
+          secondaryLabel="Optional"
+          tertiaryLabel={<TextLink href="#">Help?</TextLink>}
+        />
+      ),
+    },
   ],
 };

package/lib/components/FieldLabel/FieldLabel.tsx

@@ -10,6 +10,7 @@ export interface FieldLabelProps {
   id?: string;
   htmlFor: string | false;
   label?: ReactNode;
+  disabled?: boolean;
   secondaryLabel?: ReactNode;
   tertiaryLabel?: ReactNode;
   description?: ReactNode;
@@ -21,6 +22,7 @@ export const FieldLabel = ({
   id,
   htmlFor,
   label,
+  disabled,
   secondaryLabel,
   tertiaryLabel,
   description,
@@ -32,7 +34,7 @@ export const FieldLabel = ({
   }
 
   const labelEl = (
-    <Text>
+    <Text tone={disabled ? 'secondary' : undefined}>
       <Strong>{label}</Strong>
       {secondaryLabel ? <Secondary>&nbsp;({secondaryLabel})</Secondary> : null}
     </Text>

package/lib/components/FieldMessage/FieldMessage.docs.tsx

@@ -1,16 +1,7 @@
 import React from 'react';
 import source from '../../utils/source.macro';
 import { ComponentDocs } from '../../../site/src/types';
-import {
-  FieldMessage,
-  Alert,
-  Text,
-  Strong,
-  List,
-  TextLink,
-  Stack,
-  Box,
-} from '../';
+import { FieldMessage, Alert, Text, Strong, Stack, Box } from '../';
 import { Placeholder } from '../../playroom/components';
 
 const docs: ComponentDocs = {
@@ -59,18 +50,10 @@ const docs: ComponentDocs = {
       prop.
     </Text>
   ),
-  alternatives: [],
-  additional: [
+  alternatives: [
     {
-      label: 'See also',
-      description: (
-        <List space="large">
-          <Text tone="secondary">
-            <TextLink href="/components/FieldLabel">FieldLabel</TextLink>{' '}
-            &mdash; For displaying labels above a custom field.
-          </Text>
-        </List>
-      ),
+      name: 'FieldLabel',
+      description: 'For displaying labels above a custom field',
     },
   ],
 };