@workday/canvas-kit-docs 14.0.0-alpha.1238-next.0 → 14.0.0-alpha.1239-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.
- package/dist/es6/lib/docs.js +11 -11
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +54 -4
- package/dist/mdx/preview-react/multi-select/examples/Error.tsx +25 -23
- package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx +1 -1
- package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx +1 -1
- package/dist/mdx/react/expandable/examples/EndIcon.tsx +3 -1
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -12747,11 +12747,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
12747
12747
|
},
|
|
12748
12748
|
{
|
|
12749
12749
|
"kind": "string",
|
|
12750
|
-
"value": "
|
|
12750
|
+
"value": "standaloneInverse"
|
|
12751
12751
|
}
|
|
12752
12752
|
]
|
|
12753
12753
|
},
|
|
12754
|
-
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `
|
|
12754
|
+
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
|
|
12755
12755
|
"declarations": [
|
|
12756
12756
|
{
|
|
12757
12757
|
"name": "variant",
|
|
@@ -89692,11 +89692,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
89692
89692
|
},
|
|
89693
89693
|
{
|
|
89694
89694
|
"kind": "string",
|
|
89695
|
-
"value": "
|
|
89695
|
+
"value": "standaloneInverse"
|
|
89696
89696
|
}
|
|
89697
89697
|
]
|
|
89698
89698
|
},
|
|
89699
|
-
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `
|
|
89699
|
+
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
|
|
89700
89700
|
"declarations": [
|
|
89701
89701
|
{
|
|
89702
89702
|
"name": "variant",
|
|
@@ -115338,11 +115338,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
115338
115338
|
},
|
|
115339
115339
|
{
|
|
115340
115340
|
"kind": "string",
|
|
115341
|
-
"value": "
|
|
115341
|
+
"value": "standaloneInverse"
|
|
115342
115342
|
}
|
|
115343
115343
|
]
|
|
115344
115344
|
},
|
|
115345
|
-
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `
|
|
115345
|
+
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
|
|
115346
115346
|
"declarations": [
|
|
115347
115347
|
{
|
|
115348
115348
|
"name": "variant",
|
|
@@ -116206,11 +116206,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
116206
116206
|
},
|
|
116207
116207
|
{
|
|
116208
116208
|
"kind": "string",
|
|
116209
|
-
"value": "
|
|
116209
|
+
"value": "standaloneInverse"
|
|
116210
116210
|
}
|
|
116211
116211
|
]
|
|
116212
116212
|
},
|
|
116213
|
-
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `
|
|
116213
|
+
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
|
|
116214
116214
|
"declarations": [
|
|
116215
116215
|
{
|
|
116216
116216
|
"name": "variant",
|
|
@@ -116472,7 +116472,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
116472
116472
|
"type": {
|
|
116473
116473
|
"kind": "enhancedComponent",
|
|
116474
116474
|
"componentType": "regular",
|
|
116475
|
-
"displayName": "
|
|
116475
|
+
"displayName": "ButtonLabelIcon",
|
|
116476
116476
|
"props": [
|
|
116477
116477
|
{
|
|
116478
116478
|
"kind": "property",
|
|
@@ -397410,11 +397410,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
397410
397410
|
},
|
|
397411
397411
|
{
|
|
397412
397412
|
"kind": "string",
|
|
397413
|
-
"value": "
|
|
397413
|
+
"value": "standaloneInverse"
|
|
397414
397414
|
}
|
|
397415
397415
|
]
|
|
397416
397416
|
},
|
|
397417
|
-
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `
|
|
397417
|
+
"description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
|
|
397418
397418
|
"declarations": [
|
|
397419
397419
|
{
|
|
397420
397420
|
"name": "variant",
|
|
@@ -467,7 +467,7 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
467
467
|
|
|
468
468
|
**PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
|
|
469
469
|
|
|
470
|
-
- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `
|
|
470
|
+
- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standaloneInverse` variant. This
|
|
471
471
|
removes the underline text decoration for use outside the context of body text.
|
|
472
472
|
|
|
473
473
|
**HyperLink and ExternalHyperlink in v14**
|
|
@@ -475,11 +475,11 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
475
475
|
```tsx
|
|
476
476
|
<Hyperlink variant="standalone" href="#hyperlink">Hyperlink</Hyperlink>
|
|
477
477
|
<ExternalHyperlink variant="standalone" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
|
|
478
|
-
<Hyperlink variant="
|
|
479
|
-
<ExternalHyperlink variant="
|
|
478
|
+
<Hyperlink variant="standaloneInverse" href="#hyperlink">Hyperlink</Hyperlink>
|
|
479
|
+
<ExternalHyperlink variant="standaloneInverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
|
|
480
480
|
```
|
|
481
481
|
|
|
482
|
-
> **Note:** Only use the `standalone` or `
|
|
482
|
+
> **Note:** Only use the `standalone` or `standaloneInverse` variant in cases where the
|
|
483
483
|
> `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
|
|
484
484
|
|
|
485
485
|
### Loading Dots
|
|
@@ -760,6 +760,31 @@ We've removed `TextArea` from `@workday/canvas-kit-preview-react` package. Pleas
|
|
|
760
760
|
[TextArea](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) from
|
|
761
761
|
`@workday/canvas-kit-react` instead.
|
|
762
762
|
|
|
763
|
+
**Before in v13**
|
|
764
|
+
|
|
765
|
+
```tsx
|
|
766
|
+
import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
767
|
+
|
|
768
|
+
<TextArea orientation="vertical">
|
|
769
|
+
<TextArea.Label>Leave a review</TextArea.Label>
|
|
770
|
+
<TextArea.Field onChange={handleChange} value={value} />
|
|
771
|
+
</TextArea>
|
|
772
|
+
```
|
|
773
|
+
|
|
774
|
+
**After in v14**
|
|
775
|
+
|
|
776
|
+
```tsx
|
|
777
|
+
import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
778
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
779
|
+
|
|
780
|
+
<FormField>
|
|
781
|
+
<FormField.Label>Leave a Review</FormField.Label>
|
|
782
|
+
<FormField.Field>
|
|
783
|
+
<FormField.Input as={TextArea} onChange={handleChange} value={value} />
|
|
784
|
+
</FormField.Field>
|
|
785
|
+
</FormField>
|
|
786
|
+
```
|
|
787
|
+
|
|
763
788
|
### Text Input (preview)
|
|
764
789
|
|
|
765
790
|
**PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
|
|
@@ -768,6 +793,31 @@ We've removed `TextInput` from `@workday/canvas-kit-preview-react` package. Plea
|
|
|
768
793
|
[TextInput](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs)
|
|
769
794
|
from `@workday/canvas-kit-react` instead.
|
|
770
795
|
|
|
796
|
+
**Before in v13**
|
|
797
|
+
|
|
798
|
+
```tsx
|
|
799
|
+
import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
800
|
+
|
|
801
|
+
<TextInput orientation="vertical">
|
|
802
|
+
<TextInput.Label>Email</TextInput.Label>
|
|
803
|
+
<TextInput.Field onChange={handleChange} value={value} />
|
|
804
|
+
</TextInput>
|
|
805
|
+
```
|
|
806
|
+
|
|
807
|
+
**After in v14**
|
|
808
|
+
|
|
809
|
+
```tsx
|
|
810
|
+
import {TextArea} from '@workday/canvas-kit-preview-react/text-input';
|
|
811
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
812
|
+
|
|
813
|
+
<FormField>
|
|
814
|
+
<FormField.Label>Leave a Review</FormField.Label>
|
|
815
|
+
<FormField.Field>
|
|
816
|
+
<FormField.Input as={TextInput} onChange={handleChange} value={value} />
|
|
817
|
+
</FormField.Field>
|
|
818
|
+
</FormField>
|
|
819
|
+
```
|
|
820
|
+
|
|
771
821
|
---
|
|
772
822
|
|
|
773
823
|
## Troubleshooting
|
|
@@ -24,30 +24,32 @@ export default () => {
|
|
|
24
24
|
}
|
|
25
25
|
>
|
|
26
26
|
<FormField.Label>Toppings</FormField.Label>
|
|
27
|
-
<FormField.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<MultiSelect.
|
|
34
|
-
<MultiSelect.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<MultiSelect.Item
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
27
|
+
<FormField.Field>
|
|
28
|
+
<FormField.Input
|
|
29
|
+
as={MultiSelect.Input}
|
|
30
|
+
placeholder="Select Multiple"
|
|
31
|
+
removeLabel="Remove"
|
|
32
|
+
/>
|
|
33
|
+
<MultiSelect.Popper>
|
|
34
|
+
<MultiSelect.Card>
|
|
35
|
+
<MultiSelect.List>
|
|
36
|
+
{item => (
|
|
37
|
+
<MultiSelect.Item data-id={item}>
|
|
38
|
+
<MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
|
|
39
|
+
</MultiSelect.Item>
|
|
40
|
+
)}
|
|
41
|
+
</MultiSelect.List>
|
|
42
|
+
</MultiSelect.Card>
|
|
43
|
+
</MultiSelect.Popper>
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
<FormField.Hint>
|
|
46
|
+
{model.state.selectedIds.length < 1
|
|
47
|
+
? 'Select at least one topping.'
|
|
48
|
+
: model.state.selectedIds.length > 3
|
|
49
|
+
? 'More than 3 toppings cost extra.'
|
|
50
|
+
: undefined}
|
|
51
|
+
</FormField.Hint>
|
|
52
|
+
</FormField.Field>
|
|
51
53
|
</FormField>
|
|
52
54
|
</MultiSelect>
|
|
53
55
|
</>
|
|
@@ -17,7 +17,7 @@ export default () => (
|
|
|
17
17
|
<Hyperlink href="#hyperlink" variant="inverse">
|
|
18
18
|
Hyperlink
|
|
19
19
|
</Hyperlink>
|
|
20
|
-
<Hyperlink href="#hyperlink" variant="
|
|
20
|
+
<Hyperlink href="#hyperlink" variant="standaloneInverse">
|
|
21
21
|
Hyperlink
|
|
22
22
|
</Hyperlink>
|
|
23
23
|
</Box>
|
|
@@ -3,7 +3,9 @@ import {Expandable} from '@workday/canvas-kit-react/expandable';
|
|
|
3
3
|
export default () => (
|
|
4
4
|
<Expandable>
|
|
5
5
|
<Expandable.Target headingLevel="h4">
|
|
6
|
-
<Expandable.Title>
|
|
6
|
+
<Expandable.Title>
|
|
7
|
+
TitleTitleTitleTitleTitle TitleTitleTitleTitle TitleTitleTitle Title
|
|
8
|
+
</Expandable.Title>
|
|
7
9
|
<Expandable.Icon iconPosition="end" />
|
|
8
10
|
</Expandable.Target>
|
|
9
11
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1239-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",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1239-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1239-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1239-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1239-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "fdb8b845a09a86de1fb0a383fb3c5def6016e064"
|
|
65
65
|
}
|