braid-design-system 30.4.3 → 30.7.0

package/lib/components/Textarea/Textarea.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from 'react';
 import { ComponentScreenshot } from '../../../site/src/types';
-import { Textarea, TextLink } from '../';
+import { Stack, Textarea, TextLink } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -13,24 +13,19 @@ export const screenshots: ComponentScreenshot = {
       label: 'Textarea',
       Container,
       Example: ({ id, handler }) => (
-        <Textarea
-          id={id}
-          value="Senior Developer"
-          onChange={handler}
-          label="Job Title"
-        />
+        <Textarea id={id} value="Text value" onChange={handler} label="Label" />
       ),
     },
     {
-      label: 'Textarea with message',
+      label: 'Textarea with neutral message',
       Container,
       Example: ({ id, handler }) => (
         <Textarea
           id={id}
           value=""
           onChange={handler}
-          label="Job Title"
-          message="e.g. Senior Developer"
+          label="Label"
+          message="Neutral message"
         />
       ),
     },
@@ -42,8 +37,8 @@ export const screenshots: ComponentScreenshot = {
           id={id}
           value=""
           onChange={handler}
-          label="Title"
-          secondaryLabel="Optional"
+          label="Label"
+          secondaryLabel="Secondary"
         />
       ),
     },
@@ -55,8 +50,8 @@ export const screenshots: ComponentScreenshot = {
           id={id}
           value=""
           onChange={handler}
-          label="Title"
-          secondaryLabel="Optional"
+          label="Label"
+          secondaryLabel="Secondary"
           tertiaryLabel={<TextLink href="#">Help?</TextLink>}
         />
       ),
@@ -65,7 +60,7 @@ export const screenshots: ComponentScreenshot = {
       label: 'Textarea with no visual label',
       Container,
       Example: ({ id, handler }) => (
-        <Textarea id={id} value="" onChange={handler} aria-label="Title" />
+        <Textarea id={id} value="" onChange={handler} aria-label="Label" />
       ),
     },
     {
@@ -74,10 +69,10 @@ export const screenshots: ComponentScreenshot = {
       Example: ({ id, handler }) => (
         <Textarea
           id={id}
-          value="No"
+          value=""
           onChange={handler}
-          label="Do you like Braid?"
-          message="Answer is incorrect"
+          label="Label"
+          message="Critical message"
           tone="critical"
         />
       ),
@@ -88,14 +83,52 @@ export const screenshots: ComponentScreenshot = {
       Example: ({ id, handler }) => (
         <Textarea
           id={id}
-          value="Yes"
+          value=""
           onChange={handler}
-          label="Do you like Braid?"
-          message="Nice one!"
+          label="Label"
+          message="Positive message"
           tone="positive"
         />
       ),
     },
+    {
+      label: 'Textarea disabled',
+      Container,
+      Example: ({ id, handler }) => (
+        <Stack space="gutter">
+          <Textarea
+            label="With no value or placeholder"
+            id={`${id}_1`}
+            value=""
+            disabled={true}
+            onChange={handler}
+          />
+          <Textarea
+            label="With value and no placeholder"
+            id={`${id}_2`}
+            value="Text value"
+            disabled={true}
+            onChange={handler}
+          />
+          <Textarea
+            label="With no value and a placeholder"
+            id={`${id}_3`}
+            value=""
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+          />
+          <Textarea
+            label="With value and a placeholder"
+            id={`${id}_4`}
+            value="Text value"
+            disabled={true}
+            placeholder="Placeholder text"
+            onChange={handler}
+          />
+        </Stack>
+      ),
+    },
     {
       label: 'Textarea grow field with typing, limited to 6 lines',
       Container,
@@ -107,7 +140,7 @@ export const screenshots: ComponentScreenshot = {
             id={id}
             value={value}
             onChange={(e) => setValue(e.currentTarget.value)}
-            label="Do you like Braid?"
+            label="Label"
             lineLimit={6}
           />
         );
@@ -124,7 +157,7 @@ export const screenshots: ComponentScreenshot = {
             id={id}
             value={value}
             onChange={(e) => setValue(e.currentTarget.value)}
-            label="Do you like Braid?"
+            label="Label"
             characterLimit={50}
           />
         );
@@ -143,7 +176,7 @@ export const screenshots: ComponentScreenshot = {
             id={id}
             value={value}
             onChange={(e) => setValue(e.currentTarget.value)}
-            label="Do you like Braid?"
+            label="Label"
             characterLimit={50}
           />
         );
@@ -162,7 +195,7 @@ export const screenshots: ComponentScreenshot = {
             id={id}
             value={value}
             onChange={(e) => setValue(e.currentTarget.value)}
-            label="Do you like Braid?"
+            label="Label"
             characterLimit={9}
           />
         );
@@ -181,7 +214,7 @@ export const screenshots: ComponentScreenshot = {
             id={id}
             value={value}
             onChange={(e) => setValue(e.currentTarget.value)}
-            label="Do you like Braid?"
+            label="Label"
             description="Characters 9-22 are invalid"
             highlightRanges={[{ start: 9, end: 22 }]}
           />
@@ -201,7 +234,7 @@ export const screenshots: ComponentScreenshot = {
             id={id}
             value={value}
             onChange={(e) => setValue(e.currentTarget.value)}
-            label="Do you like Braid?"
+            label="Label"
             description="Characters 9-22 are invalid"
             characterLimit={50}
             highlightRanges={[{ start: 9, end: 22 }]}
@@ -218,7 +251,7 @@ export const screenshots: ComponentScreenshot = {
 
         return (
           <Textarea
-            label="Do you like Braid?"
+            label="Label"
             id={id}
             onChange={(e) => setValue(e.currentTarget.value)}
             value={value}

package/lib/components/Textarea/Textarea.tsx

@@ -176,7 +176,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                       updateScroll(event.currentTarget.scrollTop)
                   : undefined
               }
-              placeholder={placeholder}
+              placeholder={!restProps.disabled ? placeholder : undefined}
               className={[styles.field, className]}
               {...fieldProps}
               ref={ref}

package/lib/components/Toggle/Toggle.tsx

@@ -1,4 +1,9 @@
-import React, { AllHTMLAttributes, ChangeEvent, ReactNode } from 'react';
+import React, {
+  AllHTMLAttributes,
+  forwardRef,
+  ChangeEvent,
+  ReactNode,
+} from 'react';
 import { Box } from '../Box/Box';
 import { FieldOverlay } from '../private/FieldOverlay/FieldOverlay';
 import { Text } from '../Text/Text';
@@ -30,111 +35,109 @@ const handleChange =
     }
   };
 
-export const Toggle = ({
-  id,
-  on,
-  onChange,
-  label,
-  align = 'left',
-  size = 'standard',
-  data,
-}: ToggleProps) => {
-  const showBorder = useBackgroundLightness() === 'light';
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+  (
+    { id, on, onChange, label, align = 'left', size = 'standard', data },
+    forwardedRef,
+  ) => {
+    const showBorder = useBackgroundLightness() === 'light';
 
-  return (
-    <Box
-      position="relative"
-      zIndex={0}
-      display="flex"
-      flexDirection={align === 'left' ? undefined : 'rowReverse'}
-      className={styles.root}
-      {...(data ? buildDataAttributes(data) : undefined)}
-    >
-      <Box
-        component="input"
-        type="checkbox"
-        id={id}
-        checked={on}
-        onChange={handleChange(onChange)}
-        position="absolute"
-        zIndex={1}
-        cursor="pointer"
-        opacity={0}
-        className={[
-          styles.realField,
-          styles.realFieldPosition[size],
-          styles.fieldSize[size],
-        ]}
-      />
+    return (
       <Box
         position="relative"
+        zIndex={0}
         display="flex"
-        alignItems="center"
-        flexShrink={0}
-        className={[
-          styles.slideContainer,
-          styles.slideContainerSize[size],
-          styles.fieldSize[size],
-        ]}
+        flexDirection={align === 'left' ? undefined : 'rowReverse'}
+        className={styles.root}
+        {...(data ? buildDataAttributes(data) : undefined)}
       >
         <Box
+          component="input"
+          type="checkbox"
+          id={id}
+          checked={on}
+          onChange={handleChange(onChange)}
           position="absolute"
-          width="full"
-          overflow="hidden"
-          borderRadius="full"
-          className={[styles.slideTrack[size], styles.slideTrackBackground]}
+          zIndex={1}
+          cursor="pointer"
+          opacity={0}
+          className={[
+            styles.realField,
+            styles.realFieldPosition[size],
+            styles.fieldSize[size],
+          ]}
+          ref={forwardedRef}
+        />
+        <Box
+          position="relative"
+          display="flex"
+          alignItems="center"
+          flexShrink={0}
+          className={[
+            styles.slideContainer,
+            styles.slideContainerSize[size],
+            styles.fieldSize[size],
+          ]}
         >
           <Box
             position="absolute"
             width="full"
-            height="full"
-            background="formAccent"
+            overflow="hidden"
+            borderRadius="full"
+            className={[styles.slideTrack[size], styles.slideTrackBackground]}
+          >
+            <Box
+              position="absolute"
+              width="full"
+              height="full"
+              background="formAccent"
+              transition="fast"
+              className={styles.slideTrackSelected}
+            />
+          </Box>
+          <Box
+            position="absolute"
+            background="input"
+            boxShadow={showBorder ? 'borderField' : undefined}
             transition="fast"
-            className={styles.slideTrackSelected}
-          />
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            borderRadius="full"
+            className={styles.slider[size]}
+          >
+            <FieldOverlay className={styles.icon}>
+              <IconTick tone="formAccent" size="fill" />
+            </FieldOverlay>
+            <FieldOverlay
+              variant="focus"
+              borderRadius="full"
+              className={styles.focusOverlay}
+            />
+            <FieldOverlay
+              variant="hover"
+              borderRadius="full"
+              className={styles.hoverOverlay}
+            />
+          </Box>
         </Box>
         <Box
-          position="absolute"
-          background="input"
-          boxShadow={showBorder ? 'borderField' : undefined}
-          transition="fast"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          borderRadius="full"
-          className={styles.slider[size]}
+          component="label"
+          htmlFor={id}
+          paddingLeft={align === 'left' ? 'xsmall' : undefined}
+          paddingRight={
+            align === 'right' || align === 'justify' ? 'xsmall' : undefined
+          }
+          flexGrow={align === 'justify' ? 1 : undefined}
+          userSelect="none"
+          cursor="pointer"
+          className={[styles.label[size], virtualTouchable()]}
         >
-          <FieldOverlay className={styles.icon}>
-            <IconTick tone="formAccent" size="fill" />
-          </FieldOverlay>
-          <FieldOverlay
-            variant="focus"
-            borderRadius="full"
-            className={styles.focusOverlay}
-          />
-          <FieldOverlay
-            variant="hover"
-            borderRadius="full"
-            className={styles.hoverOverlay}
-          />
+          <Text baseline={false} weight={on ? 'strong' : undefined} size={size}>
+            {label}
+          </Text>
         </Box>
       </Box>
-      <Box
-        component="label"
-        htmlFor={id}
-        paddingLeft={align === 'left' ? 'xsmall' : undefined}
-        paddingRight={
-          align === 'right' || align === 'justify' ? 'xsmall' : undefined
-        }
-        flexGrow={align === 'justify' ? 1 : undefined}
-        userSelect="none"
-        cursor="pointer"
-        className={[styles.label[size], virtualTouchable()]}
-      >
-        <Text baseline={false} weight={on ? 'strong' : undefined} size={size}>
-          {label}
-        </Text>
-      </Box>
-    </Box>
-  );
-};
+    );
+  },
+);

package/lib/components/private/Field/ClearField.tsx

@@ -25,6 +25,7 @@ export const ClearField = ({ hide = false, onClear, inputRef }: Props) => {
 
   return (
     <Box
+      component="span"
       height="touchable"
       width="touchable"
       display="flex"

package/lib/components/private/Field/Field.tsx

@@ -80,6 +80,7 @@ interface FieldRenderProps extends Pick<FieldBaseProps, PassthroughProps> {
 type InternalFieldProps = FieldBaseProps &
   FieldLabelVariant & {
     secondaryIcon?: ReactNode;
+    alwaysShowSecondaryIcon?: boolean;
     children(
       overlays: ReactNode,
       props: FieldRenderProps,
@@ -104,6 +105,7 @@ export const Field = ({
   'aria-describedby': ariaDescribedBy,
   data,
   secondaryIcon,
+  alwaysShowSecondaryIcon = false,
   autoFocus,
   icon,
   prefix,
@@ -126,6 +128,8 @@ export const Field = ({
 
   const hasValue = typeof value === 'string' ? value.length > 0 : value != null;
   const hasVisualLabel = 'label' in restProps;
+  const showSecondaryIcon =
+    alwaysShowSecondaryIcon || (secondaryIcon && hasValue);
 
   const overlays = (
     <Fragment>
@@ -151,6 +155,7 @@ export const Field = ({
           id={labelId}
           htmlFor={id}
           label={'label' in restProps ? restProps.label : undefined}
+          disabled={disabled}
           secondaryLabel={
             'secondaryLabel' in restProps ? restProps.secondaryLabel : undefined
           }
@@ -169,7 +174,7 @@ export const Field = ({
         background={fieldBackground}
         borderRadius="standard"
         display="flex"
-        className={secondaryIcon ? styles.secondaryIconSpace : undefined}
+        className={showSecondaryIcon ? styles.secondaryIconSpace : undefined}
       >
         {children(
           overlays,
@@ -179,7 +184,7 @@ export const Field = ({
             background: fieldBackground,
             width: 'full',
             paddingLeft: fieldPadding,
-            paddingRight: secondaryIcon ? undefined : fieldPadding,
+            paddingRight: showSecondaryIcon ? undefined : fieldPadding,
             borderRadius: 'standard',
             outline: 'none',
             'aria-describedby': mergeIds(
@@ -203,7 +208,7 @@ export const Field = ({
               styles.placeholderColor,
               useText({
                 backgroundContext: fieldBackground,
-                tone: hasValue ? 'neutral' : 'secondary',
+                tone: hasValue && !disabled ? 'neutral' : 'secondary',
                 size: 'standard',
                 baseline: false,
               }),
@@ -230,6 +235,7 @@ export const Field = ({
           ) : null,
           secondaryIcon ? (
             <Box
+              component="span"
               position="absolute"
               width="touchable"
               height="touchable"

package/lib/components/private/FieldGroup/FieldGroup.tsx

@@ -103,6 +103,7 @@ export const FieldGroup = ({
               label={restProps.label}
               secondaryLabel={secondaryLabel}
               tertiaryLabel={tertiaryLabel}
+              disabled={disabled}
               description={description}
               descriptionId={descriptionId}
             />

package/lib/css/reset/reset.css.ts

@@ -59,6 +59,9 @@ const mark = style({
 const select = style([
   field,
   style({
+    ':disabled': {
+      opacity: 1,
+    },
     selectors: {
       '&::-ms-expand': {
         display: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "30.4.3",
+  "version": "30.7.0",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "sideEffects": [
@@ -54,7 +54,6 @@
     "@types/classnames": "^2.2.11",
     "@types/dedent": "^0.7.0",
     "@types/lodash": "^4.14.168",
-    "@types/react": "^16.8.8",
     "@types/uuid": "^8.3.0",
     "@vanilla-extract/css": "^1.6.1",
     "@vanilla-extract/css-utils": "^0.1.1",
@@ -97,7 +96,8 @@
     "@types/babel-plugin-macros": "^2.8.4",
     "@types/fs-extra": "^9.0.6",
     "@types/prettier": "^2.1.6",
-    "@types/react-dom": "^16.8.2",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/sanitize-html": "^1.27.1",
     "@types/webpack-env": "^1.16.0",