@workday/canvas-kit-docs 7.3.0 → 7.3.1

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 (13) hide show
  1. package/dist/mdx/react/modal/examples/Basic.tsx +7 -7
  2. package/dist/mdx/react/modal/examples/BodyOverflow.tsx +2 -3
  3. package/dist/mdx/react/modal/examples/CustomFocus.tsx +7 -7
  4. package/dist/mdx/react/modal/examples/FullOverflow.tsx +1 -1
  5. package/dist/mdx/react/modal/examples/ReturnFocus.tsx +7 -7
  6. package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx +7 -7
  7. package/dist/mdx/react/popup/examples/Basic.tsx +11 -9
  8. package/dist/mdx/react/popup/examples/FocusRedirect.tsx +6 -4
  9. package/dist/mdx/react/popup/examples/FocusTrap.tsx +6 -4
  10. package/dist/mdx/react/popup/examples/InitialFocus.tsx +6 -4
  11. package/dist/mdx/react/popup/examples/NestedPopups.tsx +20 -18
  12. package/dist/mdx/react/popup/examples/RTL.tsx +6 -4
  13. package/package.json +3 -3
package/dist/mdx/react/modal/examples/Basic.tsx CHANGED
@@ -17,16 +17,16 @@ export default () => {
17
17
  <Modal.CloseIcon aria-label="Close" />
18
18
  <Modal.Heading>Delete Item</Modal.Heading>
19
19
  <Modal.Body>
20
- <Box as="p" marginTop={0} marginBottom="m">
20
+ <Box as="p" marginY="zero">
21
21
  Are you sure you want to delete the item?
22
22
  </Box>
23
- <HStack spacing="s">
24
- <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
25
- Delete
26
- </Modal.CloseButton>
27
- <Modal.CloseButton>Cancel</Modal.CloseButton>
28
- </HStack>
29
23
  </Modal.Body>
24
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
25
+ <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
26
+ Delete
27
+ </Modal.CloseButton>
28
+ <Modal.CloseButton>Cancel</Modal.CloseButton>
29
+ </HStack>
30
30
  </Modal.Card>
31
31
  </Modal.Overlay>
32
32
  </Modal>
package/dist/mdx/react/modal/examples/BodyOverflow.tsx CHANGED
@@ -2,8 +2,7 @@ import React from 'react';
2
2
 
3
3
  import {Modal} from '@workday/canvas-kit-react/modal';
4
4
  import {DeleteButton} from '@workday/canvas-kit-react/button';
5
- import {HStack, VStack, Stack, Box} from '@workday/canvas-kit-react/layout';
6
- import {space} from '@workday/canvas-kit-react/tokens';
5
+ import {HStack} from '@workday/canvas-kit-react/layout';
7
6
 
8
7
  export default () => {
9
8
  const handleDelete = () => {
@@ -43,7 +42,7 @@ export default () => {
43
42
  <p>Are you sure you want to delete the item?</p>
44
43
  <p>Are you sure you want to delete the item?</p>
45
44
  </Modal.Body>
46
- <HStack spacing="s" paddingTop="s">
45
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
47
46
  <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
48
47
  Delete
49
48
  </Modal.CloseButton>
package/dist/mdx/react/modal/examples/CustomFocus.tsx CHANGED
@@ -27,16 +27,16 @@ export default () => {
27
27
  <Box as="p" marginTop={0} marginBottom="m">
28
28
  Enter name to confirm deletion
29
29
  </Box>
30
- <FormField label="Item name">
30
+ <FormField label="Item name" style={{marginBottom: 0}}>
31
31
  <TextInput ref={ref} value={value} onChange={e => setValue(e.currentTarget.value)} />
32
32
  </FormField>
33
- <HStack spacing="s">
34
- <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
35
- Delete
36
- </Modal.CloseButton>
37
- <Modal.CloseButton>Cancel</Modal.CloseButton>
38
- </HStack>
39
33
  </Modal.Body>
34
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
35
+ <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
36
+ Delete
37
+ </Modal.CloseButton>
38
+ <Modal.CloseButton>Cancel</Modal.CloseButton>
39
+ </HStack>
40
40
  </Modal.Card>
41
41
  </Modal.Overlay>
42
42
  </Modal>
package/dist/mdx/react/modal/examples/FullOverflow.tsx CHANGED
@@ -42,7 +42,7 @@ export default () => {
42
42
  <p>Are you sure you want to delete the item?</p>
43
43
  <p>Are you sure you want to delete the item?</p>
44
44
  </Modal.Body>
45
- <HStack spacing="s">
45
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
46
46
  <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
47
47
  Delete
48
48
  </Modal.CloseButton>
package/dist/mdx/react/modal/examples/ReturnFocus.tsx CHANGED
@@ -39,16 +39,16 @@ export default () => {
39
39
  <Modal.CloseIcon aria-label="Close" />
40
40
  <Modal.Heading>Delete Item</Modal.Heading>
41
41
  <Modal.Body>
42
- <Box as="p" marginTop={0} marginBottom="m">
42
+ <Box as="p" marginY="zero">
43
43
  Are you sure you want to delete the item?
44
44
  </Box>
45
- <HStack spacing="s">
46
- <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
47
- Delete
48
- </Modal.CloseButton>
49
- <Modal.CloseButton>Cancel</Modal.CloseButton>
50
- </HStack>
51
45
  </Modal.Body>
46
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
47
+ <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
48
+ Delete
49
+ </Modal.CloseButton>
50
+ <Modal.CloseButton>Cancel</Modal.CloseButton>
51
+ </HStack>
52
52
  </Modal.Card>
53
53
  </Modal.Overlay>
54
54
  </Modal>
package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx CHANGED
@@ -32,16 +32,16 @@ export default () => {
32
32
  <Modal.Card>
33
33
  <Modal.Heading>Delete Item</Modal.Heading>
34
34
  <Modal.Body>
35
- <Box as="p" marginTop={0} marginBottom="m">
35
+ <Box as="p" marginY="zero">
36
36
  Are you sure you want to delete the item?
37
37
  </Box>
38
- <HStack spacing="s">
39
- <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
40
- Delete
41
- </Modal.CloseButton>
42
- <Modal.CloseButton>Cancel</Modal.CloseButton>
43
- </HStack>
44
38
  </Modal.Body>
39
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
40
+ <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
41
+ Delete
42
+ </Modal.CloseButton>
43
+ <Modal.CloseButton>Cancel</Modal.CloseButton>
44
+ </HStack>
45
45
  </Modal.Card>
46
46
  </Modal.Overlay>
47
47
  </Modal>
package/dist/mdx/react/popup/examples/Basic.tsx CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  useInitialFocus,
10
10
  useReturnFocus,
11
11
  } from '@workday/canvas-kit-react/popup';
12
- import {HStack} from '@workday/canvas-kit-react/layout';
12
+ import {Box, HStack} from '@workday/canvas-kit-react/layout';
13
13
 
14
14
  export default () => {
15
15
  const model = usePopupModel();
@@ -27,18 +27,20 @@ export default () => {
27
27
  <Popup model={model}>
28
28
  <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
29
29
  <Popup.Popper placement="bottom">
30
- <Popup.Card width={400} padding="s">
30
+ <Popup.Card width={400}>
31
31
  <Popup.CloseIcon aria-label="Close" />
32
32
  <Popup.Heading>Delete Item</Popup.Heading>
33
33
  <Popup.Body>
34
- <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
35
- <HStack spacing="s">
36
- <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
37
- Delete
38
- </Popup.CloseButton>
39
- <Popup.CloseButton>Cancel</Popup.CloseButton>
40
- </HStack>
34
+ <Box as="p" marginY="zero">
35
+ Are you sure you'd like to delete the item titled 'My Item'?
36
+ </Box>
41
37
  </Popup.Body>
38
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
39
+ <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
40
+ Delete
41
+ </Popup.CloseButton>
42
+ <Popup.CloseButton>Cancel</Popup.CloseButton>
43
+ </HStack>
42
44
  </Popup.Card>
43
45
  </Popup.Popper>
44
46
  </Popup>
package/dist/mdx/react/popup/examples/FocusRedirect.tsx CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  useFocusRedirect,
11
11
  usePopupModel,
12
12
  } from '@workday/canvas-kit-react/popup';
13
- import {HStack} from '@workday/canvas-kit-react/layout';
13
+ import {Box, HStack} from '@workday/canvas-kit-react/layout';
14
14
 
15
15
  export default () => {
16
16
  const model = usePopupModel();
@@ -39,13 +39,15 @@ export default () => {
39
39
  <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
40
40
  <div aria-owns={popupId} style={{position: 'absolute'}} />
41
41
  <Popup.Popper>
42
- <Popup.Card width={400} padding="s">
42
+ <Popup.Card width={400}>
43
43
  <Popup.CloseIcon aria-label="Close" />
44
44
  <Popup.Heading>Delete Item</Popup.Heading>
45
45
  <Popup.Body>
46
- <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
46
+ <Box as="p" marginY="zero">
47
+ Are you sure you'd like to delete the item titled 'My Item'?
48
+ </Box>
47
49
  </Popup.Body>
48
- <HStack spacing="s">
50
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
49
51
  <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
50
52
  Delete
51
53
  </Popup.CloseButton>
package/dist/mdx/react/popup/examples/FocusTrap.tsx CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  useReturnFocus,
11
11
  usePopupModel,
12
12
  } from '@workday/canvas-kit-react/popup';
13
- import {HStack} from '@workday/canvas-kit-react/layout';
13
+ import {Box, HStack} from '@workday/canvas-kit-react/layout';
14
14
 
15
15
  export default () => {
16
16
  const model = usePopupModel();
@@ -39,13 +39,15 @@ export default () => {
39
39
  <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
40
40
  <div aria-owns={popupId} style={{position: 'absolute'}} />
41
41
  <Popup.Popper>
42
- <Popup.Card width={400} padding="s">
42
+ <Popup.Card width={400}>
43
43
  <Popup.CloseIcon aria-label="Close" />
44
44
  <Popup.Heading>Delete Item</Popup.Heading>
45
45
  <Popup.Body>
46
- <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
46
+ <Box as="p" marginY="zero">
47
+ Are you sure you'd like to delete the item titled 'My Item'?
48
+ </Box>
47
49
  </Popup.Body>
48
- <HStack spacing="s">
50
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
49
51
  <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
50
52
  Delete
51
53
  </Popup.CloseButton>
package/dist/mdx/react/popup/examples/InitialFocus.tsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  useInitialFocus,
9
9
  useReturnFocus,
10
10
  } from '@workday/canvas-kit-react/popup';
11
- import {HStack} from '@workday/canvas-kit-react/layout';
11
+ import {Box, HStack} from '@workday/canvas-kit-react/layout';
12
12
 
13
13
  export default () => {
14
14
  const initialFocusRef = React.useRef(null);
@@ -25,13 +25,15 @@ export default () => {
25
25
  <Popup model={model}>
26
26
  <Popup.Target>Send Message</Popup.Target>
27
27
  <Popup.Popper placement={'bottom'}>
28
- <Popup.Card width={400} padding="16px">
28
+ <Popup.Card width={400}>
29
29
  <Popup.CloseIcon aria-label="Close" />
30
30
  <Popup.Heading>Confirmation</Popup.Heading>
31
31
  <Popup.Body>
32
- <p id="popup-message">Your message has been sent!</p>
32
+ <Box as="p" marginY="zero" id="popup-message">
33
+ Your message has been sent!
34
+ </Box>
33
35
  </Popup.Body>
34
- <HStack spacing="s">
36
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
35
37
  <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
36
38
  OK
37
39
  </Popup.CloseButton>
package/dist/mdx/react/popup/examples/NestedPopups.tsx CHANGED
@@ -36,25 +36,27 @@ export default () => {
36
36
  <Popup.Card aria-label="Popup 1">
37
37
  <Popup.CloseIcon aria-label="Close" size="small" />
38
38
  <Popup.Body>
39
- <p>Contents of Popup 1</p>
39
+ <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>
40
40
  </Popup.Body>
41
- <Popup model={popup2}>
42
- <Popup.Target>Open Popup 2</Popup.Target>
43
- <Popup.Popper>
44
- <Popup.Card aria-label="Popup 2">
45
- <Popup.CloseIcon aria-label="Close" size="small" />
46
- <Popup.Body>
47
- <p>Contents of Popup 2</p>
48
- </Popup.Body>
49
- <HStack spacing="s">
50
- <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
51
- Close Both (as)
52
- </Popup.CloseButton>
53
- <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
54
- </HStack>
55
- </Popup.Card>
56
- </Popup.Popper>
57
- </Popup>
41
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
42
+ <Popup model={popup2}>
43
+ <Popup.Target>Open Popup 2</Popup.Target>
44
+ <Popup.Popper>
45
+ <Popup.Card aria-label="Popup 2">
46
+ <Popup.CloseIcon aria-label="Close" size="small" />
47
+ <Popup.Body>
48
+ <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>
49
+ </Popup.Body>
50
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
51
+ <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
52
+ Close Both (as)
53
+ </Popup.CloseButton>
54
+ <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
55
+ </HStack>
56
+ </Popup.Card>
57
+ </Popup.Popper>
58
+ </Popup>
59
+ </HStack>
58
60
  </Popup.Card>
59
61
  </Popup.Popper>
60
62
  </Popup>
package/dist/mdx/react/popup/examples/RTL.tsx CHANGED
@@ -3,18 +3,20 @@ import React from 'react';
3
3
  import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
4
4
  import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
5
5
  import {Popup} from '@workday/canvas-kit-react/popup';
6
- import {HStack} from '@workday/canvas-kit-react/layout';
6
+ import {Box, HStack} from '@workday/canvas-kit-react/layout';
7
7
 
8
8
  export default () => {
9
9
  return (
10
10
  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
11
- <Popup.Card width={400} padding="s">
11
+ <Popup.Card width={400}>
12
12
  <Popup.CloseIcon aria-label="סגור" />
13
13
  <Popup.Heading>למחוק פריט</Popup.Heading>
14
14
  <Popup.Body>
15
- <p>האם ברצונך למחוק פריט זה</p>
15
+ <Box as="p" marginY="zero">
16
+ האם ברצונך למחוק פריט זה
17
+ </Box>
16
18
  </Popup.Body>
17
- <HStack spacing="s">
19
+ <HStack spacing="s" padding="xxs" marginTop="xxs">
18
20
  <DeleteButton>לִמְחוֹק</DeleteButton>
19
21
  <SecondaryButton>לְבַטֵל</SecondaryButton>
20
22
  </HStack>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "7.3.0",
3
+ "version": "7.3.1",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -42,7 +42,7 @@
42
42
  ],
43
43
  "dependencies": {
44
44
  "@storybook/csf": "0.0.1",
45
- "@workday/canvas-kit-react": "^7.3.0"
45
+ "@workday/canvas-kit-react": "^7.3.1"
46
46
  },
47
47
  "devDependencies": {
48
48
  "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
50
50
  "mkdirp": "^1.0.3",
51
51
  "typescript": "4.1"
52
52
  },
53
- "gitHead": "ea5edda9b7a9f66cf7238bfdc1de77ad822db7b2"
53
+ "gitHead": "41e6eb9532da50e341fe07b805becc2516f9d420"
54
54
  }