@workday/canvas-kit-docs 7.0.0-alpha.0-next.0 → 7.0.0-alpha.0-next.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.
|
@@ -6,6 +6,7 @@ any questions about the update.
|
|
|
6
6
|
|
|
7
7
|
- [Codemod](#codemod)
|
|
8
8
|
- [ActionBar Component Updates](#actionbar-component-updates)
|
|
9
|
+
- [Status Indicator Width](#status-indicator-width)
|
|
9
10
|
|
|
10
11
|
## Codemod
|
|
11
12
|
|
|
@@ -44,4 +45,17 @@ PR: https://github.com/Workday/canvas-kit/pull/1396
|
|
|
44
45
|
- Component has been converted to compound component.
|
|
45
46
|
- `fixed` prop has been removed from component.
|
|
46
47
|
- Now ActionBar uses `position` prop to set container position instead `fixed` prop.
|
|
47
|
-
- Fixed position has been set as default if there is not passed `position` prop.
|
|
48
|
+
- Fixed position has been set as default if there is not passed `position` prop.
|
|
49
|
+
|
|
50
|
+
## Status Indicator Width
|
|
51
|
+
|
|
52
|
+
Status Indicators currently truncate when they reach their max width of `150px`. After receiving
|
|
53
|
+
requests to increase this, we have upped it by 25% to `200px`.
|
|
54
|
+
|
|
55
|
+
We've also added a prop (`maxWidth`) to configure this if you need to. While this increases
|
|
56
|
+
flexibility, please keep in mind that status text should be short, direct, and preferably a single
|
|
57
|
+
word.
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<StatusIndicator label="Slightly Longer Status" type={StatusIndicator.Type.Gray} maxWidth={250} />
|
|
61
|
+
```
|
|
@@ -3,6 +3,7 @@ import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
|
|
|
3
3
|
import Basic from './examples/Basic';
|
|
4
4
|
import Icon from './examples/Icon';
|
|
5
5
|
import Emphasis from './examples/Emphasis';
|
|
6
|
+
import MaxWidth from './examples/MaxWidth';
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
# Canvas Kit Status Indicator
|
|
@@ -54,6 +55,17 @@ label.
|
|
|
54
55
|
|
|
55
56
|
<ExampleCodeBlock code={Icon} />
|
|
56
57
|
|
|
58
|
+
### Max Width
|
|
59
|
+
|
|
60
|
+
By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
|
|
61
|
+
exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.
|
|
62
|
+
|
|
63
|
+
Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
|
|
64
|
+
truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
|
|
65
|
+
when you do this, you should make the tooltip focusable with `tabIndex`.
|
|
66
|
+
|
|
67
|
+
<ExampleCodeBlock code={MaxWidth} />
|
|
68
|
+
|
|
57
69
|
## Props
|
|
58
70
|
|
|
59
71
|
Undocumented props are spread to the outermost element rendered by Status Indicator.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
|
|
4
|
+
import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
|
|
5
|
+
import {space} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
|
|
7
|
+
const StatusIndicators = styled('div')({
|
|
8
|
+
'& > *': {
|
|
9
|
+
margin: space.xxs,
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export default () => {
|
|
14
|
+
return (
|
|
15
|
+
<StatusIndicators>
|
|
16
|
+
<StatusIndicator
|
|
17
|
+
label="Longer Than Normal Ellipsized Status"
|
|
18
|
+
type={StatusIndicator.Type.Blue}
|
|
19
|
+
maxWidth={250}
|
|
20
|
+
/>
|
|
21
|
+
<OverflowTooltip>
|
|
22
|
+
<StatusIndicator
|
|
23
|
+
label="Overflow Tooltip On Hover/Focus Status"
|
|
24
|
+
type={StatusIndicator.Type.Green}
|
|
25
|
+
tabIndex={0}
|
|
26
|
+
/>
|
|
27
|
+
</OverflowTooltip>
|
|
28
|
+
</StatusIndicators>
|
|
29
|
+
);
|
|
30
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "7.0.0-alpha.0-next.
|
|
3
|
+
"version": "7.0.0-alpha.0-next.1+57471fa0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
],
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@storybook/csf": "0.0.1",
|
|
53
|
-
"@workday/canvas-kit-react": "^7.0.0-alpha.0-next.
|
|
53
|
+
"@workday/canvas-kit-react": "^7.0.0-alpha.0-next.1+57471fa0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"fs-extra": "^10.0.0",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"mkdirp": "^1.0.3",
|
|
59
59
|
"typescript": "^3.8.3"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "57471fa0c73534126f9ef9a18203d49c5834d21e"
|
|
62
62
|
}
|