@workday/canvas-kit-react 16.0.0-alpha.0474-next.0 → 16.0.0-alpha.0476-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/menu/lib/MenuItem.js +1 -1
- package/dist/commonjs/menu/lib/MenuOption.js +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts +2 -3
- package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +2 -2
- package/dist/es6/menu/lib/MenuItem.js +1 -1
- package/dist/es6/menu/lib/MenuOption.js +1 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts +2 -3
- package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +2 -2
- package/menu/lib/MenuItem.tsx +1 -1
- package/menu/lib/MenuOption.tsx +1 -1
- package/package.json +4 -4
- package/tabs/lib/TabsItem.tsx +2 -3
|
@@ -44,7 +44,7 @@ exports.menuItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
44
44
|
base: { name: "4b7bxi", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));cursor:pointer;color:var(--cnvs-sys-color-fg-strong);border-width:0;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));overflow-wrap:anywhere;--color-system-icon-c9acc3:currentColor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus-visible){outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:-0.125rem;}}&:is(.hover, :hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:is(.active, :active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(.focus, :focus-visible){outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:-0.125rem;}&[aria-expanded=\"true\"]:is(.focus, :focus-visible){color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));outline:none;}&:is(:disabled, [aria-disabled=true]){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:where(.hover, :hover){background:none;}&:where(.focus, :focus-visible){color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));opacity:var(--cnvs-sys-opacity-disabled);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}" }
|
|
45
45
|
}, "menu-item-38fada");
|
|
46
46
|
const MenuItemIcon = (elemProps) => {
|
|
47
|
-
return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "
|
|
47
|
+
return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", ...exports.menuItemStencil.parts.icon, ...elemProps });
|
|
48
48
|
};
|
|
49
49
|
const MenuItemText = (0, common_1.createComponent)('span')({
|
|
50
50
|
Component: ({ ...elemProps }, ref, Element) => {
|
|
@@ -12,7 +12,7 @@ const MenuItem_1 = require("./MenuItem");
|
|
|
12
12
|
const useMenuModel_1 = require("./useMenuModel");
|
|
13
13
|
const MenuOptionText = (0, common_1.createComponent)('span')({
|
|
14
14
|
Component: ({ ...elemProps }, ref, Element) => {
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem.Text, { ref: ref, as: Element, ...elemProps }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "
|
|
15
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem.Text, { ref: ref, as: Element, ...elemProps }), (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", ...MenuItem_1.menuItemStencil.parts.selected, icon: canvas_system_icons_web_1.checkIcon })] }));
|
|
16
16
|
},
|
|
17
17
|
});
|
|
18
18
|
exports.StyledMenuOption = (0, common_1.createComponent)('li')({
|
|
@@ -42,9 +42,8 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
|
|
|
42
42
|
*/
|
|
43
43
|
'aria-controls'?: string;
|
|
44
44
|
/**
|
|
45
|
-
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active.
|
|
46
|
-
*
|
|
47
|
-
* component and should only be used in advanced cases.
|
|
45
|
+
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
|
|
46
|
+
* is automatically set by the component and should only be used in advanced cases.
|
|
48
47
|
*/
|
|
49
48
|
'aria-selected'?: boolean;
|
|
50
49
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB
|
|
1
|
+
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmFD,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
|
|
@@ -12,8 +12,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
12
12
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
13
13
|
const useTabsModel_1 = require("./useTabsModel");
|
|
14
14
|
const tabItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
15
|
-
base: { name: "
|
|
16
|
-
}, "tab-item-
|
|
15
|
+
base: { name: "13thb2", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);border:none;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-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));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-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));color:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));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-muted-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));cursor:default;--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));&:after{position:absolute;border-block-end:var(--cnvs-base-size-50, 0.25rem) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));bottom:0;content:'';left:0;margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{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-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}" }
|
|
16
|
+
}, "tab-item-f3b0c4");
|
|
17
17
|
exports.StyledTabItem = (0, common_1.createComponent)('button')({
|
|
18
18
|
displayName: 'StyledTabItem',
|
|
19
19
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -18,7 +18,7 @@ export const menuItemStencil = createStencil({
|
|
|
18
18
|
base: { name: "4b7bxi", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));cursor:pointer;color:var(--cnvs-sys-color-fg-strong);border-width:0;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));overflow-wrap:anywhere;--color-system-icon-c9acc3:currentColor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus-visible){outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:-0.125rem;}}&:is(.hover, :hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:is(.active, :active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(.focus, :focus-visible){outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:-0.125rem;}&[aria-expanded=\"true\"]:is(.focus, :focus-visible){color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));outline:none;}&:is(:disabled, [aria-disabled=true]){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:where(.hover, :hover){background:none;}&:where(.focus, :focus-visible){color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));opacity:var(--cnvs-sys-opacity-disabled);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}" }
|
|
19
19
|
}, "menu-item-38fada");
|
|
20
20
|
const MenuItemIcon = (elemProps) => {
|
|
21
|
-
return _jsx(SystemIcon, { size: "
|
|
21
|
+
return _jsx(SystemIcon, { size: "md", ...menuItemStencil.parts.icon, ...elemProps });
|
|
22
22
|
};
|
|
23
23
|
const MenuItemText = createComponent('span')({
|
|
24
24
|
Component: ({ ...elemProps }, ref, Element) => {
|
|
@@ -9,7 +9,7 @@ import { MenuItem, menuItemStencil } from './MenuItem';
|
|
|
9
9
|
import { useMenuModel } from './useMenuModel';
|
|
10
10
|
const MenuOptionText = createComponent('span')({
|
|
11
11
|
Component: ({ ...elemProps }, ref, Element) => {
|
|
12
|
-
return (_jsxs(_Fragment, { children: [_jsx(MenuItem.Text, { ref: ref, as: Element, ...elemProps }), _jsx(SystemIcon, { size: "
|
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx(MenuItem.Text, { ref: ref, as: Element, ...elemProps }), _jsx(SystemIcon, { size: "md", ...menuItemStencil.parts.selected, icon: checkIcon })] }));
|
|
13
13
|
},
|
|
14
14
|
});
|
|
15
15
|
export const StyledMenuOption = createComponent('li')({
|
|
@@ -42,9 +42,8 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
|
|
|
42
42
|
*/
|
|
43
43
|
'aria-controls'?: string;
|
|
44
44
|
/**
|
|
45
|
-
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active.
|
|
46
|
-
*
|
|
47
|
-
* component and should only be used in advanced cases.
|
|
45
|
+
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
|
|
46
|
+
* is automatically set by the component and should only be used in advanced cases.
|
|
48
47
|
*/
|
|
49
48
|
'aria-selected'?: boolean;
|
|
50
49
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB
|
|
1
|
+
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAEL,YAAY,EAQb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAO7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmFD,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
|
|
@@ -9,8 +9,8 @@ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
|
9
9
|
import { base, component, system } from '@workday/canvas-tokens-web';
|
|
10
10
|
import { useTabsModel } from './useTabsModel';
|
|
11
11
|
const tabItemStencil = createStencil({
|
|
12
|
-
base: { name: "
|
|
13
|
-
}, "tab-item-
|
|
12
|
+
base: { name: "13thb2", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);border:none;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-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));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-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));color:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));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-muted-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));cursor:default;--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));&:after{position:absolute;border-block-end:var(--cnvs-base-size-50, 0.25rem) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));bottom:0;content:'';left:0;margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{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-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}" }
|
|
13
|
+
}, "tab-item-f3b0c4");
|
|
14
14
|
export const StyledTabItem = createComponent('button')({
|
|
15
15
|
displayName: 'StyledTabItem',
|
|
16
16
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
package/menu/lib/MenuItem.tsx
CHANGED
|
@@ -160,7 +160,7 @@ export const menuItemStencil = createStencil({
|
|
|
160
160
|
});
|
|
161
161
|
|
|
162
162
|
const MenuItemIcon = (elemProps: SystemIconProps) => {
|
|
163
|
-
return <SystemIcon size="
|
|
163
|
+
return <SystemIcon size="md" {...menuItemStencil.parts.icon} {...elemProps} />;
|
|
164
164
|
};
|
|
165
165
|
|
|
166
166
|
const MenuItemText = createComponent('span')({
|
package/menu/lib/MenuOption.tsx
CHANGED
|
@@ -24,7 +24,7 @@ const MenuOptionText = createComponent('span')({
|
|
|
24
24
|
return (
|
|
25
25
|
<>
|
|
26
26
|
<MenuItem.Text ref={ref} as={Element} {...elemProps} />
|
|
27
|
-
<SystemIcon size="
|
|
27
|
+
<SystemIcon size="md" {...menuItemStencil.parts.selected} icon={checkIcon} />
|
|
28
28
|
</>
|
|
29
29
|
);
|
|
30
30
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "16.0.0-alpha.
|
|
3
|
+
"version": "16.0.0-alpha.0476-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"@tanstack/react-virtual": "^3.13.9",
|
|
54
54
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
55
55
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
56
|
-
"@workday/canvas-kit-popup-stack": "^16.0.0-alpha.
|
|
57
|
-
"@workday/canvas-kit-styling": "^16.0.0-alpha.
|
|
56
|
+
"@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0476-next.0",
|
|
57
|
+
"@workday/canvas-kit-styling": "^16.0.0-alpha.0476-next.0",
|
|
58
58
|
"@workday/canvas-system-icons-web": "4.0.4",
|
|
59
59
|
"@workday/canvas-tokens-web": "4.4.0-beta.6",
|
|
60
60
|
"@workday/design-assets-types": "^0.3.0",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "2d96fab9d2a9a47e06b99ae59e5f939799efa76d"
|
|
73
73
|
}
|
package/tabs/lib/TabsItem.tsx
CHANGED
|
@@ -70,9 +70,8 @@ export interface TabsItemProps
|
|
|
70
70
|
*/
|
|
71
71
|
'aria-controls'?: string;
|
|
72
72
|
/**
|
|
73
|
-
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active.
|
|
74
|
-
*
|
|
75
|
-
* component and should only be used in advanced cases.
|
|
73
|
+
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
|
|
74
|
+
* is automatically set by the component and should only be used in advanced cases.
|
|
76
75
|
*/
|
|
77
76
|
'aria-selected'?: boolean;
|
|
78
77
|
/**
|