@atlaskit/select 21.4.1 → 21.4.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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/input-options.compiled.css +5 -0
  3. package/dist/cjs/components/input-options.js +62 -29
  4. package/dist/es2019/components/input-options.compiled.css +5 -0
  5. package/dist/es2019/components/input-options.js +53 -10
  6. package/dist/esm/components/input-options.compiled.css +5 -0
  7. package/dist/esm/components/input-options.js +62 -29
  8. package/package.json +6 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 21.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`16cdad6cd57d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/16cdad6cd57d4) -
8
+ Changing internal use of SVG icons behind a feature flag.
9
+
3
10
  ## 21.4.1
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/components/input-options.compiled.css CHANGED
@@ -2,8 +2,10 @@
2
2
  ._16jlkb7n{flex-grow:1}
3
3
  ._16qs1kw7{box-shadow:inherit}
4
4
  ._16qsgkog{box-shadow:inset 2px 0 0 var(--ds-border-focused,#4688ec)}
5
+ ._18m915vq{overflow-y:hidden}
5
6
  ._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
6
7
  ._1bsb1osq{width:100%}
8
+ ._1bsb1tcg{width:24px}
7
9
  ._1bto1l2s{text-overflow:ellipsis}
8
10
  ._1e0c1txw{display:flex}
9
11
  ._1gqp1r31 svg rect{stroke:currentColor}
@@ -15,12 +17,15 @@
15
17
  ._1u9jrsbi svg circle:first-of-type{stroke:var(--ds-border-input,#8c8f97)}
16
18
  ._1xci892t svg rect{stroke-linejoin:round}
17
19
  ._4cvr1h6o{align-items:center}
20
+ ._4t3i1tcg{height:24px}
18
21
  ._59qxe4h9 svg circle:first-of-type{stroke-width:var(--ds-border-width,1px)}
19
22
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
20
23
  ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
21
24
  ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
22
25
  ._bfhk1j28{background-color:transparent}
23
26
  ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
27
+ ._lcxvglyw{pointer-events:none}
28
+ ._lswuvuon{fill:var(--ds-surface,#fff)}
24
29
  ._o5721q9c{white-space:nowrap}
25
30
  ._syaz15gi{color:var(--ds-text-disabled,inherit)}
26
31
  ._syaz1kw7{color:inherit}
package/dist/cjs/components/input-options.js CHANGED
@@ -121,45 +121,78 @@ var ControlOption = function ControlOption(props) {
121
121
  className: (0, _runtime.ax)(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
122
122
  }, children));
123
123
  };
124
+ var svgStyles = null;
125
+ var newCheckboxIconPath = /*#__PURE__*/React.createElement("g", {
126
+ fillRule: "evenodd"
127
+ }, /*#__PURE__*/React.createElement("rect", {
128
+ x: "5.5",
129
+ y: "5.5",
130
+ width: "13",
131
+ height: "13",
132
+ rx: "1.5",
133
+ fill: "currentColor"
134
+ }), /*#__PURE__*/React.createElement("path", {
135
+ fillRule: "evenodd",
136
+ clipRule: "evenodd",
137
+ d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
138
+ fill: "inherit"
139
+ }));
124
140
  var NewCheckboxIcon = function NewCheckboxIcon(props) {
141
+ if ((0, _platformFeatureFlags.fg)('platform-custom-icon-migration')) {
142
+ var primaryColor = props.primaryColor,
143
+ secondaryColor = props.secondaryColor,
144
+ label = props.label;
145
+ return /*#__PURE__*/React.createElement("svg", {
146
+ viewBox: "0 0 24 24",
147
+ style: {
148
+ color: primaryColor,
149
+ fill: secondaryColor
150
+ },
151
+ "aria-label": label,
152
+ role: label ? 'img' : 'presentation',
153
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
154
+ }, newCheckboxIconPath);
155
+ }
125
156
  return (
126
157
  /*#__PURE__*/
127
158
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
128
- React.createElement(_svg.default, props, /*#__PURE__*/React.createElement("g", {
129
- fillRule: "evenodd"
130
- }, /*#__PURE__*/React.createElement("rect", {
131
- x: "5.5",
132
- y: "5.5",
133
- width: "13",
134
- height: "13",
135
- rx: "1.5",
136
- fill: "currentColor"
137
- }), /*#__PURE__*/React.createElement("path", {
138
- fillRule: "evenodd",
139
- clipRule: "evenodd",
140
- d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
141
- fill: "inherit"
142
- })))
159
+ React.createElement(_svg.default, props, newCheckboxIconPath)
143
160
  );
144
161
  };
162
+ var newRadioIconPath = /*#__PURE__*/React.createElement("g", {
163
+ fillRule: "evenodd"
164
+ }, /*#__PURE__*/React.createElement("circle", {
165
+ cx: "12",
166
+ cy: "12",
167
+ r: "6.75",
168
+ fill: "currentColor",
169
+ strokeWidth: "1.5"
170
+ }), /*#__PURE__*/React.createElement("circle", {
171
+ cx: "12",
172
+ cy: "12",
173
+ r: "3",
174
+ fill: "inherit"
175
+ }));
145
176
  var NewRadioIcon = function NewRadioIcon(props) {
177
+ if ((0, _platformFeatureFlags.fg)('platform-custom-icon-migration')) {
178
+ var primaryColor = props.primaryColor,
179
+ secondaryColor = props.secondaryColor,
180
+ label = props.label;
181
+ return /*#__PURE__*/React.createElement("svg", {
182
+ viewBox: "0 0 24 24",
183
+ style: {
184
+ color: primaryColor,
185
+ fill: secondaryColor
186
+ },
187
+ "aria-label": label,
188
+ role: label ? 'img' : 'presentation',
189
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
190
+ }, newRadioIconPath);
191
+ }
146
192
  return (
147
193
  /*#__PURE__*/
148
194
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
149
- React.createElement(_svg.default, props, /*#__PURE__*/React.createElement("g", {
150
- fillRule: "evenodd"
151
- }, /*#__PURE__*/React.createElement("circle", {
152
- cx: "12",
153
- cy: "12",
154
- r: "6.75",
155
- fill: "currentColor",
156
- strokeWidth: "1.5"
157
- }), /*#__PURE__*/React.createElement("circle", {
158
- cx: "12",
159
- cy: "12",
160
- r: "3",
161
- fill: "inherit"
162
- })))
195
+ React.createElement(_svg.default, props, newRadioIconPath)
163
196
  );
164
197
  };
165
198
 
package/dist/es2019/components/input-options.compiled.css CHANGED
@@ -2,8 +2,10 @@
2
2
  ._16jlkb7n{flex-grow:1}
3
3
  ._16qs1kw7{box-shadow:inherit}
4
4
  ._16qsgkog{box-shadow:inset 2px 0 0 var(--ds-border-focused,#4688ec)}
5
+ ._18m915vq{overflow-y:hidden}
5
6
  ._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
6
7
  ._1bsb1osq{width:100%}
8
+ ._1bsb1tcg{width:24px}
7
9
  ._1bto1l2s{text-overflow:ellipsis}
8
10
  ._1e0c1txw{display:flex}
9
11
  ._1gqp1r31 svg rect{stroke:currentColor}
@@ -15,12 +17,15 @@
15
17
  ._1u9jrsbi svg circle:first-of-type{stroke:var(--ds-border-input,#8c8f97)}
16
18
  ._1xci892t svg rect{stroke-linejoin:round}
17
19
  ._4cvr1h6o{align-items:center}
20
+ ._4t3i1tcg{height:24px}
18
21
  ._59qxe4h9 svg circle:first-of-type{stroke-width:var(--ds-border-width,1px)}
19
22
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
20
23
  ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
21
24
  ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
22
25
  ._bfhk1j28{background-color:transparent}
23
26
  ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
27
+ ._lcxvglyw{pointer-events:none}
28
+ ._lswuvuon{fill:var(--ds-surface,#fff)}
24
29
  ._o5721q9c{white-space:nowrap}
25
30
  ._syaz15gi{color:var(--ds-text-disabled,inherit)}
26
31
  ._syaz1kw7{color:inherit}
package/dist/es2019/components/input-options.js CHANGED
@@ -106,10 +106,8 @@ const ControlOption = props => {
106
106
  className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
107
107
  }, children));
108
108
  };
109
- const NewCheckboxIcon = props =>
110
- /*#__PURE__*/
111
- // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
112
- React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
109
+ const svgStyles = null;
110
+ const newCheckboxIconPath = /*#__PURE__*/React.createElement("g", {
113
111
  fillRule: "evenodd"
114
112
  }, /*#__PURE__*/React.createElement("rect", {
115
113
  x: "5.5",
@@ -123,11 +121,32 @@ React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g
123
121
  clipRule: "evenodd",
124
122
  d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
125
123
  fill: "inherit"
126
- })));
127
- const NewRadioIcon = props =>
128
- /*#__PURE__*/
129
- // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
130
- React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
124
+ }));
125
+ const NewCheckboxIcon = props => {
126
+ if (fg('platform-custom-icon-migration')) {
127
+ const {
128
+ primaryColor,
129
+ secondaryColor,
130
+ label
131
+ } = props;
132
+ return /*#__PURE__*/React.createElement("svg", {
133
+ viewBox: "0 0 24 24",
134
+ style: {
135
+ color: primaryColor,
136
+ fill: secondaryColor
137
+ },
138
+ "aria-label": label,
139
+ role: label ? 'img' : 'presentation',
140
+ className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
141
+ }, newCheckboxIconPath);
142
+ }
143
+ return (
144
+ /*#__PURE__*/
145
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
146
+ React.createElement(PrimitiveSVGIcon, props, newCheckboxIconPath)
147
+ );
148
+ };
149
+ const newRadioIconPath = /*#__PURE__*/React.createElement("g", {
131
150
  fillRule: "evenodd"
132
151
  }, /*#__PURE__*/React.createElement("circle", {
133
152
  cx: "12",
@@ -140,7 +159,31 @@ React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g
140
159
  cy: "12",
141
160
  r: "3",
142
161
  fill: "inherit"
143
- })));
162
+ }));
163
+ const NewRadioIcon = props => {
164
+ if (fg('platform-custom-icon-migration')) {
165
+ const {
166
+ primaryColor,
167
+ secondaryColor,
168
+ label
169
+ } = props;
170
+ return /*#__PURE__*/React.createElement("svg", {
171
+ viewBox: "0 0 24 24",
172
+ style: {
173
+ color: primaryColor,
174
+ fill: secondaryColor
175
+ },
176
+ "aria-label": label,
177
+ role: label ? 'img' : 'presentation',
178
+ className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
179
+ }, newRadioIconPath);
180
+ }
181
+ return (
182
+ /*#__PURE__*/
183
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
184
+ React.createElement(PrimitiveSVGIcon, props, newRadioIconPath)
185
+ );
186
+ };
144
187
 
145
188
  /**
146
189
  * __Checkbox option__
package/dist/esm/components/input-options.compiled.css CHANGED
@@ -2,8 +2,10 @@
2
2
  ._16jlkb7n{flex-grow:1}
3
3
  ._16qs1kw7{box-shadow:inherit}
4
4
  ._16qsgkog{box-shadow:inset 2px 0 0 var(--ds-border-focused,#4688ec)}
5
+ ._18m915vq{overflow-y:hidden}
5
6
  ._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
6
7
  ._1bsb1osq{width:100%}
8
+ ._1bsb1tcg{width:24px}
7
9
  ._1bto1l2s{text-overflow:ellipsis}
8
10
  ._1e0c1txw{display:flex}
9
11
  ._1gqp1r31 svg rect{stroke:currentColor}
@@ -15,12 +17,15 @@
15
17
  ._1u9jrsbi svg circle:first-of-type{stroke:var(--ds-border-input,#8c8f97)}
16
18
  ._1xci892t svg rect{stroke-linejoin:round}
17
19
  ._4cvr1h6o{align-items:center}
20
+ ._4t3i1tcg{height:24px}
18
21
  ._59qxe4h9 svg circle:first-of-type{stroke-width:var(--ds-border-width,1px)}
19
22
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
20
23
  ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
21
24
  ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
22
25
  ._bfhk1j28{background-color:transparent}
23
26
  ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
27
+ ._lcxvglyw{pointer-events:none}
28
+ ._lswuvuon{fill:var(--ds-surface,#fff)}
24
29
  ._o5721q9c{white-space:nowrap}
25
30
  ._syaz15gi{color:var(--ds-text-disabled,inherit)}
26
31
  ._syaz1kw7{color:inherit}
package/dist/esm/components/input-options.js CHANGED
@@ -112,45 +112,78 @@ var ControlOption = function ControlOption(props) {
112
112
  className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
113
113
  }, children));
114
114
  };
115
+ var svgStyles = null;
116
+ var newCheckboxIconPath = /*#__PURE__*/React.createElement("g", {
117
+ fillRule: "evenodd"
118
+ }, /*#__PURE__*/React.createElement("rect", {
119
+ x: "5.5",
120
+ y: "5.5",
121
+ width: "13",
122
+ height: "13",
123
+ rx: "1.5",
124
+ fill: "currentColor"
125
+ }), /*#__PURE__*/React.createElement("path", {
126
+ fillRule: "evenodd",
127
+ clipRule: "evenodd",
128
+ d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
129
+ fill: "inherit"
130
+ }));
115
131
  var NewCheckboxIcon = function NewCheckboxIcon(props) {
132
+ if (fg('platform-custom-icon-migration')) {
133
+ var primaryColor = props.primaryColor,
134
+ secondaryColor = props.secondaryColor,
135
+ label = props.label;
136
+ return /*#__PURE__*/React.createElement("svg", {
137
+ viewBox: "0 0 24 24",
138
+ style: {
139
+ color: primaryColor,
140
+ fill: secondaryColor
141
+ },
142
+ "aria-label": label,
143
+ role: label ? 'img' : 'presentation',
144
+ className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
145
+ }, newCheckboxIconPath);
146
+ }
116
147
  return (
117
148
  /*#__PURE__*/
118
149
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
119
- React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
120
- fillRule: "evenodd"
121
- }, /*#__PURE__*/React.createElement("rect", {
122
- x: "5.5",
123
- y: "5.5",
124
- width: "13",
125
- height: "13",
126
- rx: "1.5",
127
- fill: "currentColor"
128
- }), /*#__PURE__*/React.createElement("path", {
129
- fillRule: "evenodd",
130
- clipRule: "evenodd",
131
- d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
132
- fill: "inherit"
133
- })))
150
+ React.createElement(PrimitiveSVGIcon, props, newCheckboxIconPath)
134
151
  );
135
152
  };
153
+ var newRadioIconPath = /*#__PURE__*/React.createElement("g", {
154
+ fillRule: "evenodd"
155
+ }, /*#__PURE__*/React.createElement("circle", {
156
+ cx: "12",
157
+ cy: "12",
158
+ r: "6.75",
159
+ fill: "currentColor",
160
+ strokeWidth: "1.5"
161
+ }), /*#__PURE__*/React.createElement("circle", {
162
+ cx: "12",
163
+ cy: "12",
164
+ r: "3",
165
+ fill: "inherit"
166
+ }));
136
167
  var NewRadioIcon = function NewRadioIcon(props) {
168
+ if (fg('platform-custom-icon-migration')) {
169
+ var primaryColor = props.primaryColor,
170
+ secondaryColor = props.secondaryColor,
171
+ label = props.label;
172
+ return /*#__PURE__*/React.createElement("svg", {
173
+ viewBox: "0 0 24 24",
174
+ style: {
175
+ color: primaryColor,
176
+ fill: secondaryColor
177
+ },
178
+ "aria-label": label,
179
+ role: label ? 'img' : 'presentation',
180
+ className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
181
+ }, newRadioIconPath);
182
+ }
137
183
  return (
138
184
  /*#__PURE__*/
139
185
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
140
- React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
141
- fillRule: "evenodd"
142
- }, /*#__PURE__*/React.createElement("circle", {
143
- cx: "12",
144
- cy: "12",
145
- r: "6.75",
146
- fill: "currentColor",
147
- strokeWidth: "1.5"
148
- }), /*#__PURE__*/React.createElement("circle", {
149
- cx: "12",
150
- cy: "12",
151
- r: "3",
152
- fill: "inherit"
153
- })))
186
+ React.createElement(PrimitiveSVGIcon, props, newRadioIconPath)
154
187
  );
155
188
  };
156
189
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "21.4.1",
3
+ "version": "21.4.2",
4
4
  "description": "Select allows users to make a single selection or multiple selections from a list of options.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,11 +36,10 @@
36
36
  "@atlaskit/ds-lib": "^5.3.0",
37
37
  "@atlaskit/icon": "^29.0.0",
38
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
- "@atlaskit/primitives": "^16.3.0",
39
+ "@atlaskit/primitives": "^16.4.0",
40
40
  "@atlaskit/react-select": "^3.9.0",
41
- "@atlaskit/spinner": "^19.0.0",
42
41
  "@atlaskit/theme": "^21.0.0",
43
- "@atlaskit/tokens": "^8.3.0",
42
+ "@atlaskit/tokens": "^8.4.0",
44
43
  "@atlaskit/visually-hidden": "^3.0.0",
45
44
  "@babel/runtime": "^7.0.0",
46
45
  "@compiled/react": "^0.18.6",
@@ -98,6 +97,9 @@
98
97
  "platform-visual-refresh-icons": {
99
98
  "type": "boolean"
100
99
  },
100
+ "platform-custom-icon-migration": {
101
+ "type": "boolean"
102
+ },
101
103
  "platform_dst_nav4_layering_in_main_slot_fixes": {
102
104
  "type": "boolean"
103
105
  }