@workday/canvas-kit-react 7.3.1 → 7.3.3

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 (8) hide show
  1. package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts +3 -1
  2. package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map +1 -1
  3. package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js +11 -2
  4. package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts +3 -1
  5. package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts.map +1 -1
  6. package/dist/es6/segmented-control/lib/SegmentedControlButton.js +12 -3
  7. package/package.json +3 -3
  8. package/segmented-control/lib/SegmentedControlButton.tsx +24 -5
package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts CHANGED
@@ -1,8 +1,10 @@
1
+ import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
1
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
2
- export interface SegmentedControlButtonProps {
3
+ export interface SegmentedControlButtonProps extends ButtonContainerProps {
3
4
  toggled?: boolean;
4
5
  icon: CanvasSystemIcon;
5
6
  value?: string | number;
7
+ size?: 'small' | 'medium' | 'large';
6
8
  }
7
9
  export declare const SegmentedControlButton: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
8
10
  //# sourceMappingURL=SegmentedControlButton.d.ts.map
package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA4E9D,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}
1
+ {"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,oBAAoB,EACrB,MAAM,kCAAkC,CAAC;AAO1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAyF9D,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}
package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js CHANGED
@@ -55,11 +55,17 @@ var getIconButtonColors = function (toggled) {
55
55
  },
56
56
  };
57
57
  };
58
+ var getSizeStyles = function (size) {
59
+ var sizeValue = size === 'large' ? "calc(" + tokens_1.space.xl + " + " + tokens_1.space.xxs + ")" : size === 'small' ? tokens_1.space.l : tokens_1.space.xl;
60
+ return {
61
+ width: sizeValue,
62
+ height: sizeValue,
63
+ };
64
+ };
58
65
  var StyledButton = common_1.styled(button_1.BaseButton)({
59
66
  borderRadius: tokens_1.borderRadius.zero,
60
67
  border: "1px solid " + tokens_1.colors.soap500,
61
68
  borderLeft: 'none',
62
- minWidth: tokens_1.space.xl,
63
69
  '&:first-of-type': {
64
70
  borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
65
71
  borderLeft: "1px solid " + tokens_1.colors.soap500,
@@ -94,12 +100,15 @@ var StyledButton = common_1.styled(button_1.BaseButton)({
94
100
  },
95
101
  },
96
102
  });
103
+ }, function (_a) {
104
+ var size = _a.size;
105
+ return (__assign({}, getSizeStyles(size)));
97
106
  });
98
107
  exports.SegmentedControlButton = common_1.createComponent('button')({
99
108
  displayName: 'Button',
100
109
  Component: function (_a, ref, Element) {
101
110
  var value = _a.value, icon = _a.icon, toggled = _a.toggled, props = __rest(_a, ["value", "icon", "toggled"]);
102
111
  return (react_1.default.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
103
- react_1.default.createElement(button_1.BaseButton.Icon, { size: "large", icon: icon })));
112
+ react_1.default.createElement(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon })));
104
113
  },
105
114
  });
package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts CHANGED
@@ -1,8 +1,10 @@
1
+ import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
1
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
2
- export interface SegmentedControlButtonProps {
3
+ export interface SegmentedControlButtonProps extends ButtonContainerProps {
3
4
  toggled?: boolean;
4
5
  icon: CanvasSystemIcon;
5
6
  value?: string | number;
7
+ size?: 'small' | 'medium' | 'large';
6
8
  }
7
9
  export declare const SegmentedControlButton: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
8
10
  //# sourceMappingURL=SegmentedControlButton.d.ts.map
package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA4E9D,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}
1
+ {"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,oBAAoB,EACrB,MAAM,kCAAkC,CAAC;AAO1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAyF9D,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}
package/dist/es6/segmented-control/lib/SegmentedControlButton.js CHANGED
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import React from 'react';
24
- import { BaseButton } from '@workday/canvas-kit-react/button';
24
+ import { BaseButton, } from '@workday/canvas-kit-react/button';
25
25
  import { createComponent, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
26
26
  import { colors, borderRadius, space } from '@workday/canvas-kit-react/tokens';
27
27
  var getIconButtonColors = function (toggled) {
@@ -49,11 +49,17 @@ var getIconButtonColors = function (toggled) {
49
49
  },
50
50
  };
51
51
  };
52
+ var getSizeStyles = function (size) {
53
+ var sizeValue = size === 'large' ? "calc(" + space.xl + " + " + space.xxs + ")" : size === 'small' ? space.l : space.xl;
54
+ return {
55
+ width: sizeValue,
56
+ height: sizeValue,
57
+ };
58
+ };
52
59
  var StyledButton = styled(BaseButton)({
53
60
  borderRadius: borderRadius.zero,
54
61
  border: "1px solid " + colors.soap500,
55
62
  borderLeft: 'none',
56
- minWidth: space.xl,
57
63
  '&:first-of-type': {
58
64
  borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
59
65
  borderLeft: "1px solid " + colors.soap500,
@@ -88,12 +94,15 @@ var StyledButton = styled(BaseButton)({
88
94
  },
89
95
  },
90
96
  });
97
+ }, function (_a) {
98
+ var size = _a.size;
99
+ return (__assign({}, getSizeStyles(size)));
91
100
  });
92
101
  export var SegmentedControlButton = createComponent('button')({
93
102
  displayName: 'Button',
94
103
  Component: function (_a, ref, Element) {
95
104
  var value = _a.value, icon = _a.icon, toggled = _a.toggled, props = __rest(_a, ["value", "icon", "toggled"]);
96
105
  return (React.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
97
- React.createElement(BaseButton.Icon, { size: "large", icon: icon })));
106
+ React.createElement(BaseButton.Icon, { size: props.size || 'large', icon: icon })));
98
107
  },
99
108
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.3.1",
3
+ "version": "7.3.3",
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",
@@ -49,7 +49,7 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^7.3.1",
52
+ "@workday/canvas-kit-popup-stack": "^7.3.3",
53
53
  "@workday/canvas-system-icons-web": "^3.0.0",
54
54
  "@workday/design-assets-types": "^0.2.8",
55
55
  "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
68
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
69
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
70
70
  },
71
- "gitHead": "41e6eb9532da50e341fe07b805becc2516f9d420"
71
+ "gitHead": "4cc866b8d92cc55134caf83716359ddd5f7c8d67"
72
72
  }
package/segmented-control/lib/SegmentedControlButton.tsx CHANGED
@@ -1,5 +1,10 @@
1
1
  import React from 'react';
2
- import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
2
+ import {
3
+ BaseButton,
4
+ ButtonColors,
5
+ ButtonSizes,
6
+ ButtonContainerProps,
7
+ } from '@workday/canvas-kit-react/button';
3
8
  import {
4
9
  createComponent,
5
10
  mouseFocusBehavior,
@@ -35,12 +40,22 @@ const getIconButtonColors = (toggled?: boolean): ButtonColors => {
35
40
  };
36
41
  };
37
42
 
38
- const StyledButton = styled(BaseButton)<StyledType>(
43
+ const getSizeStyles = (size?: ButtonSizes) => {
44
+ const sizeValue =
45
+ size === 'large' ? `calc(${space.xl} + ${space.xxs})` : size === 'small' ? space.l : space.xl;
46
+
47
+ return {
48
+ width: sizeValue,
49
+ height: sizeValue,
50
+ };
51
+ };
52
+
53
+ const StyledButton = styled(BaseButton)<ButtonContainerProps & StyledType>(
39
54
  {
40
55
  borderRadius: borderRadius.zero,
41
56
  border: `1px solid ${colors.soap500}`,
42
57
  borderLeft: 'none',
43
- minWidth: space.xl,
58
+
44
59
  '&:first-of-type': {
45
60
  borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
46
61
  borderLeft: `1px solid ${colors.soap500}`,
@@ -79,13 +94,17 @@ const StyledButton = styled(BaseButton)<StyledType>(
79
94
  background: theme.canvas.palette.primary.main,
80
95
  },
81
96
  },
97
+ }),
98
+ ({size}: ButtonContainerProps) => ({
99
+ ...getSizeStyles(size),
82
100
  })
83
101
  );
84
102
 
85
- export interface SegmentedControlButtonProps {
103
+ export interface SegmentedControlButtonProps extends ButtonContainerProps {
86
104
  toggled?: boolean;
87
105
  icon: CanvasSystemIcon;
88
106
  value?: string | number;
107
+ size?: 'small' | 'medium' | 'large';
89
108
  }
90
109
 
91
110
  export const SegmentedControlButton = createComponent('button')({
@@ -101,7 +120,7 @@ export const SegmentedControlButton = createComponent('button')({
101
120
  ref={ref}
102
121
  {...props}
103
122
  >
104
- <BaseButton.Icon size="large" icon={icon} />
123
+ <BaseButton.Icon size={props.size || 'large'} icon={icon} />
105
124
  </StyledButton>
106
125
  );
107
126
  },