@zohodesk/dot 1.0.0-temp-187.18 → 1.0.0-temp-187.19

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 (5) hide show
  1. package/es/list/status/StatusListItem/StatusListItem.js +1 -1
  2. package/es/list/status/StatusListItem/StatusListItem.module.css +39 -14
  3. package/lib/list/status/StatusListItem/StatusListItem.js +1 -1
  4. package/lib/list/status/StatusListItem/StatusListItem.module.css +39 -14
  5. package/package.json +1 -1
package/es/list/status/StatusListItem/StatusListItem.js CHANGED
@@ -90,7 +90,7 @@ export default class StatusListItem extends React.Component {
90
90
  "aria-label": ariaLabel,
91
91
  "data-a11y-inset-focus": insetFocus,
92
92
  isCover: false,
93
- align: "baseline",
93
+ align: "center",
94
94
  alignBox: "row",
95
95
  className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
96
96
  dataId: String(value).replace("'", '_'),
package/es/list/status/StatusListItem/StatusListItem.module.css CHANGED
@@ -1,9 +1,16 @@
1
+ .varClass {
2
+ --statuslistitem_multiline_lineheight: 1.5385;
3
+ --statuslistitem_font_size: var(--zd_font_size13);
4
+ --statuslistitem_min_height: var(--zd_size35);
5
+ }
6
+
1
7
  .list {
8
+ composes: varClass;
2
9
  color: var(--zdt_statuslistitem_list_text);
3
- font-size: var(--zd_font_size13) ;
10
+ font-size: var(--statuslistitem_font_size);
4
11
  position: relative;
5
12
  list-style: none;
6
- min-height: var(--zd_size35) ;
13
+ min-height: var(--statuslistitem_min_height);
7
14
  cursor: pointer;
8
15
  }
9
16
  [dir=ltr] .withBorder {
@@ -88,27 +95,45 @@
88
95
  padding-left: var(--zd_size39) ;
89
96
  }
90
97
  /* Status Type */
91
- .statusType {
98
+ /* .statusType {
99
+ --status_listitem_bullet_min_height: 8px;
100
+ --status_listitem_bullet_min_width: 8px;
101
+ height: var(--status_listitem_bullet_min_height);
102
+ width: var(--status_listitem_bullet_min_width);
103
+ border-radius: 50%;
104
+ margin-right: 13px;
105
+ } */
106
+ .statusType{
107
+ composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
108
+ height: 100% ;
109
+ position: relative;
110
+ align-self: flex-start;
111
+ min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
112
+ min-width: var(--zd_size20) ;
113
+ }
114
+ .statusType::after{
115
+ content: ' ';
92
116
  --status_listitem_bullet_min_height: var(--zd_size8);
93
117
  --status_listitem_bullet_min_width: var(--zd_size8);
94
- min-height: var(--status_listitem_bullet_min_height);
95
- min-width: var(--status_listitem_bullet_min_width);
96
- width: var(--zd_size8) ;
97
- height: var(--zd_size8) ;
118
+ height: var(--status_listitem_bullet_min_height);
119
+ width: var(--status_listitem_bullet_min_width);
120
+ /* css:theme-validation:ignore */
98
121
  border-radius: 50%;
122
+ background-color: var(--zdt_statuslistitem_black_bg);
99
123
  }
100
- [dir=ltr] .statusType {
101
- margin-right: var(--zd_size13) ;
124
+ [dir=ltr] .statusType::after{
125
+ margin-right: var(--zd_size12) ;
102
126
  }
103
- [dir=rtl] .statusType {
104
- margin-left: var(--zd_size13) ;
127
+ [dir=rtl] .statusType::after{
128
+ margin-left: var(--zd_size12) ;
105
129
  }
106
- .black {
130
+
131
+ .black.statusType::after {
107
132
  background-color: var(--zdt_statuslistitem_black_bg);
108
133
  }
109
- .orange {
134
+ .orange.statusType::after {
110
135
  background-color: var(--zdt_statuslistitem_orange_bg);
111
136
  }
112
- .green {
137
+ .green.statusType::after {
113
138
  background-color: var(--zdt_statuslistitem_green_bg);
114
139
  }
package/lib/list/status/StatusListItem/StatusListItem.js CHANGED
@@ -135,7 +135,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
135
135
  "aria-label": ariaLabel,
136
136
  "data-a11y-inset-focus": insetFocus,
137
137
  isCover: false,
138
- align: "baseline",
138
+ align: "center",
139
139
  alignBox: "row",
140
140
  className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : '', " ").concat(customClass),
141
141
  dataId: String(value).replace("'", '_'),
package/lib/list/status/StatusListItem/StatusListItem.module.css CHANGED
@@ -1,9 +1,16 @@
1
+ .varClass {
2
+ --statuslistitem_multiline_lineheight: 1.5385;
3
+ --statuslistitem_font_size: var(--zd_font_size13);
4
+ --statuslistitem_min_height: var(--zd_size35);
5
+ }
6
+
1
7
  .list {
8
+ composes: varClass;
2
9
  color: var(--zdt_statuslistitem_list_text);
3
- font-size: var(--zd_font_size13) ;
10
+ font-size: var(--statuslistitem_font_size);
4
11
  position: relative;
5
12
  list-style: none;
6
- min-height: var(--zd_size35) ;
13
+ min-height: var(--statuslistitem_min_height);
7
14
  cursor: pointer;
8
15
  }
9
16
  [dir=ltr] .withBorder {
@@ -88,27 +95,45 @@
88
95
  padding-left: var(--zd_size39) ;
89
96
  }
90
97
  /* Status Type */
91
- .statusType {
98
+ /* .statusType {
99
+ --status_listitem_bullet_min_height: 8px;
100
+ --status_listitem_bullet_min_width: 8px;
101
+ height: var(--status_listitem_bullet_min_height);
102
+ width: var(--status_listitem_bullet_min_width);
103
+ border-radius: 50%;
104
+ margin-right: 13px;
105
+ } */
106
+ .statusType{
107
+ composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
108
+ height: 100% ;
109
+ position: relative;
110
+ align-self: flex-start;
111
+ min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
112
+ min-width: var(--zd_size20) ;
113
+ }
114
+ .statusType::after{
115
+ content: ' ';
92
116
  --status_listitem_bullet_min_height: var(--zd_size8);
93
117
  --status_listitem_bullet_min_width: var(--zd_size8);
94
- min-height: var(--status_listitem_bullet_min_height);
95
- min-width: var(--status_listitem_bullet_min_width);
96
- width: var(--zd_size8) ;
97
- height: var(--zd_size8) ;
118
+ height: var(--status_listitem_bullet_min_height);
119
+ width: var(--status_listitem_bullet_min_width);
120
+ /* css:theme-validation:ignore */
98
121
  border-radius: 50%;
122
+ background-color: var(--zdt_statuslistitem_black_bg);
99
123
  }
100
- [dir=ltr] .statusType {
101
- margin-right: var(--zd_size13) ;
124
+ [dir=ltr] .statusType::after{
125
+ margin-right: var(--zd_size12) ;
102
126
  }
103
- [dir=rtl] .statusType {
104
- margin-left: var(--zd_size13) ;
127
+ [dir=rtl] .statusType::after{
128
+ margin-left: var(--zd_size12) ;
105
129
  }
106
- .black {
130
+
131
+ .black.statusType::after {
107
132
  background-color: var(--zdt_statuslistitem_black_bg);
108
133
  }
109
- .orange {
134
+ .orange.statusType::after {
110
135
  background-color: var(--zdt_statuslistitem_orange_bg);
111
136
  }
112
- .green {
137
+ .green.statusType::after {
113
138
  background-color: var(--zdt_statuslistitem_green_bg);
114
139
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/dot",
3
- "version": "1.0.0-temp-187.18",
3
+ "version": "1.0.0-temp-187.19",
4
4
  "main": "lib/index",
5
5
  "module": "es/index.js",
6
6
  "private": false,