@workday/canvas-kit-docs 15.0.0-alpha.0051-next.0 → 15.0.0-alpha.0056-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 +18569 -18569
- package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.js +1 -1
- package/dist/mdx/15.0-UPGRADE-GUIDE.mdx +20 -1
- package/dist/mdx/labs-react/combobox/Combobox.mdx +1 -1
- package/dist/mdx/labs-react/search-form/SearchForm.mdx +1 -1
- package/dist/mdx/preview-react/select/Select.mdx +1 -1
- package/dist/mdx/react/avatar/avatar/Avatar.mdx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/InformationHighlight.mdx +4 -4
- package/dist/mdx/{preview-react → react}/information-highlight/examples/Basic.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/Body.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/Caution.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/Critical.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/CustomIconCritical.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/Heading.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/Informational.tsx +1 -1
- package/dist/mdx/{preview-react → react}/information-highlight/examples/RTL.tsx +1 -1
- package/dist/mdx/react/radio/Radio.mdx +1 -1
- package/dist/mdx/react/status-indicator/StatusIndicator.mdx +1 -1
- package/dist/mdx/react/text/LabelText.mdx +1 -1
- package/dist/mdx/react/tokens/Tokens.mdx +1 -1
- package/dist/mdx/react/tooltip/Tooltip.mdx +2 -2
- package/dist/mdx/style-props/STYLE_PROPS.mdx +1 -1
- package/dist/mdx/style-props/stylePropsMigrationCodemod.mdx +1 -1
- package/dist/mdx/style-props/stylePropsMigrationOverview.mdx +1 -1
- package/dist/mdx/styling/mdx/CreateStyles.mdx +1 -1
- package/dist/mdx/styling/mdx/MergingStyles.mdx +1 -1
- package/dist/mdx/styling/mdx/Overview.mdx +1 -1
- package/dist/mdx/styling/mdx/Stencils.mdx +1 -1
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
|
|
3
|
-
import { InformationHighlight } from '@workday/canvas-kit-
|
|
3
|
+
import { InformationHighlight } from '@workday/canvas-kit-react/information-highlight';
|
|
4
4
|
import { Unstyled } from '@storybook/blocks';
|
|
5
5
|
export const StorybookInformationHighlight = ({ variant, emphasis, title, description, link, linkText, isExternal, }) => {
|
|
6
6
|
return (_jsx(Unstyled, { children: _jsxs(InformationHighlight, { variant: variant, emphasis: emphasis, children: [_jsx(InformationHighlight.Icon, {}), _jsx(InformationHighlight.Heading, { children: title }), _jsx(InformationHighlight.Body, { children: description }), _jsx(InformationHighlight.Link, { as: isExternal && ExternalHyperlink, href: link, children: linkText })] }) }));
|
|
@@ -19,6 +19,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
|
|
|
19
19
|
- [Instructions](#instructions)
|
|
20
20
|
- [Component Promotions](#component-promotions)
|
|
21
21
|
- [Segmented Control](#segmented-control-)
|
|
22
|
+
- [Information Highlight](#information-highlight-)
|
|
22
23
|
- [Component Updates](#component-updates)
|
|
23
24
|
- [Buttons](#buttons)
|
|
24
25
|
- [Removals](#removals)
|
|
@@ -91,7 +92,7 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
91
92
|
|
|
92
93
|
### Segmented Control ⚡️
|
|
93
94
|
|
|
94
|
-
We've promoted `SegmentedControl` from [Preview](
|
|
95
|
+
We've promoted `SegmentedControl` from [Preview](#preview) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
|
|
95
96
|
|
|
96
97
|
**Before in v14**
|
|
97
98
|
|
|
@@ -189,6 +190,24 @@ The promoted `SegmentedControl` includes several new features:
|
|
|
189
190
|
</SegmentedControl>
|
|
190
191
|
```
|
|
191
192
|
|
|
193
|
+
### Information Highlight ⚡️
|
|
194
|
+
|
|
195
|
+
We've promoted `InformationHighlight` from [Preview](#preview) to [Main](#main). There are no changes to the functionality or styling of the component. The only change required is updating the import statement.
|
|
196
|
+
|
|
197
|
+
**Before in v14**
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
**After in v15**
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
> 🤖 The codemod will handle the change of imports as shown above.
|
|
210
|
+
|
|
192
211
|
## Component Updates
|
|
193
212
|
|
|
194
213
|
### Buttons
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
SymbolDoc,
|
|
5
5
|
Specifications,
|
|
6
6
|
} from '@workday/canvas-kit-docs';
|
|
7
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
7
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
8
8
|
import Basic from './examples/Basic';
|
|
9
9
|
import DisabledItem from './examples/DisabledItem';
|
|
10
10
|
import GroupOfResult from './examples/GroupOfResult';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';import Basic from './examples/Basic';
|
|
3
3
|
import Collapsed from './examples/Collapsed';
|
|
4
4
|
import CustomTheme from './examples/CustomTheme';
|
|
5
5
|
import Grow from './examples/Grow';
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
SymbolDoc,
|
|
5
5
|
Specifications,
|
|
6
6
|
} from '@workday/canvas-kit-docs';
|
|
7
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
7
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
8
8
|
import Default from './examples/Top Label/Default';
|
|
9
9
|
import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
|
|
10
10
|
import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
ExampleCodeBlock,
|
|
6
6
|
StorybookStatusIndicator,
|
|
7
7
|
} from '@workday/canvas-kit-docs';
|
|
8
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
8
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
9
9
|
|
|
10
10
|
import Basic from './examples/Basic';
|
|
11
11
|
import Button from './examples/Button';
|
|
@@ -19,7 +19,7 @@ be aware of.
|
|
|
19
19
|
## Installation
|
|
20
20
|
|
|
21
21
|
```sh
|
|
22
|
-
yarn add @workday/canvas-kit-
|
|
22
|
+
yarn add @workday/canvas-kit-react
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Usage
|
|
@@ -85,7 +85,7 @@ specific actions.
|
|
|
85
85
|
### Critical
|
|
86
86
|
|
|
87
87
|
The critical variant is for _must know_ information that could otherwise cause failure if the user
|
|
88
|
-
is unaware
|
|
88
|
+
is unaware.
|
|
89
89
|
|
|
90
90
|
<ExampleCodeBlock code={Critical} />
|
|
91
91
|
|
|
@@ -114,14 +114,14 @@ parent dom element that renders your application.
|
|
|
114
114
|
|
|
115
115
|
### Accessible Use of the `as` Prop
|
|
116
116
|
|
|
117
|
-
Like many of our components, `InformationHighlight` and
|
|
117
|
+
Like many of our components, `InformationHighlight` and its subcomponents accept an `as` prop,
|
|
118
118
|
which lets you change the underlying semantic element. For `InformationHighlight.Heading`, you can
|
|
119
119
|
change the heading level if you were needing to define a different level of importance. This should
|
|
120
120
|
be done with caution to ensure the best accessibility.
|
|
121
121
|
|
|
122
122
|
## Component API
|
|
123
123
|
|
|
124
|
-
<SymbolDoc name="InformationHighlight" fileName="/
|
|
124
|
+
<SymbolDoc name="InformationHighlight" fileName="/react/" />
|
|
125
125
|
|
|
126
126
|
## Specifications
|
|
127
127
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web';
|
|
4
4
|
|
|
5
5
|
export default () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web';
|
|
4
4
|
|
|
5
5
|
export default () => {
|
package/dist/mdx/{preview-react → react}/information-highlight/examples/CustomIconCritical.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {chartIcon} from '@workday/canvas-system-icons-web';
|
|
4
4
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import {system} from '@workday/canvas-tokens-web';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web';
|
|
4
4
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
5
5
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
3
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
3
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
4
4
|
import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
5
5
|
import {system} from '@workday/canvas-tokens-web';
|
|
6
6
|
export default () => {
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
Specifications,
|
|
6
6
|
} from '@workday/canvas-kit-docs';
|
|
7
7
|
|
|
8
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
8
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
9
9
|
|
|
10
10
|
import Caution from './examples/Caution';
|
|
11
11
|
import Basic from './examples/Basic';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
|
|
4
4
|
import Basic from './examples/Basic';
|
|
5
5
|
import Icon from './examples/Icon';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import Basic from './examples/LabelText/Basic';
|
|
4
4
|
import Cursor from './examples/LabelText/Cursor';
|
|
5
5
|
import Disabled from './examples/LabelText/Disabled';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
|
|
3
3
|
import Overview from './examples/Overview';
|
|
4
4
|
|
|
5
5
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';import Default from './examples/Default';
|
|
4
4
|
import CustomContent from './examples/CustomContent';
|
|
5
5
|
import DelayedTooltip from './examples/DelayedTooltip';
|
|
@@ -85,7 +85,7 @@ being focused and the ancillary tooltip information.
|
|
|
85
85
|
The default mode for a tooltip is to assign a name to the target element with an `aria-label`
|
|
86
86
|
string. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.
|
|
87
87
|
This will add `aria-description` strings to the target element instead. This variant is useful on
|
|
88
|
-
text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible.
|
|
88
|
+
text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible.
|
|
89
89
|
|
|
90
90
|
> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.
|
|
91
91
|
>
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
spaceStyleFnConfigs,
|
|
20
20
|
textStyleFnConfigs,
|
|
21
21
|
} from '@workday/canvas-kit-react/layout';
|
|
22
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
22
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
23
23
|
|
|
24
24
|
import Background from './examples/Background';
|
|
25
25
|
import Border from './examples/Border';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web'
|
|
4
4
|
|
|
5
5
|
import CreateStyles from './examples/CreateStyles';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web';
|
|
4
4
|
import StylingOverrides from './examples/StylingOverrides';
|
|
5
5
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
1
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
2
2
|
import {Hyperlink} from '@workday/canvas-kit-react/button';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web';
|
|
4
4
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {InformationHighlight} from '@workday/canvas-kit-
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
|
|
3
3
|
import {system} from '@workday/canvas-tokens-web'
|
|
4
4
|
|
|
5
5
|
import CreateStencil from './examples/CreateStencil';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.0056-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": "^15.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^15.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^15.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^15.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^15.0.0-alpha.0056-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^15.0.0-alpha.0056-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^15.0.0-alpha.0056-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^15.0.0-alpha.0056-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.36",
|
|
53
53
|
"@workday/canvas-tokens-web": "4.0.0-alpha.3",
|
|
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": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
|
|
65
65
|
}
|