braid-design-system 30.4.2 → 30.6.0

package/lib/components/Loader/Loader.css.ts

@@ -1,9 +1,4 @@
-import {
-  composeStyles,
-  keyframes,
-  style,
-  styleVariants,
-} from '@vanilla-extract/css';
+import { keyframes, style, styleVariants } from '@vanilla-extract/css';
 import { responsiveStyle } from '../../css/responsiveStyle';
 import { vars } from '../../themes/vars.css';
 
@@ -52,7 +47,7 @@ const bounceAnimation = style({
 });
 
 const animationDelayInMs = 70;
-export const circle = composeStyles(
+export const circle = style([
   bounceAnimation,
   style({
     transform: `translateY(1.4em)`,
@@ -65,7 +60,7 @@ export const circle = composeStyles(
       },
     },
   }),
-);
+]);
 
 export const animationDelayValueInMs = 800;
 

package/lib/components/MonthPicker/MonthPicker.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { MonthPicker } from '../';
+import { MonthPicker, Stack } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -47,6 +47,28 @@ export const screenshots: ComponentScreenshot = {
         />
       ),
     },
+    {
+      label: 'Disabled',
+      Container,
+      Example: ({ id, handler }) => (
+        <Stack space="gutter">
+          <MonthPicker
+            id={`${id}_1`}
+            label="With value"
+            disabled={true}
+            value={{ month: 1, year: 2019 }}
+            onChange={handler}
+          />
+          <MonthPicker
+            id={`${id}_2`}
+            label="No value"
+            disabled={true}
+            value={{}}
+            onChange={handler}
+          />
+        </Stack>
+      ),
+    },
     {
       label: 'No visual label',
       Container,

package/lib/components/Notice/Notice.docs.tsx

@@ -8,7 +8,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Stack space="medium">
           <Notice tone="promote">
             <Text>This is a promoted message.</Text>

package/lib/components/PasswordField/PasswordField.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { PasswordField, TextLink } from '../';
+import { PasswordField, Stack, TextLink } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -140,18 +140,40 @@ export const screenshots: ComponentScreenshot = {
     {
       label: 'PasswordField disabled',
       Container,
-      Example: ({ id }) => {
-        const [value, setValue] = useState('qwerty');
-        return (
+      Example: ({ id, handler }) => (
+        <Stack space="gutter">
           <PasswordField
-            label="Password"
-            id={id}
-            value={value}
-            onChange={(ev) => setValue(ev.currentTarget.value)}
+            label="With no value or placeholder"
+            id={`${id}_1`}
+            value=""
             disabled={true}
+            onChange={handler}
           />
-        );
-      },
+          <PasswordField
+            label="With value and no placeholder"
+            id={`${id}_2`}
+            value="Text value"
+            disabled={true}
+            onChange={handler}
+          />
+          <PasswordField
+            label="With no value and a placeholder"
+            id={`${id}_3`}
+            value=""
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+          />
+          <PasswordField
+            label="With value and a placeholder"
+            id={`${id}_4`}
+            value="Text value"
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+          />
+        </Stack>
+      ),
     },
     {
       label: 'PasswordField on Brand Background',

package/lib/components/PasswordField/PasswordField.tsx

@@ -83,6 +83,7 @@ export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         labelId={undefined}
         disabled={disabled}
         secondaryMessage={null}
+        alwaysShowSecondaryIcon={!disabled}
         secondaryIcon={
           disabled ? null : (
             <IconButton
@@ -106,7 +107,7 @@ export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
               onChange={onChange}
               onFocus={onFocus}
               onBlur={onBlur}
-              placeholder={placeholder}
+              placeholder={!disabled ? placeholder : undefined}
               {...fieldProps}
               ref={inputRef}
             />

package/lib/components/Radio/Radio.screenshots.tsx

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

package/lib/components/RadioGroup/RadioGroup.screenshots.tsx

@@ -84,23 +84,20 @@ export const screenshots: ComponentScreenshot = {
     },
     {
       label: 'When disabled',
-      Example: () => {
-        const [state, setState] = useState('');
-        return (
-          <RadioGroup
-            id="radiolist5"
-            value={state}
-            onChange={(e) => setState(e.currentTarget.value)}
-            label="Experience"
-            disabled
-          >
-            <RadioItem label="Less than one year" value="0" />
-            <RadioItem label="1 year" value="1" />
-            <RadioItem label="2 years" value="2" />
-            <RadioItem label="3+ years " value="3" />
-          </RadioGroup>
-        );
-      },
+      Example: ({ handler }) => (
+        <RadioGroup
+          id="radiolist5"
+          value="2"
+          onChange={handler}
+          label="Experience"
+          disabled
+        >
+          <RadioItem label="Less than one year" value="0" />
+          <RadioItem label="1 year" value="1" />
+          <RadioItem label="2 years" value="2" />
+          <RadioItem label="3+ years " value="3" />
+        </RadioGroup>
+      ),
     },
     {
       label: 'When disabled and critical',

package/lib/components/Tabs/Tabs.docs.tsx

@@ -22,7 +22,7 @@ const docs: ComponentDocs = {
   subComponents: ['TabsProvider', 'Tab', 'TabPanels', 'TabPanel'],
   Example: ({ id }) =>
     source(
-      <Card>
+      <Card rounded>
         <TabsProvider id={id}>
           <Stack space="medium">
             <Tabs label="Test tabs">

package/lib/components/Tag/Tag.docs.tsx

@@ -8,7 +8,7 @@ const docs: ComponentDocs = {
   migrationGuide: true,
   Example: () =>
     source(
-      <Card>
+      <Card rounded>
         <Inline space="small">
           <Tag>One</Tag>
           <Tag>Two</Tag>

package/lib/components/TextField/TextField.docs.tsx

@@ -150,13 +150,13 @@ const docs: ComponentDocs = {
         </Text>
       ),
       background: 'card',
-      Example: ({ id, getState, setState }) =>
+      Example: ({ id, setState }) =>
         source(
           <TextField
             label="Label"
             id={id}
             onChange={setState('textfield')}
-            value={getState('textfield')}
+            value="Text in disabled field"
             disabled={true}
           />,
         ),
@@ -209,7 +209,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/TextField/TextField.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { useState, ReactNode } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { IconSearch, IconPhone, TextField, TextLink } from '../';
+import { IconSearch, IconPhone, TextField, TextLink, Stack } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -14,10 +14,10 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Job Title"
+          label="Label"
           id={id}
           onChange={handler}
-          value="Senior Developer"
+          value="Text value"
         />
       ),
     },
@@ -26,7 +26,7 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Job Title"
+          label="Label"
           id={id}
           onChange={handler}
           value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
@@ -41,7 +41,7 @@ export const screenshots: ComponentScreenshot = {
 
         return (
           <TextField
-            label="Job Title"
+            label="Label"
             id={id}
             onChange={(e) => setValue(e.currentTarget.value)}
             onClear={() => setValue('')}
@@ -58,10 +58,10 @@ export const screenshots: ComponentScreenshot = {
 
         return (
           <TextField
-            label="Job Title"
+            label="Label"
             id={id}
             icon={<IconSearch />}
-            placeholder="Enter a job title"
+            placeholder="Placeholder text"
             onChange={(e) => setValue(e.currentTarget.value)}
             value={value}
           />
@@ -73,7 +73,7 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Job Title"
+          label="Label"
           id={id}
           onChange={handler}
           onClear={handler}
@@ -86,10 +86,10 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Job Title"
+          label="Label"
           id={id}
           value=""
-          message="e.g. Senior Developer"
+          message="Neutral message"
           onChange={handler}
         />
       ),
@@ -99,8 +99,8 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Title"
-          secondaryLabel="Optional"
+          label="Label"
+          secondaryLabel="Secondary"
           id={id}
           value=""
           onChange={handler}
@@ -112,8 +112,8 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Title"
-          secondaryLabel="Optional"
+          label="Label"
+          secondaryLabel="Secondary"
           tertiaryLabel={<TextLink href="#">Help?</TextLink>}
           id={id}
           value=""
@@ -125,7 +125,7 @@ export const screenshots: ComponentScreenshot = {
       label: 'TextField with no visual label',
       Container,
       Example: ({ id, handler }) => (
-        <TextField aria-label="Title" id={id} value="" onChange={handler} />
+        <TextField aria-label="Label" id={id} value="" onChange={handler} />
       ),
     },
     {
@@ -133,8 +133,8 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Title"
-          secondaryLabel="Optional"
+          label="Label"
+          secondaryLabel="Secondary"
           description="Longer description of this field"
           id={id}
           value=""
@@ -143,15 +143,15 @@ export const screenshots: ComponentScreenshot = {
       ),
     },
     {
-      label: 'TextField with error',
+      label: 'TextField with critical message',
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Do you like Braid?"
+          label="Label"
           tone="critical"
           id={id}
-          value="No"
-          message="Answer is incorrect"
+          value="Text value"
+          message="Critical message"
           onChange={handler}
         />
       ),
@@ -161,25 +161,63 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Do you like Braid?"
+          label="Label"
           id={id}
-          value="Yes"
-          message="Nice one!"
+          value="Text value"
+          message="Positive message"
           tone="positive"
           onChange={handler}
         />
       ),
     },
+    {
+      label: 'TextField disabled',
+      Container,
+      Example: ({ id, handler }) => (
+        <Stack space="gutter">
+          <TextField
+            label="With no value or placeholder"
+            id={`${id}_1`}
+            value=""
+            disabled={true}
+            onChange={handler}
+          />
+          <TextField
+            label="With value and no placeholder"
+            id={`${id}_2`}
+            value="Text value"
+            disabled={true}
+            onChange={handler}
+          />
+          <TextField
+            label="With no value and a placeholder"
+            id={`${id}_3`}
+            value=""
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+          />
+          <TextField
+            label="With value and a placeholder"
+            id={`${id}_4`}
+            value="Text value"
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+          />
+        </Stack>
+      ),
+    },
     {
       label: 'TextField on Brand Background',
       background: 'brand',
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Job Title"
+          label="Label"
           id={id}
           onChange={handler}
-          value="Senior Developer"
+          value="Text value"
         />
       ),
     },
@@ -188,11 +226,11 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Amount"
+          label="Label"
           id={id}
           onChange={handler}
-          prefix="AUD $"
-          value="1000"
+          prefix="Prefix"
+          value="Text value"
         />
       ),
     },
@@ -201,12 +239,12 @@ export const screenshots: ComponentScreenshot = {
       Container,
       Example: ({ id, handler }) => (
         <TextField
-          label="Phone number"
+          label="Label"
           id={id}
           onChange={handler}
           icon={<IconPhone />}
-          prefix="+61"
-          value="411 111 111"
+          prefix="Prefix"
+          value="Text value"
         />
       ),
     },

package/lib/components/TextField/TextField.tsx

@@ -58,6 +58,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     const clearable = Boolean(
       typeof onClear !== 'undefined' &&
+        !restProps.disabled &&
         typeof value === 'string' &&
         value.length > 0,
     );
@@ -96,7 +97,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
               onChange={onChange}
               onFocus={onFocus}
               onBlur={onBlur}
-              placeholder={placeholder}
+              placeholder={!restProps.disabled ? placeholder : undefined}
               {...fieldProps}
               ref={inputRef}
             />

package/lib/components/TextLinkButton/TextLinkButton.docs.tsx

@@ -23,8 +23,8 @@ const docs: ComponentDocs = {
   accessibility: (
     <>
       <Text>
-        Even thought is looks like a{' '}
-        <TextLink href="/component/TextLink">TextLink</TextLink>, this is
+        Even though it looks like a{' '}
+        <TextLink href="/components/TextLink">TextLink</TextLink>, this is
         actually a semantic button following the{' '}
         <TextLink href="https://www.w3.org/TR/wai-aria-practices/#button">
           WAI-ARIA Button Pattern.

package/lib/components/TextLinkButton/TextLinkButton.tsx

@@ -27,6 +27,7 @@ export interface TextLinkButtonProps
   'aria-controls'?: NativeSpanProps['aria-controls'];
   'aria-expanded'?: NativeSpanProps['aria-expanded'];
   'aria-describedby'?: NativeSpanProps['aria-describedby'];
+  tabIndex?: NativeSpanProps['tabIndex'];
 }
 
 const noop = () => {};
@@ -40,6 +41,7 @@ export const TextLinkButton = ({
   'aria-controls': ariaControls,
   'aria-expanded': ariaExpanded,
   'aria-describedby': ariaDescribedBy,
+  tabIndex,
 }: TextLinkButtonProps) => {
   const buttonRef = useRef<HTMLSpanElement>(null);
 
@@ -59,7 +61,7 @@ export const TextLinkButton = ({
         <Box
           ref={buttonRef}
           role="button"
-          tabIndex={0}
+          tabIndex={tabIndex ?? 0}
           component="span"
           onClick={onClick}
           onKeyDown={handleKeyboard}

package/lib/components/Textarea/Textarea.docs.tsx

@@ -141,13 +141,13 @@ const docs: ComponentDocs = {
         </Text>
       ),
       background: 'card',
-      Example: ({ id, getState, setState }) =>
+      Example: ({ id, setState }) =>
         source(
           <Textarea
             label="Label"
             id={id}
             onChange={setState('textarea')}
-            value={getState('textarea')}
+            value="Text in disabled field"
             disabled={true}
           />,
         ),