@workday/canvas-kit-docs 11.0.0-alpha.792-next.0 → 11.0.0-alpha.793-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/mdx/preview-react/form-field/examples/AllFields.tsx +10 -8
  2. package/dist/mdx/preview-react/form-field/examples/RefForwarding.tsx +9 -1
  3. package/dist/mdx/preview-react/form-field/examples/ThemedErrors.tsx +9 -1
  4. package/dist/mdx/preview-react/radio/examples/Basic.tsx +6 -1
  5. package/dist/mdx/preview-react/radio/examples/Custom.tsx +21 -4
  6. package/dist/mdx/preview-react/radio/examples/Inverse.tsx +16 -10
  7. package/dist/mdx/preview-react/status-indicator/examples/Emphasis.tsx +7 -1
  8. package/dist/mdx/preview-react/status-indicator/examples/Icon.tsx +7 -1
  9. package/dist/mdx/preview-react/status-indicator/examples/Overflow.tsx +7 -1
  10. package/dist/mdx/preview-react/status-indicator/examples/Variants.tsx +15 -3
  11. package/dist/mdx/react/button/button/examples/Delete.tsx +8 -1
  12. package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx +8 -1
  13. package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx +8 -1
  14. package/dist/mdx/react/button/button/examples/Primary.tsx +8 -1
  15. package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx +9 -1
  16. package/dist/mdx/react/button/button/examples/Secondary.tsx +8 -1
  17. package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx +9 -1
  18. package/dist/mdx/react/button/button/examples/Tertiary.tsx +8 -1
  19. package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx +9 -2
  20. package/dist/mdx/react/checkbox/examples/Indeterminate.tsx +8 -1
  21. package/dist/mdx/react/checkbox/examples/Inverse.tsx +9 -1
  22. package/dist/mdx/react/combobox/examples/Autocomplete.tsx +20 -4
  23. package/dist/mdx/react/icon/examples/AccentIconList.tsx +23 -10
  24. package/dist/mdx/react/icon/examples/AppletIconList.tsx +23 -10
  25. package/dist/mdx/react/icon/examples/IconList.tsx +24 -10
  26. package/dist/mdx/react/icon/examples/Overview.tsx +15 -2
  27. package/dist/mdx/react/loading-dots/examples/Accessible.tsx +12 -7
  28. package/dist/mdx/react/select/examples/Alert.tsx +6 -1
  29. package/dist/mdx/react/select/examples/Basic.tsx +6 -1
  30. package/dist/mdx/react/select/examples/Complex.tsx +6 -1
  31. package/dist/mdx/react/select/examples/Disabled.tsx +6 -1
  32. package/dist/mdx/react/select/examples/DisabledOption.tsx +6 -1
  33. package/dist/mdx/react/select/examples/Error.tsx +6 -1
  34. package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx +7 -1
  35. package/dist/mdx/react/select/examples/InitialSelectedItem.tsx +6 -1
  36. package/dist/mdx/react/select/examples/MenuHeight.tsx +6 -1
  37. package/dist/mdx/react/select/examples/Placeholder.tsx +6 -1
  38. package/dist/mdx/react/select/examples/Required.tsx +6 -1
  39. package/dist/mdx/react/select/examples/WithIcons.tsx +12 -2
  40. package/dist/mdx/react/table/examples/Basic.tsx +8 -2
  41. package/dist/mdx/react/table/examples/BasicWithHeading.tsx +14 -3
  42. package/dist/mdx/react/table/examples/FixedColumn.tsx +21 -17
  43. package/dist/mdx/react/table/examples/RightToLeft.tsx +8 -2
  44. package/package.json +6 -6
@@ -3,11 +3,31 @@ import * as CanvasAppletIcons from '@workday/canvas-applet-icons-web';
3
3
  import {Box, Flex} from '@workday/canvas-kit-react/layout';
4
4
  import {AppletIcon} from '@workday/canvas-kit-react/icon';
5
5
  import {TextInput} from '@workday/canvas-kit-react/text-input';
6
+ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
7
+ import {system} from '@workday/canvas-tokens-web';
6
8
 
7
9
  const ImportedIcons = Object.keys(CanvasAppletIcons);
8
10
 
9
11
  const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAppletIcons');
10
12
 
13
+ const styleOverrides = {
14
+ parentContainer: createStyles({
15
+ flexDirection: 'column',
16
+ alignItems: 'center',
17
+ gap: system.space.x6,
18
+ }),
19
+ iconGroupContainer: createStyles({
20
+ flexWrap: 'wrap',
21
+ }),
22
+ individualIconContainer: createStyles({
23
+ alignItems: 'center',
24
+ width: `max(${px2rem(320)},20%)`,
25
+ flexDirection: 'row',
26
+ gap: system.space.x3,
27
+ padding: system.space.x3,
28
+ }),
29
+ };
30
+
11
31
  export default () => {
12
32
  const [value, setValue] = React.useState('');
13
33
 
@@ -16,9 +36,9 @@ export default () => {
16
36
  };
17
37
 
18
38
  return (
19
- <Flex flexDirection="column" alignItems="center" gap="m">
39
+ <Flex cs={styleOverrides.parentContainer}>
20
40
  <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
21
- <Flex flexWrap="wrap">
41
+ <Flex cs={styleOverrides.iconGroupContainer}>
22
42
  {allIcons
23
43
  .filter(icon => {
24
44
  if (value === '') {
@@ -29,14 +49,7 @@ export default () => {
29
49
  })
30
50
  .map((singleIcon, index) => {
31
51
  return (
32
- <Flex
33
- alignItems="center"
34
- width={'max(320px,20%)'}
35
- flexDirection="row"
36
- gap="xs"
37
- padding="xs"
38
- key={index}
39
- >
52
+ <Flex cs={styleOverrides.individualIconContainer} key={index}>
40
53
  <Box>
41
54
  <AppletIcon icon={CanvasAppletIcons[singleIcon]} />
42
55
  </Box>
@@ -3,10 +3,31 @@ import * as CanvasIcons from '@workday/canvas-system-icons-web';
3
3
  import {Box, Flex} from '@workday/canvas-kit-react/layout';
4
4
  import {SystemIcon} from '@workday/canvas-kit-react/icon';
5
5
  import {TextInput} from '@workday/canvas-kit-react/text-input';
6
+ import {createStyles} from '@workday/canvas-kit-styling';
7
+ import {system} from '@workday/canvas-tokens-web';
6
8
 
7
9
  const ImportedIcons = Object.keys(CanvasIcons);
8
10
 
9
11
  const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasSystemIcons');
12
+
13
+ const styleOverrides = {
14
+ parentContainer: createStyles({
15
+ flexDirection: 'column',
16
+ alignItems: 'center',
17
+ gap: system.space.x6,
18
+ }),
19
+ firstChildContainer: createStyles({
20
+ flexWrap: 'wrap',
21
+ }),
22
+ secondChildContainer: createStyles({
23
+ alignItems: 'center',
24
+ width: `max(320px,20%)`,
25
+ flexDirection: 'row',
26
+ gap: system.space.x3,
27
+ padding: system.space.x3,
28
+ }),
29
+ };
30
+
10
31
  export default () => {
11
32
  const [value, setValue] = React.useState('');
12
33
 
@@ -15,9 +36,9 @@ export default () => {
15
36
  };
16
37
 
17
38
  return (
18
- <Flex flexDirection="column" alignItems="center" gap="m">
39
+ <Flex cs={styleOverrides.parentContainer}>
19
40
  <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
20
- <Flex flexWrap="wrap">
41
+ <Flex cs={styleOverrides.firstChildContainer}>
21
42
  {allIcons
22
43
  .filter(icon => {
23
44
  if (value === '') {
@@ -28,14 +49,7 @@ export default () => {
28
49
  })
29
50
  .map((singleIcon, index) => {
30
51
  return (
31
- <Flex
32
- alignItems="center"
33
- width={'max(320px,20%)'}
34
- flexDirection="row"
35
- gap="xs"
36
- padding="xs"
37
- key={index}
38
- >
52
+ <Flex cs={styleOverrides.secondChildContainer} key={index}>
39
53
  <Box>
40
54
  <SystemIcon icon={CanvasIcons[singleIcon]} />
41
55
  </Box>
@@ -8,6 +8,8 @@ import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
8
8
 
9
9
  import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
10
10
  import {activityStreamIcon} from '@workday/canvas-system-icons-web';
11
+ import {createStyles} from '@workday/canvas-kit-styling';
12
+ import {base, system} from '@workday/canvas-tokens-web';
11
13
 
12
14
  const graphicExample: CanvasGraphic = {
13
15
  name: 'badgeAchievement',
@@ -18,11 +20,22 @@ const graphicExample: CanvasGraphic = {
18
20
  tags: [],
19
21
  };
20
22
 
23
+ const styleOverrides = {
24
+ container: createStyles({
25
+ flexDirection: 'row',
26
+ alignItems: 'center',
27
+ gap: system.space.x4,
28
+ }),
29
+ systemIconStyles: createStyles({
30
+ background: base.berrySmoothie100,
31
+ }),
32
+ };
33
+
21
34
  export default () => (
22
- <Flex flexDirection="row" alignItems="center" gap="s">
35
+ <Flex cs={styleOverrides.container}>
23
36
  <AccentIcon icon={shieldIcon} />
24
37
  <AppletIcon icon={benefitsIcon} />
25
- <SystemIcon icon={activityStreamIcon} background="berrySmoothie100" />
38
+ <SystemIcon icon={activityStreamIcon} cs={styleOverrides.systemIconStyles} />
26
39
  <SystemIconCircle icon={activityStreamIcon} />
27
40
  <Graphic src={graphicExample} />
28
41
  </Flex>
@@ -3,13 +3,18 @@ import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
3
3
  import {base, system} from '@workday/canvas-tokens-web';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
5
  import {SecondaryButton} from '@workday/canvas-kit-react/button';
6
- import {createStyles, cssVar} from '@workday/canvas-kit-styling';
6
+ import {createStyles} from '@workday/canvas-kit-styling';
7
7
  import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
8
8
 
9
- const loadingStyles = createStyles({
10
- backgroundColor: base.licorice300,
11
- padding: system.space.x3,
12
- });
9
+ const styleOverrides = {
10
+ parentContainer: createStyles({
11
+ gap: system.space.x4,
12
+ }),
13
+ loadingStyles: createStyles({
14
+ backgroundColor: system.color.bg.muted.default,
15
+ padding: system.space.x3,
16
+ }),
17
+ };
13
18
 
14
19
  export default () => {
15
20
  const [loadingState, setLoadingState] = React.useState('idle');
@@ -31,11 +36,11 @@ export default () => {
31
36
  };
32
37
 
33
38
  return (
34
- <Flex gap={cssVar(system.space.x4)}>
39
+ <Flex cs={styleOverrides.parentContainer}>
35
40
  <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
36
41
  <AriaLiveRegion aria-label="Loading">
37
42
  {loadingState === 'loading' && (
38
- <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
43
+ <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
39
44
  )}
40
45
  {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
41
46
  </AriaLiveRegion>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -19,7 +24,7 @@ export default () => {
19
24
  setValue(event.target.value);
20
25
  };
21
26
  return (
22
- <Flex flexDirection="column">
27
+ <Flex cs={parentContainerStyles}>
23
28
  <Select items={options}>
24
29
  <FormField error="alert">
25
30
  <FormField.Label>Contact</FormField.Label>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -20,7 +25,7 @@ export default () => {
20
25
  };
21
26
 
22
27
  return (
23
- <Flex flexDirection="column">
28
+ <Flex cs={parentContainerStyles}>
24
29
  <Select items={options}>
25
30
  <FormField>
26
31
  <FormField.Label>Contact</FormField.Label>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  {serverId: 'email', label: 'E-mail'},
@@ -25,7 +30,7 @@ export default () => {
25
30
  };
26
31
 
27
32
  return (
28
- <Flex flexDirection="column">
33
+ <Flex cs={parentContainerStyles}>
29
34
  <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
30
35
  <FormField>
31
36
  <FormField.Label>Contact</FormField.Label>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -20,7 +25,7 @@ export default () => {
20
25
  };
21
26
 
22
27
  return (
23
- <Flex flexDirection="column">
28
+ <Flex cs={parentContainerStyles}>
24
29
  <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
25
30
  <FormField>
26
31
  <FormField.Label>Contact</FormField.Label>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -20,7 +25,7 @@ export default () => {
20
25
  };
21
26
 
22
27
  return (
23
- <Flex flexDirection="column">
28
+ <Flex cs={parentContainerStyles}>
24
29
  <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
25
30
  <FormField>
26
31
  <FormField.Label>Contact</FormField.Label>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -19,7 +24,7 @@ export default () => {
19
24
  setValue(event.target.value);
20
25
  };
21
26
  return (
22
- <Flex flexDirection="column">
27
+ <Flex cs={parentContainerStyles}>
23
28
  <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
24
29
  <FormField error="error">
25
30
  <FormField.Label>Contact</FormField.Label>
@@ -4,6 +4,12 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
5
  import {PrimaryButton} from '@workday/canvas-kit-react/button';
6
6
  import {useMount} from '@workday/canvas-kit-react/common';
7
+ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
8
+
9
+ const parentContainerStyles = createStyles({
10
+ flexDirection: 'column',
11
+ maxWidth: px2rem(300),
12
+ });
7
13
 
8
14
  const movieListItems = [
9
15
  {
@@ -68,7 +74,7 @@ export default () => {
68
74
  });
69
75
 
70
76
  return (
71
- <Flex flexDirection="column" maxWidth={300}>
77
+ <Flex cs={parentContainerStyles}>
72
78
  <Select model={model}>
73
79
  <FormField label="Choose a Film">
74
80
  <Select.Input
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  {
@@ -37,7 +42,7 @@ export default () => {
37
42
  };
38
43
 
39
44
  return (
40
- <Flex flexDirection="column">
45
+ <Flex cs={parentContainerStyles}>
41
46
  <Select
42
47
  items={options}
43
48
  initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Box} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
6
+
7
+ const selectCardStyles = createStyles({
8
+ maxHeight: px2rem(200),
9
+ });
5
10
 
6
11
  const cities = [
7
12
  'Atlanta (United States)',
@@ -43,7 +48,7 @@ export default () => {
43
48
  <Select items={cities}>
44
49
  <FormField.Input as={Select.Input} />
45
50
  <Select.Popper>
46
- <Select.Card maxHeight={200}>
51
+ <Select.Card cs={selectCardStyles}>
47
52
  <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
48
53
  </Select.Card>
49
54
  </Select.Popper>
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -20,7 +25,7 @@ export default () => {
20
25
  };
21
26
 
22
27
  return (
23
- <Flex flexDirection="column">
28
+ <Flex cs={parentContainerStyles}>
24
29
  <Select items={options}>
25
30
  <FormField label="Contact">
26
31
  <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
@@ -2,6 +2,11 @@ import React from 'react';
2
2
  import {FormField} from '@workday/canvas-kit-preview-react/form-field';
3
3
  import {Select} from '@workday/canvas-kit-react/select';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+
7
+ const parentContainerStyles = createStyles({
8
+ flexDirection: 'column',
9
+ });
5
10
 
6
11
  const options = [
7
12
  'E-mail',
@@ -20,7 +25,7 @@ export default () => {
20
25
  };
21
26
 
22
27
  return (
23
- <Flex flexDirection="column">
28
+ <Flex cs={parentContainerStyles}>
24
29
  <FormField isRequired>
25
30
  <Select items={options}>
26
31
  <FormField.Label>Contact</FormField.Label>
@@ -8,6 +8,16 @@ import {
8
8
  uploadCloudIcon,
9
9
  userIcon,
10
10
  } from '@workday/canvas-system-icons-web';
11
+ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
12
+
13
+ const styleOverrides = {
14
+ formfieldInputStyles: createStyles({
15
+ width: px2rem(300),
16
+ }),
17
+ selectCardStyles: createStyles({
18
+ maxHeight: px2rem(200),
19
+ }),
20
+ };
11
21
 
12
22
  const customOptions = [
13
23
  {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},
@@ -28,11 +38,11 @@ export default () => {
28
38
  <FormField.Label>Contact</FormField.Label>
29
39
  <FormField.Input
30
40
  as={Select.Input}
31
- width="300px"
41
+ cs={styleOverrides.formfieldInputStyles}
32
42
  inputStartIcon={selectedItem.value.icon}
33
43
  />
34
44
  <Select.Popper>
35
- <Select.Card maxHeight="200px">
45
+ <Select.Card cs={styleOverrides.selectCardStyles}>
36
46
  {model.state.items.length > 0 && (
37
47
  <Select.List>
38
48
  {item => (
@@ -1,6 +1,12 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {Table} from '@workday/canvas-kit-react/table';
4
+ import {createStyles} from '@workday/canvas-kit-styling';
5
+ import {system} from '@workday/canvas-tokens-web';
6
+
7
+ const tableHeaderStyles = createStyles({
8
+ backgroundColor: system.color.bg.alt.softer,
9
+ });
4
10
 
5
11
  export default () => {
6
12
  return (
@@ -8,10 +14,10 @@ export default () => {
8
14
  <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
9
15
  <Table.Head>
10
16
  <Table.Row>
11
- <Table.Header scope="col" backgroundColor="soap100">
17
+ <Table.Header scope="col" cs={tableHeaderStyles}>
12
18
  Drink
13
19
  </Table.Header>
14
- <Table.Header scope="col" backgroundColor="soap100">
20
+ <Table.Header scope="col" cs={tableHeaderStyles}>
15
21
  Size
16
22
  </Table.Header>
17
23
  </Table.Row>
@@ -3,22 +3,33 @@ import React from 'react';
3
3
  import {Table} from '@workday/canvas-kit-react/table';
4
4
  import {Heading} from '@workday/canvas-kit-react/text';
5
5
  import {useUniqueId} from '@workday/canvas-kit-react/common';
6
+ import {createStyles} from '@workday/canvas-kit-styling';
7
+ import {system} from '@workday/canvas-tokens-web';
8
+
9
+ const styleOverrides = {
10
+ parentContainerStyles: createStyles({
11
+ marginBottom: system.space.x4,
12
+ }),
13
+ tableHeaderStyles: createStyles({
14
+ backgroundColor: system.color.bg.alt.softer,
15
+ }),
16
+ };
6
17
 
7
18
  export default () => {
8
19
  const headingID = useUniqueId();
9
20
 
10
21
  return (
11
22
  <>
12
- <Heading as="h3" id={headingID} size="small" marginBottom="s">
23
+ <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
13
24
  Pizza Toppings
14
25
  </Heading>
15
26
  <Table aria-labelledby={headingID}>
16
27
  <Table.Head>
17
28
  <Table.Row>
18
- <Table.Header scope="col" backgroundColor="soap100">
29
+ <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
19
30
  Toppings
20
31
  </Table.Header>
21
- <Table.Header scope="col" backgroundColor="soap100">
32
+ <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
22
33
  Amount
23
34
  </Table.Header>
24
35
  </Table.Row>
@@ -2,8 +2,24 @@ import React from 'react';
2
2
 
3
3
  import {Table} from '@workday/canvas-kit-react/table';
4
4
  import {Heading} from '@workday/canvas-kit-react/text';
5
- import {colors} from '@workday/canvas-kit-react/tokens';
6
5
  import {useUniqueId} from '@workday/canvas-kit-react/common';
6
+ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
7
+ import {system} from '@workday/canvas-tokens-web';
8
+
9
+ const styleOverrides = {
10
+ parentContainerStyles: createStyles({
11
+ marginBottom: system.space.x4,
12
+ }),
13
+ tableStyles: createStyles({
14
+ width: px2rem(690),
15
+ }),
16
+ tableHeaderStyles: createStyles({
17
+ position: 'sticky',
18
+ left: system.space.zero,
19
+ backgroundColor: system.color.bg.alt.softer,
20
+ borderRight: `2px solid ${system.color.border.divider}`,
21
+ }),
22
+ };
7
23
 
8
24
  export default () => {
9
25
  const headingID = useUniqueId();
@@ -77,19 +93,13 @@ export default () => {
77
93
  ];
78
94
  return (
79
95
  <>
80
- <Heading as="h3" id={headingID} size="small" marginBottom="s">
96
+ <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
81
97
  Performance Car Specs
82
98
  </Heading>
83
- <Table width={690} aria-labelledby={headingID} tabIndex={0}>
99
+ <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>
84
100
  <Table.Head>
85
101
  <Table.Row>
86
- <Table.Header
87
- scope="col"
88
- position="sticky"
89
- left="0"
90
- backgroundColor="soap100"
91
- borderRight={`2px solid ${colors.soap400}`}
92
- >
102
+ <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
93
103
  Make
94
104
  </Table.Header>
95
105
  <Table.Header scope="col">Model</Table.Header>
@@ -106,13 +116,7 @@ export default () => {
106
116
  {exampleData.map(item => (
107
117
  <>
108
118
  <Table.Row>
109
- <Table.Header
110
- scope="row"
111
- position="sticky"
112
- left="0"
113
- backgroundColor="soap100"
114
- borderRight={`2px solid ${colors.soap400}`}
115
- >
119
+ <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
116
120
  {item.make}
117
121
  </Table.Header>
118
122
  <Table.Cell>{item.model}</Table.Cell>
@@ -2,6 +2,12 @@ import React from 'react';
2
2
 
3
3
  import {Table} from '@workday/canvas-kit-react/table';
4
4
  import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
5
+ import {createStyles} from '@workday/canvas-kit-styling';
6
+ import {base, system} from '@workday/canvas-tokens-web';
7
+
8
+ const tableHeaderStyles = createStyles({
9
+ backgroundColor: system.color.bg.alt.softer,
10
+ });
5
11
 
6
12
  export default () => {
7
13
  return (
@@ -10,10 +16,10 @@ export default () => {
10
16
  <Table.Caption>משקאות קפה וגדלים</Table.Caption>
11
17
  <Table.Head>
12
18
  <Table.Row>
13
- <Table.Header scope="col" backgroundColor="soap100">
19
+ <Table.Header scope="col" cs={tableHeaderStyles}>
14
20
  מַשׁקֶה
15
21
  </Table.Header>
16
- <Table.Header scope="col" backgroundColor="soap100">
22
+ <Table.Header scope="col" cs={tableHeaderStyles}>
17
23
  גודל
18
24
  </Table.Header>
19
25
  </Table.Row>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "11.0.0-alpha.792-next.0",
3
+ "version": "11.0.0-alpha.793-next.0",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -44,10 +44,10 @@
44
44
  "dependencies": {
45
45
  "@emotion/styled": "^11.6.0",
46
46
  "@storybook/csf": "0.0.1",
47
- "@workday/canvas-kit-labs-react": "^11.0.0-alpha.792-next.0",
48
- "@workday/canvas-kit-preview-react": "^11.0.0-alpha.792-next.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.792-next.0",
50
- "@workday/canvas-kit-styling": "^11.0.0-alpha.792-next.0",
47
+ "@workday/canvas-kit-labs-react": "^11.0.0-alpha.793-next.0",
48
+ "@workday/canvas-kit-preview-react": "^11.0.0-alpha.793-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.793-next.0",
50
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.793-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.3.1",
53
53
  "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
59
59
  "mkdirp": "^1.0.3",
60
60
  "typescript": "4.2"
61
61
  },
62
- "gitHead": "a0579b1f9cb4ec69296e6b24569e06dd6a78fc0e"
62
+ "gitHead": "8932c60111b24b90d9d1014266095dc9d157f41e"
63
63
  }