@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

package/dist/mdx/react/_examples/mdx/examples/Density.tsx

@@ -0,0 +1,370 @@
+import React from 'react';
+import {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Select} from '@workday/canvas-kit-react/select';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {calc, createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formStyles = createStyles({
+  margin: `${system.space.x3} ${system.space.zero}`,
+  maxWidth: px2rem(600),
+  minWidth: system.space.zero,
+});
+
+const formFieldGroupListStyles = createStyles({
+  display: 'inline-flex',
+  flexDirection: 'row',
+  padding: system.space.zero,
+  flexWrap: 'wrap',
+});
+
+const sideBySideInputs = createStencil({
+  base: {
+    display: 'inline-flex',
+    gap: system.space.x2,
+    justifyContent: 'space-between',
+  },
+  modifiers: {
+    labelOrientation: {
+      horizontalStart: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      horizontalEnd: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      vertical: {
+        display: 'inline-flex',
+      },
+    },
+    density: {
+      high: {},
+      medium: {},
+      low: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {labelOrientation: 'horizontalStart', density: 'high'},
+      styles: {
+        gap: system.space.x4,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalStart', density: 'medium'},
+      styles: {
+        gap: system.space.x6,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalStart', density: 'low'},
+      styles: {
+        gap: system.space.x8,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalEnd', density: 'high'},
+      styles: {
+        gap: system.space.x4,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'},
+      styles: {
+        gap: system.space.x6,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalEnd', density: 'low'},
+      styles: {
+        gap: system.space.x8,
+      },
+    },
+  ],
+});
+
+const zipCodeInput = createStyles({
+  minWidth: px2rem(90),
+});
+
+const zipCodeContainerStyles = createStyles({
+  minWidth: system.space.zero,
+});
+
+const formFieldStencil = createStencil({
+  base: {},
+  modifiers: {
+    density: {
+      high: {
+        gap: px2rem(2),
+      },
+      medium: {
+        gap: system.space.x1,
+      },
+      low: {
+        gap: system.space.x2,
+      },
+    },
+  },
+});
+
+const creditCardInputStyles = createStyles({
+  width: calc.add(system.space.x10, system.space.x10),
+  minWidth: calc.add(system.space.x10, system.space.x10),
+  textAlign: 'center',
+});
+
+const selectStencil = createStencil({
+  base: {},
+  modifiers: {
+    density: {
+      high: {
+        height: system.space.x8,
+        padding: `${system.space.x1} ${system.space.x2}`,
+        '& + div': {
+          height: system.space.x8,
+        },
+      },
+      medium: {
+        height: system.space.x10,
+        padding: `${system.space.x2}`,
+      },
+      low: {
+        height: calc.add(system.space.x10, system.space.x2),
+        padding: `${system.space.x3} ${system.space.x2}`,
+        '& + div': {
+          height: calc.add(system.space.x10, system.space.x2),
+        },
+      },
+    },
+  },
+});
+
+const inputStencil = createStencil({
+  base: {
+    minWidth: px2rem(200),
+  },
+  modifiers: {
+    density: {
+      high: {
+        height: system.space.x8,
+        padding: `${system.space.x1} ${system.space.x2}`,
+      },
+      medium: {
+        height: system.space.x10,
+        padding: `${system.space.x2}`,
+      },
+
+      low: {
+        height: calc.add(system.space.x10, system.space.x2),
+        padding: `${system.space.x3} ${system.space.x2}`,
+      },
+    },
+  },
+});
+
+const flexContainerStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+  },
+  modifiers: {
+    density: {
+      high: {
+        gap: system.space.x4,
+      },
+      medium: {
+        gap: system.space.x6,
+      },
+      low: {
+        gap: system.space.x8,
+      },
+    },
+  },
+});
+
+const containerAlignmentStencil = createStencil({
+  base: {
+    display: 'flex',
+  },
+  modifiers: {
+    alignment: {
+      left: {
+        justifyContent: 'flex-start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+    },
+  },
+});
+
+const optionStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x3,
+  flexDirection: 'column',
+});
+
+const optionItemStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x3,
+  maxWidth: 'fit-content',
+});
+
+// high = 32px height on inputs, space between inputs is 16px
+// medium 40px height on inputs, space between inputs is 24px
+// low = 48px height on inputs, space between inputs is 32px
+
+export default () => {
+  const [density, setDensity] = React.useState<'high' | 'medium' | 'low'>('medium');
+  const [containerAlignment, setContainerAlignment] = React.useState<'left' | 'center'>('left');
+  const [labelOrientation, setLabelOrientation] = React.useState<
+    'vertical' | 'horizontalStart' | 'horizontalEnd'
+  >('vertical');
+
+  const handleDensity = data => {
+    setDensity(data.id);
+  };
+
+  const handleContainerAlignment = data => {
+    setContainerAlignment(data.id);
+  };
+
+  const handleLabelOrientation = data => {
+    setLabelOrientation(data.id);
+  };
+
+  return (
+    <div>
+      <Heading size="small">Choose Your Density and Alignment</Heading>
+      <div className={optionStyles}>
+        <div className={optionItemStyles}>
+          <Text>Density</Text>
+          <SegmentedControl onSelect={data => handleDensity(data)} size="small">
+            <SegmentedControl.List aria-label="choose a density">
+              <SegmentedControl.Item data-id="high">High</SegmentedControl.Item>
+              <SegmentedControl.Item data-id="medium">Medium</SegmentedControl.Item>
+              <SegmentedControl.Item data-id="low">Low</SegmentedControl.Item>
+            </SegmentedControl.List>
+          </SegmentedControl>
+        </div>
+        <div className={optionItemStyles}>
+          <Text>Label Orientation</Text>
+          <SegmentedControl onSelect={data => handleLabelOrientation(data)} size="small">
+            <SegmentedControl.List aria-label="choose a label orientation">
+              <SegmentedControl.Item data-id="vertical">Vertical</SegmentedControl.Item>
+              <SegmentedControl.Item data-id="horizontalStart">
+                Horizontal Start
+              </SegmentedControl.Item>
+              <SegmentedControl.Item data-id="horizontalEnd">Horizontal End</SegmentedControl.Item>
+            </SegmentedControl.List>
+          </SegmentedControl>
+        </div>
+        <div className={optionItemStyles}>
+          <Text>Container Alignment</Text>
+          <SegmentedControl onSelect={data => handleContainerAlignment(data)} size="small">
+            <SegmentedControl.List aria-label="choose a density">
+              <SegmentedControl.Item data-id="left">Left</SegmentedControl.Item>
+              <SegmentedControl.Item data-id="center">Center</SegmentedControl.Item>
+            </SegmentedControl.List>
+          </SegmentedControl>
+        </div>
+      </div>
+
+      <div {...containerAlignmentStencil({alignment: containerAlignment})}>
+        <form action="#" className={formStyles}>
+          <div {...flexContainerStencil({density})}>
+            <FormField
+              orientation={labelOrientation}
+              grow
+              cs={formFieldStencil({density})}
+              id="foo"
+            >
+              <FormField.Label>Choose Country</FormField.Label>
+              <Select items={['Dominican Republic', 'Spain', 'United States']}>
+                <FormField.Input
+                  cs={selectStencil({density})}
+                  placeholder="Choose a country"
+                  as={Select.Input}
+                />
+                <Select.Popper>
+                  <Select.Card>
+                    <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+                  </Select.Card>
+                </Select.Popper>
+              </Select>
+            </FormField>
+            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField.Label>Full Name</FormField.Label>
+              <FormField.Input as={TextInput} cs={inputStencil({density})} />
+            </FormField>
+            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField.Label>Phone Number</FormField.Label>
+              <FormField.Input as={TextInput} cs={inputStencil({density})} />
+            </FormField>
+            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField.Label>Street Address</FormField.Label>
+              <FormField.Input as={TextInput} cs={inputStencil({density})} />
+            </FormField>
+            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField.Label>City</FormField.Label>
+              <FormField.Input as={TextInput} cs={inputStencil({density})} />
+            </FormField>
+            <div {...sideBySideInputs({labelOrientation: labelOrientation, density})}>
+              <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+                <FormField.Label>State</FormField.Label>
+                <FormField.Input as={TextInput} cs={inputStencil({density})} />
+              </FormField>
+              <FormField
+                grow
+                orientation={labelOrientation}
+                cs={[formFieldStencil({density}), zipCodeContainerStyles]}
+              >
+                <FormField.Label>Zip Code</FormField.Label>
+                <FormField.Input cs={[inputStencil({density}), zipCodeInput]} as={TextInput} />
+              </FormField>
+            </div>
+            <FormField orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField.Label>Enable Fast Shipping</FormField.Label>
+              <FormField.Field>
+                <FormField.Input as={Switch} />
+              </FormField.Field>
+            </FormField>
+            <FormFieldGroup cs={formFieldStencil({density})} orientation={labelOrientation}>
+              <FormFieldGroup.Label>Credit Card</FormFieldGroup.Label>
+
+              <FormFieldGroup.List cs={formFieldGroupListStyles}>
+                <FormFieldGroup.Input
+                  as={TextInput}
+                  placeholder="XXXX"
+                  cs={[inputStencil({density}), creditCardInputStyles]}
+                />
+                <FormFieldGroup.Input
+                  as={TextInput}
+                  placeholder="XXXX"
+                  cs={[inputStencil({density}), creditCardInputStyles]}
+                />
+                <FormFieldGroup.Input
+                  as={TextInput}
+                  placeholder="XXXX"
+                  cs={[inputStencil({density}), creditCardInputStyles]}
+                />
+                <FormFieldGroup.Input
+                  cs={[inputStencil({density}), creditCardInputStyles]}
+                  placeholder="XXXX"
+                  as={TextInput}
+                />
+              </FormFieldGroup.List>
+            </FormFieldGroup>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/react/_examples/{examples → mdx/examples}/SidePanelWithNavigation.tsx

@@ -49,7 +49,6 @@ const gettingStarted = [
 ];
 
 export default () => {
-
   return (
     <Flex height={800} position="relative" backgroundColor="frenchVanilla100">
       <StyledPanel touched={true} variant="alternate">

package/dist/mdx/react/_examples/{examples → mdx/examples}/Table/WithExpandableRows.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {Table} from '@workday/canvas-kit-react/table';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
+import {generateUniqueId} from '@workday/canvas-kit-react/common';
 import {Heading, Subtext} from '@workday/canvas-kit-react/text';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -189,31 +189,28 @@ function ExpandableRow({data}: RowProps) {
   );
 }
 
-export default createComponent()({
-  displayName: 'ExpandableRows',
-  Component: () => {
-    return (
-      <>
-        <Heading as="h3" id={headingID} size="small">
-          Showroom Inventory
-        </Heading>
-        <Table aria-labelledby={headingID}>
-          <Table.Head>
-            <Table.Row gridTemplateColumns="4rem repeat(4, 1fr)">
-              <Table.Cell></Table.Cell>
-              <Table.Header scope="col">Make</Table.Header>
-              <Table.Header scope="col">Model</Table.Header>
-              <Table.Header scope="col">Year</Table.Header>
-              <Table.Header scope="col">Price</Table.Header>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            {autoData.map(item => (
-              <ExpandableRow key={item.id} data={item} />
-            ))}
-          </Table.Body>
-        </Table>
-      </>
-    );
-  },
-});
+export default () => {
+  return (
+    <>
+      <Heading as="h3" id={headingID} size="small">
+        Showroom Inventory
+      </Heading>
+      <Table aria-labelledby={headingID}>
+        <Table.Head>
+          <Table.Row gridTemplateColumns="4rem repeat(4, 1fr)">
+            <Table.Cell></Table.Cell>
+            <Table.Header scope="col">Make</Table.Header>
+            <Table.Header scope="col">Model</Table.Header>
+            <Table.Header scope="col">Year</Table.Header>
+            <Table.Header scope="col">Price</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {autoData.map(item => (
+            <ExpandableRow key={item.id} data={item} />
+          ))}
+        </Table.Body>
+      </Table>
+    </>
+  );
+};

package/dist/mdx/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const fruits = [
+  'Apples',
+  'Oranges',
+  'Bananas',
+  'Lemons',
+  'Limes',
+  'Strawberries',
+  'Raspberries',
+  'Blackberries',
+];
+
+const liveRegionStyle = createStyles({
+  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
+  backgroundColor: base.cantaloupe100,
+  padding: system.space.x2,
+});
+
+const listStyles = {paddingLeft: '0px'};
+
+const listItemStyles = createStyles({
+  listStyle: 'none',
+  paddingLeft: system.space.zero,
+});
+
+let filteredFruits = fruits;
+
+export default () => {
+  const [filter, setFilter] = useState('');
+  function handleFilter(e) {
+    filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);
+    setFilter(e.target.value);
+  }
+
+  return (
+    <>
+      <Flex gap="1rem">
+        <Heading size="small">Fruits</Heading>
+        <AriaLiveRegion>
+          <BodyText size="small" cs={liveRegionStyle}>
+            {`Showing ${filteredFruits.length} of ${fruits.length}`}
+          </BodyText>
+        </AriaLiveRegion>
+      </Flex>
+      <TextInput orientation="vertical">
+        <TextInput.Label>Filter Items:</TextInput.Label>
+        <TextInput.Field value={filter} onChange={handleFilter} />
+      </TextInput>
+      <ul style={listStyles}>
+        {filteredFruits.map(i => (
+          <BodyText size="small" as="li" cs={listItemStyles} key={i}>
+            {i}
+          </BodyText>
+        ))}
+      </ul>
+    </>
+  );
+};

package/dist/mdx/react/_examples/mdx/examples/common/HiddenLiveRegion.tsx

@@ -0,0 +1,30 @@
+import React, {useState, useRef} from 'react';
+import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const [message, setMessage] = useState('This is an ARIA Live Region!');
+  const inputRef = useRef();
+  function handleSendMessage() {
+    setMessage(inputRef.current.value);
+    inputRef.current.value = '';
+  }
+
+  return (
+    <>
+      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
+        <TextInput orientation="vertical">
+          <TextInput.Label>Type your message:</TextInput.Label>
+          <TextInput.Field ref={inputRef} />
+        </TextInput>
+        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
+      </Flex>
+      <AriaLiveRegion>
+        <AccessibleHide>{message}</AccessibleHide>
+      </AriaLiveRegion>
+    </>
+  );
+};

package/dist/mdx/react/_examples/mdx/examples/common/IconButtonsWithLiveBadges.tsx

@@ -0,0 +1,98 @@
+import React, {useState} from 'react';
+import {AccessibleHide, AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
+import {notificationsIcon, inboxIcon, assistantIcon} from '@workday/canvas-system-icons-web';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+
+const MyTasksLiveBadge = ({cnt}) => {
+  // use tooltip to assign name,
+  // use AriaLiveRegion inside button,
+  // assign name to live region referencing the button,
+  // use BadgeCount inside live region,
+  // use AccessibleHide to create invisible word "new" after badge
+  // use aria-describedby on button, referencing live region container to set description
+  // Safari + VO => not working at all
+  // JAWS 2024 + Chrome / Edge => works as expected :)
+  // NVDA + Chrome / Edge => works as expected :)
+  // Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
+  const badgeID = useUniqueId();
+  const myTasksID = useUniqueId();
+
+  return (
+    <Tooltip title="My Tasks">
+      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
+        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
+          <CountBadge count={cnt} />
+          <AccessibleHide>New</AccessibleHide>
+        </AriaLiveRegion>
+      </TertiaryButton>
+    </Tooltip>
+  );
+};
+
+// use AriaLiveRegion around the button,
+// use Tooltip to assign the name of the button,
+// make sure Tooltip title string includes count value
+// Chrome + VO => Announces name "notifications X new" and innerText 'X'
+// Safari + VO => Works as expected :)
+// JAWS 2024 => Announces full button name twice (previous state, then new state)
+// JAWS 2024 + Firefox => Works as expected :)
+// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
+const NotificationsLiveBadge = ({cnt}) => (
+  <AriaLiveRegion>
+    <Tooltip title={`Notifications ${cnt} new`}>
+      <TertiaryButton icon={notificationsIcon}>
+        <CountBadge count={cnt} />
+      </TertiaryButton>
+    </Tooltip>
+  </AriaLiveRegion>
+);
+
+const AssistantLiveBadge = ({cnt}) => {
+  // use AriaLiveRegion around the button
+  // use muted type Tooltip (avoid using aria-label to name button)
+  // use AccessibleHide inside of button to compose name
+  // Chrome + VO => announces twice
+  // Safari + VO => works as expected :)
+  const lbl = 'Workday Assistant';
+
+  return (
+    <AriaLiveRegion>
+      <Tooltip title={lbl} type="muted">
+        <TertiaryButton icon={assistantIcon}>
+          <AccessibleHide>{lbl}</AccessibleHide>
+          <CountBadge count={cnt} />
+          <AccessibleHide>New</AccessibleHide>
+        </TertiaryButton>
+      </Tooltip>
+    </AriaLiveRegion>
+  );
+};
+
+export default () => {
+  const [counter, setCounter] = useState(0);
+  const [notifications, setNotifications] = useState(0);
+  const [assistant, setAssistant] = useState(0);
+
+  const handleAddTask = () => setCounter(prev => prev + 1);
+  const handleAddNotification = () => setNotifications(prev => prev + 1);
+  const handleAssistant = () => setAssistant(prev => prev + 1);
+
+  return (
+    <>
+      <Flex padding={space.s} gap={space.s} as="header">
+        <AssistantLiveBadge cnt={assistant} />
+        <NotificationsLiveBadge cnt={notifications} />
+        <MyTasksLiveBadge cnt={counter} />
+      </Flex>
+      <Flex padding={space.s} gap={space.s} as="main">
+        <SecondaryButton onClick={handleAssistant}>Add a Message</SecondaryButton>
+        <SecondaryButton onClick={handleAddNotification}>Add a Notification</SecondaryButton>
+        <SecondaryButton onClick={handleAddTask}>Add an item to My Tasks</SecondaryButton>
+      </Flex>
+    </>
+  );
+};

package/dist/mdx/react/_examples/mdx/examples/common/TextInputWithLiveError.tsx

@@ -0,0 +1,25 @@
+import React, {useState, useRef} from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  const errMsg = 'Error: First name is required.';
+  const [hasError, setHasError] = useState(false);
+  const inputRef = useRef();
+  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
+  const handleSubmit = () => hasError && changeFocus(inputRef.current);
+
+  return (
+    <>
+      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
+        <TextInput.Label>First Name:</TextInput.Label>
+        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
+        <TextInput.Hint height={'16px'}>
+          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
+        </TextInput.Hint>
+      </TextInput>
+      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
+    </>
+  );
+};