@dhis2-ui/chip 9.3.0 → 9.4.0-alpha.2

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 (10) hide show
  1. package/build/cjs/chip.js +19 -9
  2. package/build/cjs/chip.stories.js +9 -1
  3. package/build/cjs/icon.js +3 -3
  4. package/build/cjs/remove.js +2 -2
  5. package/build/es/chip.js +18 -9
  6. package/build/es/chip.stories.js +5 -0
  7. package/build/es/icon.js +3 -3
  8. package/build/es/remove.js +2 -2
  9. package/package.json +2 -2
  10. package/types/index.d.ts +10 -2
package/build/cjs/chip.js CHANGED
@@ -23,7 +23,11 @@ var _remove = require("./remove.js");
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
26
+ const DEFAULT_INLINE_MARGIN = '4';
27
+
26
28
  const Chip = _ref => {
29
+ var _ref2, _ref3, _ref4, _ref5;
30
+
27
31
  let {
28
32
  selected,
29
33
  dense,
@@ -39,7 +43,9 @@ const Chip = _ref => {
39
43
  marginBottom,
40
44
  marginLeft,
41
45
  marginRight,
42
- marginTop
46
+ marginTop,
47
+ marginInlineStart,
48
+ marginInlineEnd
43
49
  } = _ref;
44
50
  return /*#__PURE__*/_react.default.createElement("span", {
45
51
  onClick: e => {
@@ -48,7 +54,7 @@ const Chip = _ref => {
48
54
  }
49
55
  },
50
56
  "data-test": dataTest,
51
- className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["2231360490", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + ((0, _classnames.default)(className, {
57
+ className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["1687525377", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + ((0, _classnames.default)(className, {
52
58
  selected,
53
59
  dense,
54
60
  disabled,
@@ -66,17 +72,15 @@ const Chip = _ref => {
66
72
  id: "3780556490",
67
73
  dynamic: [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]
68
74
  }, ["span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:".concat(_uiConstants.colors.grey200, ";font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(_uiConstants.colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.theme.secondary600, ";font-weight:500;}"), ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", ".selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.white, ";}"), ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
69
- id: "2231360490",
70
- dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
71
- }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-left: ".concat(marginLeft, "px;"), " ").concat(marginRight && "margin-right: ".concat(marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
75
+ id: "1687525377",
76
+ dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]
77
+ }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " margin-inline-start:").concat((_ref4 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref4 !== void 0 ? _ref4 : DEFAULT_INLINE_MARGIN, "px;margin-inline-end:").concat((_ref5 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref5 !== void 0 ? _ref5 : DEFAULT_INLINE_MARGIN, "px;").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
72
78
  };
73
79
 
74
80
  exports.Chip = Chip;
75
81
  Chip.defaultProps = {
76
82
  dataTest: 'dhis2-uicore-chip',
77
83
  marginBottom: 4,
78
- marginLeft: 4,
79
- marginRight: 4,
80
84
  marginTop: 4
81
85
  };
82
86
  Chip.propTypes = {
@@ -91,10 +95,16 @@ Chip.propTypes = {
91
95
  /** `margin-bottom` value, applied in `px` */
92
96
  marginBottom: _propTypes.default.number,
93
97
 
94
- /** `margin-left` value, applied in `px` */
98
+ /** `margin-inline-end` value, applied in `px` */
99
+ marginInlineEnd: _propTypes.default.number,
100
+
101
+ /** `margin-inline-start` value, applied in `px` */
102
+ marginInlineStart: _propTypes.default.number,
103
+
104
+ /** `margin-inline-start` value, applied in `px` */
95
105
  marginLeft: _propTypes.default.number,
96
106
 
97
- /** `margin-right` value, applied in `px` */
107
+ /** `margin-inline-end` value, applied in `px` */
98
108
  marginRight: _propTypes.default.number,
99
109
 
100
110
  /** `margin-top` value, applied in `px` */
package/build/cjs/chip.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.Selected = exports.Removable = exports.Overflow = exports.IconContent = exports.Icon = exports.DenseRemoveable = exports.Dense = exports.Default = void 0;
6
+ exports.default = exports.Selected = exports.Removable = exports.RTLRemovable = exports.Overflow = exports.IconContent = exports.Icon = exports.DenseRemoveable = exports.Dense = exports.Default = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -134,4 +134,12 @@ exports.DenseRemoveable = DenseRemoveable;
134
134
  DenseRemoveable.args = { ...Dense.args,
135
135
  ...Removable.args,
136
136
  children: 'Removable and dense'
137
+ };
138
+
139
+ const RTLRemovable = args => /*#__PURE__*/_react.default.createElement("div", {
140
+ dir: "rtl"
141
+ }, /*#__PURE__*/_react.default.createElement(_chip.Chip, args, "RTL removable"));
142
+
143
+ exports.RTLRemovable = RTLRemovable;
144
+ RTLRemovable.args = { ...Removable.args
137
145
  };
package/build/cjs/icon.js CHANGED
@@ -27,11 +27,11 @@ const Icon = _ref => {
27
27
 
28
28
  return /*#__PURE__*/_react.default.createElement("span", {
29
29
  "data-test": dataTest,
30
- className: _style.default.dynamic([["2159848327", [_uiConstants.spacers.dp4]]])
30
+ className: _style.default.dynamic([["1889825154", [_uiConstants.spacers.dp4]]])
31
31
  }, icon, /*#__PURE__*/_react.default.createElement(_style.default, {
32
- id: "2159848327",
32
+ id: "1889825154",
33
33
  dynamic: [_uiConstants.spacers.dp4]
34
- }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-left:".concat(_uiConstants.spacers.dp4, ";margin-right:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
34
+ }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";margin-inline-end:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
35
35
  };
36
36
 
37
37
  exports.Icon = Icon;
package/build/cjs/remove.js CHANGED
@@ -34,8 +34,8 @@ function CancelOutline(_ref) {
34
34
  CancelOutline.propTypes = {
35
35
  className: _propTypes.default.string
36
36
  };
37
- const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}", "span.jsx-1924786287:hover{background:".concat(_uiConstants.colors.grey400, ";}")];
38
- containerStyle.__hash = "1924786287";
37
+ const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", "span.jsx-2824632002:hover{background:".concat(_uiConstants.colors.grey400, ";}")];
38
+ containerStyle.__hash = "2824632002";
39
39
  const removeIcon = {
40
40
  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
41
41
  id: "2658726446"
package/build/es/chip.js CHANGED
@@ -6,8 +6,11 @@ import React from 'react';
6
6
  import { Content } from './content.js';
7
7
  import { Icon } from './icon.js';
8
8
  import { Remove } from './remove.js';
9
+ const DEFAULT_INLINE_MARGIN = '4';
9
10
 
10
11
  const Chip = _ref => {
12
+ var _ref2, _ref3, _ref4, _ref5;
13
+
11
14
  let {
12
15
  selected,
13
16
  dense,
@@ -23,7 +26,9 @@ const Chip = _ref => {
23
26
  marginBottom,
24
27
  marginLeft,
25
28
  marginRight,
26
- marginTop
29
+ marginTop,
30
+ marginInlineStart,
31
+ marginInlineEnd
27
32
  } = _ref;
28
33
  return /*#__PURE__*/React.createElement("span", {
29
34
  onClick: e => {
@@ -32,7 +37,7 @@ const Chip = _ref => {
32
37
  }
33
38
  },
34
39
  "data-test": dataTest,
35
- className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["2231360490", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + (cx(className, {
40
+ className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["1687525377", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + (cx(className, {
36
41
  selected,
37
42
  dense,
38
43
  disabled,
@@ -50,16 +55,14 @@ const Chip = _ref => {
50
55
  id: "3780556490",
51
56
  dynamic: [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]
52
57
  }, ["span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:".concat(colors.grey200, ";font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(theme.secondary600, ";font-weight:500;}"), ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", ".selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:".concat(colors.white, ";}"), ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
53
- id: "2231360490",
54
- dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
55
- }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-left: ".concat(marginLeft, "px;"), " ").concat(marginRight && "margin-right: ".concat(marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
58
+ id: "1687525377",
59
+ dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]
60
+ }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " margin-inline-start:").concat((_ref4 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref4 !== void 0 ? _ref4 : DEFAULT_INLINE_MARGIN, "px;margin-inline-end:").concat((_ref5 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref5 !== void 0 ? _ref5 : DEFAULT_INLINE_MARGIN, "px;").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
56
61
  };
57
62
 
58
63
  Chip.defaultProps = {
59
64
  dataTest: 'dhis2-uicore-chip',
60
65
  marginBottom: 4,
61
- marginLeft: 4,
62
- marginRight: 4,
63
66
  marginTop: 4
64
67
  };
65
68
  Chip.propTypes = {
@@ -74,10 +77,16 @@ Chip.propTypes = {
74
77
  /** `margin-bottom` value, applied in `px` */
75
78
  marginBottom: PropTypes.number,
76
79
 
77
- /** `margin-left` value, applied in `px` */
80
+ /** `margin-inline-end` value, applied in `px` */
81
+ marginInlineEnd: PropTypes.number,
82
+
83
+ /** `margin-inline-start` value, applied in `px` */
84
+ marginInlineStart: PropTypes.number,
85
+
86
+ /** `margin-inline-start` value, applied in `px` */
78
87
  marginLeft: PropTypes.number,
79
88
 
80
- /** `margin-right` value, applied in `px` */
89
+ /** `margin-inline-end` value, applied in `px` */
81
90
  marginRight: PropTypes.number,
82
91
 
83
92
  /** `margin-top` value, applied in `px` */
package/build/es/chip.stories.js CHANGED
@@ -111,4 +111,9 @@ export const DenseRemoveable = Template.bind({});
111
111
  DenseRemoveable.args = { ...Dense.args,
112
112
  ...Removable.args,
113
113
  children: 'Removable and dense'
114
+ };
115
+ export const RTLRemovable = args => /*#__PURE__*/React.createElement("div", {
116
+ dir: "rtl"
117
+ }, /*#__PURE__*/React.createElement(Chip, args, "RTL removable"));
118
+ RTLRemovable.args = { ...Removable.args
114
119
  };
package/build/es/icon.js CHANGED
@@ -14,11 +14,11 @@ export const Icon = _ref => {
14
14
 
15
15
  return /*#__PURE__*/React.createElement("span", {
16
16
  "data-test": dataTest,
17
- className: _JSXStyle.dynamic([["2159848327", [spacers.dp4]]])
17
+ className: _JSXStyle.dynamic([["1889825154", [spacers.dp4]]])
18
18
  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
19
- id: "2159848327",
19
+ id: "1889825154",
20
20
  dynamic: [spacers.dp4]
21
- }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-left:".concat(spacers.dp4, ";margin-right:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
21
+ }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:".concat(spacers.dp4, ";margin-inline-end:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
22
22
  };
23
23
  Icon.propTypes = {
24
24
  dataTest: PropTypes.string.isRequired,
package/build/es/remove.js CHANGED
@@ -22,8 +22,8 @@ function CancelOutline(_ref) {
22
22
  CancelOutline.propTypes = {
23
23
  className: PropTypes.string
24
24
  };
25
- const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}", "span.jsx-1924786287:hover{background:".concat(colors.grey400, ";}")];
26
- containerStyle.__hash = "1924786287";
25
+ const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", "span.jsx-2824632002:hover{background:".concat(colors.grey400, ";}")];
26
+ containerStyle.__hash = "2824632002";
27
27
  const removeIcon = {
28
28
  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
29
29
  id: "2658726446"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/chip",
3
- "version": "9.3.0",
3
+ "version": "9.4.0-alpha.2",
4
4
  "description": "UI Chip",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2/ui-constants": "9.3.0",
36
+ "@dhis2/ui-constants": "9.4.0-alpha.2",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2"
39
39
  },
package/types/index.d.ts CHANGED
@@ -13,13 +13,21 @@ export interface ChipProps {
13
13
  */
14
14
  marginBottom?: number
15
15
  /**
16
- * `margin-left` value, applied in `px`
16
+ * `margin-inline-start` value, applied in `px` (if marginInlineStart not provided)
17
17
  */
18
18
  marginLeft?: number
19
19
  /**
20
- * `margin-right` value, applied in `px`
20
+ * `margin-inline-end` value, applied in `px` (if marginInlineEnd not provided)
21
21
  */
22
22
  marginRight?: number
23
+ /**
24
+ * `margin-inline-start` value, applied in `px`
25
+ */
26
+ marginInlineStart?: number
27
+ /**
28
+ * `margin-inline-end` value, applied in `px`
29
+ */
30
+ marginInlineEnd?: number
23
31
  /**
24
32
  * `margin-top` value, applied in `px`
25
33
  */