@workday/canvas-kit-react 5.2.9 → 5.2.10

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.
Files changed (6) hide show
  1. package/dist/commonjs/tabs/lib/Tab.d.ts.map +1 -1
  2. package/dist/commonjs/tabs/lib/Tab.js +18 -24
  3. package/dist/es6/tabs/lib/Tab.d.ts.map +1 -1
  4. package/dist/es6/tabs/lib/Tab.js +18 -24
  5. package/package.json +5 -5
  6. package/tabs/lib/Tab.tsx +53 -59
package/dist/commonjs/tabs/lib/Tab.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmGD,eAAO,MAAM,GAAG,6DAad,CAAC"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}
package/dist/commonjs/tabs/lib/Tab.js CHANGED
@@ -46,31 +46,25 @@ var StyledButton = common_1.styled('button')(__assign(__assign(__assign(__assign
46
46
  cursor: 'auto',
47
47
  backgroundColor: "transparent",
48
48
  },
49
- } }), function (_a) {
50
- var isSelected = _a.isSelected;
51
- if (isSelected) {
52
- return {
49
+ }, '&[aria-selected=true]': {
50
+ color: tokens_1.colors.blueberry400,
51
+ cursor: 'default',
52
+ '&:after': {
53
+ position: 'absolute',
54
+ height: tokens_1.space.xxxs,
55
+ borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
56
+ backgroundColor: tokens_1.colors.blueberry400,
57
+ bottom: 0,
58
+ content: "''",
59
+ left: 0,
60
+ marginTop: '-2px',
61
+ width: '100%',
62
+ },
63
+ '&:hover, &:focus': {
64
+ backgroundColor: "transparent",
53
65
  color: tokens_1.colors.blueberry400,
54
- cursor: 'default',
55
- '&:after': {
56
- position: 'absolute',
57
- height: tokens_1.space.xxxs,
58
- borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
59
- backgroundColor: tokens_1.colors.blueberry400,
60
- bottom: 0,
61
- content: "''",
62
- left: 0,
63
- marginTop: '-2px',
64
- width: '100%',
65
- },
66
- '&:hover, &:focus': {
67
- backgroundColor: "transparent",
68
- color: tokens_1.colors.blueberry400,
69
- },
70
- };
71
- }
72
- return {};
73
- });
66
+ },
67
+ } }));
74
68
  var useTab = function (model, elemProps, ref) {
75
69
  if (elemProps === void 0) { elemProps = {}; }
76
70
  var _a = common_1.useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
package/dist/es6/tabs/lib/Tab.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmGD,eAAO,MAAM,GAAG,6DAad,CAAC"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}
package/dist/es6/tabs/lib/Tab.js CHANGED
@@ -37,31 +37,25 @@ var StyledButton = styled('button')(__assign(__assign(__assign(__assign({}, type
37
37
  cursor: 'auto',
38
38
  backgroundColor: "transparent",
39
39
  },
40
- } }), function (_a) {
41
- var isSelected = _a.isSelected;
42
- if (isSelected) {
43
- return {
40
+ }, '&[aria-selected=true]': {
41
+ color: colors.blueberry400,
42
+ cursor: 'default',
43
+ '&:after': {
44
+ position: 'absolute',
45
+ height: space.xxxs,
46
+ borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
47
+ backgroundColor: colors.blueberry400,
48
+ bottom: 0,
49
+ content: "''",
50
+ left: 0,
51
+ marginTop: '-2px',
52
+ width: '100%',
53
+ },
54
+ '&:hover, &:focus': {
55
+ backgroundColor: "transparent",
44
56
  color: colors.blueberry400,
45
- cursor: 'default',
46
- '&:after': {
47
- position: 'absolute',
48
- height: space.xxxs,
49
- borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
50
- backgroundColor: colors.blueberry400,
51
- bottom: 0,
52
- content: "''",
53
- left: 0,
54
- marginTop: '-2px',
55
- width: '100%',
56
- },
57
- '&:hover, &:focus': {
58
- backgroundColor: "transparent",
59
- color: colors.blueberry400,
60
- },
61
- };
62
- }
63
- return {};
64
- });
57
+ },
58
+ } }));
65
59
  var useTab = function (model, elemProps, ref) {
66
60
  if (elemProps === void 0) { elemProps = {}; }
67
61
  var _a = useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "5.2.9",
3
+ "version": "5.2.10",
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",
@@ -57,9 +57,9 @@
57
57
  "@popperjs/core": "^2.5.4",
58
58
  "@workday/canvas-colors-web": "^2.0.0",
59
59
  "@workday/canvas-depth-web": "^0.16.4",
60
- "@workday/canvas-kit-labs-react": "^5.2.9",
61
- "@workday/canvas-kit-popup-stack": "^5.2.9",
62
- "@workday/canvas-kit-preview-react": "^5.2.9",
60
+ "@workday/canvas-kit-labs-react": "^5.2.10",
61
+ "@workday/canvas-kit-popup-stack": "^5.2.10",
62
+ "@workday/canvas-kit-preview-react": "^5.2.10",
63
63
  "@workday/canvas-system-icons-web": "1.0.41",
64
64
  "@workday/design-assets-types": "^0.2.4",
65
65
  "chroma-js": "^2.1.0",
@@ -75,5 +75,5 @@
75
75
  "@workday/canvas-accent-icons-web": "^1.0.0",
76
76
  "@workday/canvas-applet-icons-web": "^0.17.50"
77
77
  },
78
- "gitHead": "137f94c166537ed7a7d1d53acc99177b4fd80a06"
78
+ "gitHead": "418af7c145eaed430928c3abb407a211b4132131"
79
79
  }
package/tabs/lib/Tab.tsx CHANGED
@@ -63,72 +63,66 @@ export interface TabProps {
63
63
  tabIndex?: number;
64
64
  }
65
65
 
66
- const StyledButton = styled('button')<{isSelected: boolean} & StyledType>(
67
- {
68
- ...type.levels.subtext.large,
69
- fontWeight: type.properties.fontWeights.medium,
70
- border: 'none',
71
- backgroundColor: 'transparent',
72
- flex: '0 0 auto',
73
- maxWidth: '280px',
74
- padding: space.s,
75
- boxSizing: 'border-box',
76
- cursor: 'pointer',
77
- color: colors.licorice300,
78
- position: 'relative',
79
- marginLeft: `${space.xxxs}`,
80
- borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
81
- transition: 'background 150ms ease, color 150ms ease',
82
-
83
- '&:first-of-type': {
84
- marginLeft: 0,
85
- },
66
+ const StyledButton = styled('button')<{isSelected: boolean} & StyledType>({
67
+ ...type.levels.subtext.large,
68
+ fontWeight: type.properties.fontWeights.medium,
69
+ border: 'none',
70
+ backgroundColor: 'transparent',
71
+ flex: '0 0 auto',
72
+ maxWidth: '280px',
73
+ padding: space.s,
74
+ boxSizing: 'border-box',
75
+ cursor: 'pointer',
76
+ color: colors.licorice300,
77
+ position: 'relative',
78
+ marginLeft: `${space.xxxs}`,
79
+ borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
80
+ transition: 'background 150ms ease, color 150ms ease',
81
+
82
+ '&:first-of-type': {
83
+ marginLeft: 0,
84
+ },
86
85
 
87
- ...hideMouseFocus,
86
+ ...hideMouseFocus,
88
87
 
89
- '&:hover, &:focus': {
90
- backgroundColor: colors.soap200,
91
- color: colors.blackPepper400,
92
- },
88
+ '&:hover, &:focus': {
89
+ backgroundColor: colors.soap200,
90
+ color: colors.blackPepper400,
91
+ },
93
92
 
94
- '&:focus': {
95
- outline: `none`,
96
- ...focusRing({inset: 'outer', width: 0, separation: 2}),
93
+ '&:focus': {
94
+ outline: `none`,
95
+ ...focusRing({inset: 'outer', width: 0, separation: 2}),
96
+ },
97
+
98
+ '&:disabled': {
99
+ color: colors.licorice100,
100
+ '&:hover': {
101
+ cursor: 'auto',
102
+ backgroundColor: `transparent`,
97
103
  },
104
+ },
98
105
 
99
- '&:disabled': {
100
- color: colors.licorice100,
101
- '&:hover': {
102
- cursor: 'auto',
103
- backgroundColor: `transparent`,
104
- },
106
+ '&[aria-selected=true]': {
107
+ color: colors.blueberry400,
108
+ cursor: 'default',
109
+ '&:after': {
110
+ position: 'absolute',
111
+ height: space.xxxs,
112
+ borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
113
+ backgroundColor: colors.blueberry400,
114
+ bottom: 0,
115
+ content: `''`,
116
+ left: 0,
117
+ marginTop: '-2px',
118
+ width: '100%',
119
+ },
120
+ '&:hover, &:focus': {
121
+ backgroundColor: `transparent`,
122
+ color: colors.blueberry400,
105
123
  },
106
124
  },
107
- ({isSelected}) => {
108
- if (isSelected) {
109
- return {
110
- color: colors.blueberry400,
111
- cursor: 'default',
112
- '&:after': {
113
- position: 'absolute',
114
- height: space.xxxs,
115
- borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
116
- backgroundColor: colors.blueberry400,
117
- bottom: 0,
118
- content: `''`,
119
- left: 0,
120
- marginTop: '-2px',
121
- width: '100%',
122
- },
123
- '&:hover, &:focus': {
124
- backgroundColor: `transparent`,
125
- color: colors.blueberry400,
126
- },
127
- };
128
- }
129
- return {};
130
- }
131
- );
125
+ });
132
126
 
133
127
  const useTab = (
134
128
  model: TabsModel,