@zohodesk/components 1.0.0-alpha-255 → 1.0.0-alpha-256

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 (14) hide show
  1. package/README.md +8 -0
  2. package/es/Button/Button.module.css +7 -4
  3. package/es/Button/props/defaultProps.js +2 -1
  4. package/es/Button/props/propTypes.js +2 -1
  5. package/es/Switch/Switch.js +5 -7
  6. package/es/Tab/Tab.js +1 -1
  7. package/es/Tab/Tabs.js +1 -1
  8. package/lib/Button/Button.module.css +7 -4
  9. package/lib/Button/props/defaultProps.js +2 -1
  10. package/lib/Button/props/propTypes.js +2 -1
  11. package/lib/Switch/Switch.js +5 -7
  12. package/lib/Tab/Tab.js +1 -1
  13. package/lib/Tab/Tabs.js +1 -1
  14. package/package.json +24 -9
package/README.md CHANGED
@@ -32,6 +32,14 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.0.0-alpha-256
36
+
37
+ - **Button** - Safari browser focus issue fix and `customProps` validation.
38
+
39
+ - **Switch** - Click handling issue fix.
40
+
41
+ - **Tabs, Tab** - Screen Reader fix.
42
+
35
43
  # 1.0.0-alpha-255
36
44
 
37
45
  - **CalenderView, DateTime** - Today and selected date issue fix.
package/es/Button/Button.module.css CHANGED
@@ -24,23 +24,26 @@
24
24
  /* button success status default variable */
25
25
  --button_success_border_color: var(--zdt_button_success_default_border);
26
26
  }
27
- .default {
27
+ .native {
28
28
  composes: varClass;
29
- transition: all var(--zd_transition2) ease 0s;
29
+ /* transition: all var(--zd_transition2) ease 0s; */
30
30
  letter-spacing: var(--button_letter_spacing);
31
31
  opacity: var(--button_opacity);
32
+ transition-property: background-color, color, border;
33
+ transition-duration: var(--zd_transition2);
34
+ transition-timing-function: ease;
32
35
  border: 0;
33
36
  cursor: var(--button_cursor);
34
37
  }
35
38
 
36
- .default:disabled {
39
+ .native:disabled {
37
40
  pointer-events: none;
38
41
  --button_cursor: not-allowed;
39
42
  --button_opacity: 0.4;
40
43
  }
41
44
 
42
45
  .container {
43
- composes: default;
46
+ composes: native;
44
47
  composes: dotted from '../common/common.module.css';
45
48
  position: relative;
46
49
  font-size: var(--button_font_size);
package/es/Button/props/defaultProps.js CHANGED
@@ -11,5 +11,6 @@ export const defaultProps = {
11
11
  size: 'medium',
12
12
  status: 'none',
13
13
  text: 'Button',
14
- customClass: {}
14
+ customClass: {},
15
+ customProps: {}
15
16
  };
package/es/Button/props/propTypes.js CHANGED
@@ -18,5 +18,6 @@ export const propTypes = {
18
18
  customButton: PropTypes.string,
19
19
  customStatus: PropTypes.string,
20
20
  customStatusSize: PropTypes.string
21
- })
21
+ }),
22
+ customProps: PropTypes.object
22
23
  };
package/es/Switch/Switch.js CHANGED
@@ -55,8 +55,7 @@ export default class Switch extends React.Component {
55
55
  "data-title": disabled ? disableTitle : title,
56
56
  "aria-checked": checked,
57
57
  role: "switch",
58
- tabIndex: isReadOnly || disabled ? '-1' : '0',
59
- onClick: !disabled || !isReadOnly ? this.onChange : null
58
+ tabIndex: isReadOnly || disabled ? '-1' : '0'
60
59
  }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
61
60
  className: `${style[size]} ${customSwitchSize}`
62
61
  }, /*#__PURE__*/React.createElement("input", {
@@ -67,8 +66,8 @@ export default class Switch extends React.Component {
67
66
  value: value,
68
67
  checked: checked,
69
68
  disabled: disabled,
70
- readOnly: isReadOnly
71
- // onClick={!disabled || !isReadOnly ? this.onChange : null}
69
+ readOnly: isReadOnly,
70
+ onClick: !disabled || !isReadOnly ? this.onChange : null
72
71
  }), /*#__PURE__*/React.createElement("label", {
73
72
  htmlFor: id,
74
73
  "data-id": dataId,
@@ -78,9 +77,8 @@ export default class Switch extends React.Component {
78
77
  palette: labelPalette,
79
78
  id: id,
80
79
  size: labelSize,
81
- type: "subtitle"
82
- // onClick={!disabled || !isReadOnly ? this.onChange : null}
83
- ,
80
+ type: "subtitle",
81
+ onClick: !disabled || !isReadOnly ? this.onChange : null,
84
82
  customClass: customLabel
85
83
  }, LabelProps)));
86
84
  }
package/es/Tab/Tab.js CHANGED
@@ -80,7 +80,7 @@ export default function Tab(_ref) {
80
80
  adjust: true,
81
81
  href: isLink ? href : undefined,
82
82
  "data-key": id,
83
- role: "tab",
83
+ role: "link",
84
84
  "aria-controls": id,
85
85
  "aria-selected": isActive ? true : false,
86
86
  tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
package/es/Tab/Tabs.js CHANGED
@@ -432,7 +432,7 @@ class Tabs extends React.Component {
432
432
  eleRef: getTargetRef
433
433
  }, MoreButtonProps, {
434
434
  "aria-label": "MoreTabs",
435
- role: "tab",
435
+ role: "link",
436
436
  tagName: "button"
437
437
  }), /*#__PURE__*/React.createElement(Icon, {
438
438
  name: iconName,
package/lib/Button/Button.module.css CHANGED
@@ -24,23 +24,26 @@
24
24
  /* button success status default variable */
25
25
  --button_success_border_color: var(--zdt_button_success_default_border);
26
26
  }
27
- .default {
27
+ .native {
28
28
  composes: varClass;
29
- transition: all var(--zd_transition2) ease 0s;
29
+ /* transition: all var(--zd_transition2) ease 0s; */
30
30
  letter-spacing: var(--button_letter_spacing);
31
31
  opacity: var(--button_opacity);
32
+ transition-property: background-color, color, border;
33
+ transition-duration: var(--zd_transition2);
34
+ transition-timing-function: ease;
32
35
  border: 0;
33
36
  cursor: var(--button_cursor);
34
37
  }
35
38
 
36
- .default:disabled {
39
+ .native:disabled {
37
40
  pointer-events: none;
38
41
  --button_cursor: not-allowed;
39
42
  --button_opacity: 0.4;
40
43
  }
41
44
 
42
45
  .container {
43
- composes: default;
46
+ composes: native;
44
47
  composes: dotted from '../common/common.module.css';
45
48
  position: relative;
46
49
  font-size: var(--button_font_size);
package/lib/Button/props/defaultProps.js CHANGED
@@ -17,6 +17,7 @@ var defaultProps = {
17
17
  size: 'medium',
18
18
  status: 'none',
19
19
  text: 'Button',
20
- customClass: {}
20
+ customClass: {},
21
+ customProps: {}
21
22
  };
22
23
  exports.defaultProps = defaultProps;
package/lib/Button/props/propTypes.js CHANGED
@@ -25,6 +25,7 @@ var propTypes = {
25
25
  customButton: _propTypes["default"].string,
26
26
  customStatus: _propTypes["default"].string,
27
27
  customStatusSize: _propTypes["default"].string
28
- })
28
+ }),
29
+ customProps: _propTypes["default"].object
29
30
  };
30
31
  exports.propTypes = propTypes;
package/lib/Switch/Switch.js CHANGED
@@ -82,8 +82,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
82
82
  "data-title": disabled ? disableTitle : title,
83
83
  "aria-checked": checked,
84
84
  role: "switch",
85
- tabIndex: isReadOnly || disabled ? '-1' : '0',
86
- onClick: !disabled || !isReadOnly ? this.onChange : null
85
+ tabIndex: isReadOnly || disabled ? '-1' : '0'
87
86
  }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
88
87
  className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
89
88
  }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -94,8 +93,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
94
93
  value: value,
95
94
  checked: checked,
96
95
  disabled: disabled,
97
- readOnly: isReadOnly
98
- // onClick={!disabled || !isReadOnly ? this.onChange : null}
96
+ readOnly: isReadOnly,
97
+ onClick: !disabled || !isReadOnly ? this.onChange : null
99
98
  }), /*#__PURE__*/_react["default"].createElement("label", {
100
99
  htmlFor: id,
101
100
  "data-id": dataId,
@@ -105,9 +104,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
105
104
  palette: labelPalette,
106
105
  id: id,
107
106
  size: labelSize,
108
- type: "subtitle"
109
- // onClick={!disabled || !isReadOnly ? this.onChange : null}
110
- ,
107
+ type: "subtitle",
108
+ onClick: !disabled || !isReadOnly ? this.onChange : null,
111
109
  customClass: customLabel
112
110
  }, LabelProps)));
113
111
  }
package/lib/Tab/Tab.js CHANGED
@@ -89,7 +89,7 @@ function Tab(_ref) {
89
89
  adjust: true,
90
90
  href: isLink ? href : undefined,
91
91
  "data-key": id,
92
- role: "tab",
92
+ role: "link",
93
93
  "aria-controls": id,
94
94
  "aria-selected": isActive ? true : false,
95
95
  tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
package/lib/Tab/Tabs.js CHANGED
@@ -467,7 +467,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
467
467
  eleRef: getTargetRef
468
468
  }, MoreButtonProps, {
469
469
  "aria-label": "MoreTabs",
470
- role: "tab",
470
+ role: "link",
471
471
  tagName: "button"
472
472
  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
473
473
  name: iconName,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-alpha-255",
3
+ "version": "1.0.0-alpha-256",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -48,7 +48,7 @@
48
48
  "velocity-react": "1.4.3",
49
49
  "react-sortable-hoc": "^0.8.3",
50
50
  "@zohodesk/svg": "1.0.0-beta.48",
51
- "@zohodesk/a11y": "1.3.4"
51
+ "@zohodesk/a11y": "1.3.7"
52
52
  },
53
53
  "dependencies": {
54
54
  "hoist-non-react-statics": "3.0.1",
@@ -63,21 +63,36 @@
63
63
  "@zohodesk/virtualizer": "1.0.3",
64
64
  "velocity-react": "1.4.3",
65
65
  "react-sortable-hoc": "^0.8.3",
66
- "@zohodesk/a11y": "1.3.4"
66
+ "@zohodesk/a11y": "1.3.7"
67
67
  },
68
68
  "react-cli": {
69
69
  "preprocess": {
70
70
  "runner": "./preprocess/index.js"
71
71
  },
72
+ "css":{
73
+ "plugins": {
74
+ "hasRTL": true
75
+ },
76
+ "exclude": {
77
+ "rtl": [
78
+ "@zohodesk/icons",
79
+ "@zohodesk/variables"
80
+ ]
81
+ }
82
+ },
72
83
  "docs": {
84
+ "plugins": {
85
+ "hasRTL": true
86
+ },
87
+ "exclude": {
88
+ "rtl": [
89
+ "@zohodesk/icons",
90
+ "@zohodesk/variables"
91
+ ]
92
+ },
73
93
  "disableES5Transpile": true,
74
94
  "componentFolder": "./src",
75
- "cssUniqueness": "false",
76
- "rtlExclude": [
77
- "@zohodesk/icons",
78
- "@zohodesk/variables"
79
- ],
80
- "hasRTL": true
95
+ "cssUniqueness": "false"
81
96
  }
82
97
  }
83
98
  }