@workday/canvas-kit-preview-react 16.0.13 → 16.1.0-0564-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/commonjs/color-picker/lib/ColorPicker.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/commonjs/divider/lib/Divider.d.ts +48 -7
- package/dist/commonjs/divider/lib/Divider.d.ts.map +1 -1
- package/dist/commonjs/divider/lib/Divider.js +22 -4
- package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
- package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
- package/dist/commonjs/radio/lib/RadioText.js +3 -3
- package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
- package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js +1 -1
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/commonjs/switch/lib/SwitchBackground.js +1 -1
- package/dist/commonjs/switch/lib/SwitchCircle.js +2 -2
- package/dist/commonjs/switch/lib/SwitchContainer.js +1 -1
- package/dist/commonjs/switch/lib/SwitchIcon.js +2 -2
- package/dist/commonjs/switch/lib/SwitchInput.js +3 -3
- package/dist/commonjs/tabs/lib/TabsItem.js +3 -3
- package/dist/commonjs/tabs/lib/TabsList.js +8 -8
- package/dist/commonjs/tabs/lib/TabsOverflowButton.js +1 -1
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
- package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/es6/divider/lib/Divider.d.ts +48 -7
- package/dist/es6/divider/lib/Divider.d.ts.map +1 -1
- package/dist/es6/divider/lib/Divider.js +22 -4
- package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/es6/radio/lib/RadioGroup.js +3 -3
- package/dist/es6/radio/lib/RadioLabel.js +1 -1
- package/dist/es6/radio/lib/RadioText.js +3 -3
- package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
- package/dist/es6/side-panel/lib/SidePanel.js +7 -7
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/es6/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js +1 -1
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/es6/switch/lib/SwitchBackground.js +1 -1
- package/dist/es6/switch/lib/SwitchCircle.js +2 -2
- package/dist/es6/switch/lib/SwitchContainer.js +1 -1
- package/dist/es6/switch/lib/SwitchIcon.js +2 -2
- package/dist/es6/switch/lib/SwitchInput.js +3 -3
- package/dist/es6/tabs/lib/TabsItem.js +3 -3
- package/dist/es6/tabs/lib/TabsList.js +8 -8
- package/dist/es6/tabs/lib/TabsOverflowButton.js +1 -1
- package/dist/es6/version/lib/version.js +1 -1
- package/divider/lib/Divider.tsx +52 -14
- package/package.json +4 -4
- package/status-indicator/lib/StatusIndicatorIcon.tsx +1 -1
|
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchBackgroundStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "42xqnl", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.0625rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));" }
|
|
7
7
|
}, "switch-background-fbb710");
|
|
8
8
|
export const SwitchBackground = createComponent('div')({
|
|
9
9
|
displayName: 'SwitchBackground',
|
|
@@ -3,10 +3,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchCircleStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "eky1u", styles: "box-sizing:border-box;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
|
|
7
7
|
modifiers: {
|
|
8
8
|
checked: {
|
|
9
|
-
true: { name: "
|
|
9
|
+
true: { name: "2abswo", styles: "transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" }
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
}, "switch-circle-f808e0");
|
|
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchContainerStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "2tc3md", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;" }
|
|
7
7
|
}, "switch-container-f03251");
|
|
8
8
|
export const SwitchContainer = createComponent('div')({
|
|
9
9
|
displayName: 'SwitchContainer',
|
|
@@ -5,10 +5,10 @@ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling
|
|
|
5
5
|
import { checkSmallIcon, xSmallIcon } from '@workday/canvas-system-icons-web';
|
|
6
6
|
import { component, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
export const switchIconStencil = createStencil({
|
|
8
|
-
base: { name: "
|
|
8
|
+
base: { name: "3230vr", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" },
|
|
9
9
|
modifiers: {
|
|
10
10
|
checked: {
|
|
11
|
-
true: { name: "
|
|
11
|
+
true: { name: "1n7bb", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
}, "switch-icon-8fcbbf");
|
|
@@ -3,11 +3,11 @@ import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchInputStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "2isszd", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
7
7
|
modifiers: {
|
|
8
8
|
error: {
|
|
9
|
-
error: { name: "
|
|
10
|
-
caution: { name: "
|
|
9
|
+
error: { name: "1za1qv", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
|
|
10
|
+
caution: { name: "1m2fnf", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}, "switch-input-cce660");
|
|
@@ -9,11 +9,11 @@ import { base, component, system } from '@workday/canvas-tokens-web';
|
|
|
9
9
|
import { useTabsModel } from './useTabsModel';
|
|
10
10
|
const tabItemStencil = createStencil({
|
|
11
11
|
extends: cornerShapeStencil,
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "2qfcu8", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);position:relative;transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-base-size-75, 0.375rem);}&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover, &:focus-visible, &.focus{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
variant: {
|
|
15
|
-
filled: { name: "
|
|
16
|
-
outlined: { name: "
|
|
15
|
+
filled: { name: "3wszcz", styles: "border:0.0625rem solid transparent;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));border-color:var(--cnvs-sys-color-border-input-default);&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:focus-visible, &.focus{border-width:0.125rem;margin-inline:-0.0625rem;}@media (forced-colors: active){outline:0.125rem solid ButtonBorder;}}" },
|
|
16
|
+
outlined: { name: "pgc7o", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin-inline:0.0625rem;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));}&:focus-visible, &.focus{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);&:hover, &.hover, &:focus-visible, &.focus{border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}}" }
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}, "tab-item-be6a86");
|
|
@@ -66,20 +66,20 @@ export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHoo
|
|
|
66
66
|
};
|
|
67
67
|
}), useOverflowListMeasure, useListResetCursorOnBlur);
|
|
68
68
|
export const tabsListStencil = createStencil({
|
|
69
|
-
base: { name: "
|
|
69
|
+
base: { name: "zdkn6", styles: "box-sizing:border-box;display:flex;position:relative;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
|
|
70
70
|
modifiers: {
|
|
71
71
|
modality: {
|
|
72
|
-
touch: { name: "
|
|
73
|
-
mouse: { name: "
|
|
74
|
-
pen: { name: "
|
|
72
|
+
touch: { name: "1pd87v", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
|
|
73
|
+
mouse: { name: "1xh0oz", styles: "" },
|
|
74
|
+
pen: { name: "2umys0", styles: "" }
|
|
75
75
|
},
|
|
76
76
|
isDragging: {
|
|
77
|
-
true: { name: "
|
|
78
|
-
false: { name: "
|
|
77
|
+
true: { name: "21180w", styles: "" },
|
|
78
|
+
false: { name: "1os29y", styles: "" }
|
|
79
79
|
},
|
|
80
80
|
direction: {
|
|
81
|
-
left: { name: "
|
|
82
|
-
right: { name: "
|
|
81
|
+
left: { name: "3cb7y5", styles: "" },
|
|
82
|
+
right: { name: "4btv4b", styles: "" }
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
}, "tabs-list-adfaf8");
|
|
@@ -9,7 +9,7 @@ import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
|
|
|
9
9
|
import { StyledTabItem } from './TabsItem';
|
|
10
10
|
import { useTabsModel } from './useTabsModel';
|
|
11
11
|
const tabsOverflowButtonStencil = createStencil({
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "tl4nd", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
|
|
13
13
|
}, "tabs-overflow-button-5432e3");
|
|
14
14
|
export const useTabsOverflowButton = composeHooks(createElemPropsHook(useTabsModel)(() => {
|
|
15
15
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '16.0.
|
|
1
|
+
export const version = '16.0.11';
|
package/divider/lib/Divider.tsx
CHANGED
|
@@ -13,24 +13,55 @@ export const dividerStencil = createStencil({
|
|
|
13
13
|
vars: {
|
|
14
14
|
space: '',
|
|
15
15
|
},
|
|
16
|
-
base:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
base: {
|
|
17
|
+
border: 'none',
|
|
18
|
+
},
|
|
19
|
+
modifiers: {
|
|
20
|
+
/**
|
|
21
|
+
* Sets the orientation of the `Divider`.
|
|
22
|
+
* * `horizontal` - renders a horizontal rule with the `space` prop applied to the top and bottom margins.
|
|
23
|
+
* * `vertical` - renders a vertical rule with the `space` prop applied to the left and right margins. It
|
|
24
|
+
* stretches to fill the height of its container, so it should be placed inside an element with a defined
|
|
25
|
+
* height (e.g. a flex or grid container).
|
|
26
|
+
*
|
|
27
|
+
* @default 'horizontal'
|
|
28
|
+
*/
|
|
29
|
+
orientation: {
|
|
30
|
+
horizontal: ({space}) => ({
|
|
31
|
+
display: 'block',
|
|
32
|
+
height: px2rem(1),
|
|
33
|
+
borderBlockStart: `1px solid ${system.legacy.color.border.default}`,
|
|
34
|
+
margin: `${calc.divide(cssVar(space, system.legacy.gap.xs), 2)} 0`,
|
|
35
|
+
}),
|
|
36
|
+
vertical: ({space}) => ({
|
|
37
|
+
display: 'inline-block',
|
|
38
|
+
alignSelf: 'stretch',
|
|
39
|
+
width: px2rem(1),
|
|
40
|
+
height: 'auto',
|
|
41
|
+
borderInlineStart: `1px solid ${system.legacy.color.border.default}`,
|
|
42
|
+
margin: `0 ${calc.divide(cssVar(space, system.legacy.gap.xs), 2)}`,
|
|
43
|
+
}),
|
|
44
|
+
},
|
|
24
45
|
},
|
|
25
46
|
});
|
|
26
47
|
|
|
27
48
|
export interface DividerProps extends CSProps {
|
|
28
49
|
/**
|
|
29
|
-
* Applies
|
|
30
|
-
*
|
|
50
|
+
* Applies margin evenly to both ends of the `Divider`. It divides the provided value by two and applies half to each end.
|
|
51
|
+
* For a `horizontal` `Divider` this is the top and bottom margin, and for a `vertical` `Divider` it is the left and right margin.
|
|
52
|
+
* E.g. `space="2rem"` would apply `1rem` margin to each end.
|
|
31
53
|
* @default `system.gap.md` (1rem)
|
|
32
54
|
*/
|
|
33
55
|
space?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Sets the orientation of the `Divider`.
|
|
58
|
+
* * `horizontal` - renders a horizontal rule to segment stacked content.
|
|
59
|
+
* * `vertical` - renders a vertical rule to segment content laid out in a row. The `Divider` stretches to fill
|
|
60
|
+
* the height of its container, so it should be placed inside an element with a defined height (e.g. a flex or
|
|
61
|
+
* grid container).
|
|
62
|
+
* @default 'horizontal'
|
|
63
|
+
*/
|
|
64
|
+
orientation?: 'horizontal' | 'vertical';
|
|
34
65
|
}
|
|
35
66
|
|
|
36
67
|
/**
|
|
@@ -39,8 +70,8 @@ export interface DividerProps extends CSProps {
|
|
|
39
70
|
*
|
|
40
71
|
* [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
|
|
41
72
|
*
|
|
42
|
-
* The `space` prop will equally apply
|
|
43
|
-
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
|
|
73
|
+
* The `space` prop will equally apply margin styles to both ends of the `Divider`.
|
|
74
|
+
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom.
|
|
44
75
|
*
|
|
45
76
|
* @example
|
|
46
77
|
* ```tsx
|
|
@@ -49,11 +80,18 @@ export interface DividerProps extends CSProps {
|
|
|
49
80
|
*
|
|
50
81
|
* <Divider space={system.gap.xs} />
|
|
51
82
|
*
|
|
83
|
+
* // vertical
|
|
84
|
+
* <Divider orientation="vertical" />
|
|
85
|
+
*
|
|
52
86
|
* ```
|
|
53
87
|
*/
|
|
54
88
|
export const Divider = createComponent('hr')({
|
|
55
89
|
displayName: 'Divider',
|
|
56
|
-
Component: ({space, ...elemProps}: DividerProps, ref, Element) => (
|
|
57
|
-
<Element
|
|
90
|
+
Component: ({space, orientation = 'horizontal', ...elemProps}: DividerProps, ref, Element) => (
|
|
91
|
+
<Element
|
|
92
|
+
ref={ref}
|
|
93
|
+
{...handleCsProp(elemProps, dividerStencil({space, orientation}))}
|
|
94
|
+
aria-orientation={orientation}
|
|
95
|
+
/>
|
|
58
96
|
),
|
|
59
97
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.1.0-0564-next.0",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@workday/canvas-kit-react": "^16.0.
|
|
52
|
-
"@workday/canvas-kit-styling": "^16.0.
|
|
51
|
+
"@workday/canvas-kit-react": "^16.1.0-0564-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^16.1.0-0564-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
54
54
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
55
55
|
"@workday/design-assets-types": "^0.3.0"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react-hook-form": "7.36.1",
|
|
61
61
|
"yup": "^0.32.11"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "1066b7766b37f856c8744b337753d2901da4ad36"
|
|
64
64
|
}
|