@atlaskit/select 21.4.0 → 21.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/select
 
+## 21.4.2
+
+### Patch Changes
+
+- [`16cdad6cd57d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/16cdad6cd57d4) -
+  Changing internal use of SVG icons behind a feature flag.
+
+## 21.4.1
+
+### Patch Changes
+
+- [`14886457b3a3a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14886457b3a3a) -
+  Suppress i18n violations
+
 ## 21.4.0
 
 ### Minor Changes

package/dist/cjs/components/input-options.compiled.css

@@ -2,8 +2,10 @@
 ._16jlkb7n{flex-grow:1}
 ._16qs1kw7{box-shadow:inherit}
 ._16qsgkog{box-shadow:inset 2px 0 0 var(--ds-border-focused,#4688ec)}
+._18m915vq{overflow-y:hidden}
 ._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
 ._1bsb1osq{width:100%}
+._1bsb1tcg{width:24px}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1gqp1r31 svg rect{stroke:currentColor}
@@ -15,12 +17,15 @@
 ._1u9jrsbi svg circle:first-of-type{stroke:var(--ds-border-input,#8c8f97)}
 ._1xci892t svg rect{stroke-linejoin:round}
 ._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
 ._59qxe4h9 svg circle:first-of-type{stroke-width:var(--ds-border-width,1px)}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
 ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._lcxvglyw{pointer-events:none}
+._lswuvuon{fill:var(--ds-surface,#fff)}
 ._o5721q9c{white-space:nowrap}
 ._syaz15gi{color:var(--ds-text-disabled,inherit)}
 ._syaz1kw7{color:inherit}

package/dist/cjs/components/input-options.js

@@ -121,45 +121,78 @@ var ControlOption = function ControlOption(props) {
     className: (0, _runtime.ax)(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
   }, children));
 };
+var svgStyles = null;
+var newCheckboxIconPath = /*#__PURE__*/React.createElement("g", {
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "5.5",
+  y: "5.5",
+  width: "13",
+  height: "13",
+  rx: "1.5",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  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",
+  fill: "inherit"
+}));
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-custom-icon-migration')) {
+    var primaryColor = props.primaryColor,
+      secondaryColor = props.secondaryColor,
+      label = props.label;
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      style: {
+        color: primaryColor,
+        fill: secondaryColor
+      },
+      "aria-label": label,
+      role: label ? 'img' : 'presentation',
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
+    }, newCheckboxIconPath);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
-    React.createElement(_svg.default, props, /*#__PURE__*/React.createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("rect", {
-      x: "5.5",
-      y: "5.5",
-      width: "13",
-      height: "13",
-      rx: "1.5",
-      fill: "currentColor"
-    }), /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      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",
-      fill: "inherit"
-    })))
+    React.createElement(_svg.default, props, newCheckboxIconPath)
   );
 };
+var newRadioIconPath = /*#__PURE__*/React.createElement("g", {
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "6.75",
+  fill: "currentColor",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3",
+  fill: "inherit"
+}));
 var NewRadioIcon = function NewRadioIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-custom-icon-migration')) {
+    var primaryColor = props.primaryColor,
+      secondaryColor = props.secondaryColor,
+      label = props.label;
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      style: {
+        color: primaryColor,
+        fill: secondaryColor
+      },
+      "aria-label": label,
+      role: label ? 'img' : 'presentation',
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
+    }, newRadioIconPath);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
-    React.createElement(_svg.default, props, /*#__PURE__*/React.createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "6.75",
-      fill: "currentColor",
-      strokeWidth: "1.5"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "3",
-      fill: "inherit"
-    })))
+    React.createElement(_svg.default, props, newRadioIconPath)
   );
 };
 

package/dist/cjs/data/countries.js

@@ -1256,13 +1256,11 @@ var allCountries = [{
 
 // separate countries into groups
 var groupedCountries = exports.groupedCountries = [{
-  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
   label: 'Suggested',
   options: allCountries.filter(function (c) {
     return c.suggested;
   })
 }, {
-  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
   label: 'All Countries',
   options: allCountries.filter(function (c) {
     return !c.suggested;

package/dist/es2019/components/input-options.compiled.css

@@ -2,8 +2,10 @@
 ._16jlkb7n{flex-grow:1}
 ._16qs1kw7{box-shadow:inherit}
 ._16qsgkog{box-shadow:inset 2px 0 0 var(--ds-border-focused,#4688ec)}
+._18m915vq{overflow-y:hidden}
 ._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
 ._1bsb1osq{width:100%}
+._1bsb1tcg{width:24px}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1gqp1r31 svg rect{stroke:currentColor}
@@ -15,12 +17,15 @@
 ._1u9jrsbi svg circle:first-of-type{stroke:var(--ds-border-input,#8c8f97)}
 ._1xci892t svg rect{stroke-linejoin:round}
 ._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
 ._59qxe4h9 svg circle:first-of-type{stroke-width:var(--ds-border-width,1px)}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
 ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._lcxvglyw{pointer-events:none}
+._lswuvuon{fill:var(--ds-surface,#fff)}
 ._o5721q9c{white-space:nowrap}
 ._syaz15gi{color:var(--ds-text-disabled,inherit)}
 ._syaz1kw7{color:inherit}

package/dist/es2019/components/input-options.js

@@ -106,10 +106,8 @@ const ControlOption = props => {
     className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
   }, children));
 };
-const NewCheckboxIcon = props =>
-/*#__PURE__*/
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
-React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
+const svgStyles = null;
+const newCheckboxIconPath = /*#__PURE__*/React.createElement("g", {
   fillRule: "evenodd"
 }, /*#__PURE__*/React.createElement("rect", {
   x: "5.5",
@@ -123,11 +121,32 @@ React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g
   clipRule: "evenodd",
   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",
   fill: "inherit"
-})));
-const NewRadioIcon = props =>
-/*#__PURE__*/
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
-React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
+}));
+const NewCheckboxIcon = props => {
+  if (fg('platform-custom-icon-migration')) {
+    const {
+      primaryColor,
+      secondaryColor,
+      label
+    } = props;
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      style: {
+        color: primaryColor,
+        fill: secondaryColor
+      },
+      "aria-label": label,
+      role: label ? 'img' : 'presentation',
+      className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
+    }, newCheckboxIconPath);
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
+    React.createElement(PrimitiveSVGIcon, props, newCheckboxIconPath)
+  );
+};
+const newRadioIconPath = /*#__PURE__*/React.createElement("g", {
   fillRule: "evenodd"
 }, /*#__PURE__*/React.createElement("circle", {
   cx: "12",
@@ -140,7 +159,31 @@ React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g
   cy: "12",
   r: "3",
   fill: "inherit"
-})));
+}));
+const NewRadioIcon = props => {
+  if (fg('platform-custom-icon-migration')) {
+    const {
+      primaryColor,
+      secondaryColor,
+      label
+    } = props;
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      style: {
+        color: primaryColor,
+        fill: secondaryColor
+      },
+      "aria-label": label,
+      role: label ? 'img' : 'presentation',
+      className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
+    }, newRadioIconPath);
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
+    React.createElement(PrimitiveSVGIcon, props, newRadioIconPath)
+  );
+};
 
 /**
  * __Checkbox option__

package/dist/es2019/data/countries.js

@@ -1250,11 +1250,9 @@ const allCountries = [{
 
 // separate countries into groups
 export const groupedCountries = [{
-  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
   label: 'Suggested',
   options: allCountries.filter(c => c.suggested)
 }, {
-  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
   label: 'All Countries',
   options: allCountries.filter(c => !c.suggested)
 }];

package/dist/esm/components/input-options.compiled.css

@@ -2,8 +2,10 @@
 ._16jlkb7n{flex-grow:1}
 ._16qs1kw7{box-shadow:inherit}
 ._16qsgkog{box-shadow:inset 2px 0 0 var(--ds-border-focused,#4688ec)}
+._18m915vq{overflow-y:hidden}
 ._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
 ._1bsb1osq{width:100%}
+._1bsb1tcg{width:24px}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1gqp1r31 svg rect{stroke:currentColor}
@@ -15,12 +17,15 @@
 ._1u9jrsbi svg circle:first-of-type{stroke:var(--ds-border-input,#8c8f97)}
 ._1xci892t svg rect{stroke-linejoin:round}
 ._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
 ._59qxe4h9 svg circle:first-of-type{stroke-width:var(--ds-border-width,1px)}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
 ._bfhk1dpa{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._lcxvglyw{pointer-events:none}
+._lswuvuon{fill:var(--ds-surface,#fff)}
 ._o5721q9c{white-space:nowrap}
 ._syaz15gi{color:var(--ds-text-disabled,inherit)}
 ._syaz1kw7{color:inherit}

package/dist/esm/components/input-options.js

@@ -112,45 +112,78 @@ var ControlOption = function ControlOption(props) {
     className: ax(["_16jlkb7n _1reo15vq _1bto1l2s _o5721q9c"])
   }, children));
 };
+var svgStyles = null;
+var newCheckboxIconPath = /*#__PURE__*/React.createElement("g", {
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "5.5",
+  y: "5.5",
+  width: "13",
+  height: "13",
+  rx: "1.5",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  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",
+  fill: "inherit"
+}));
 var NewCheckboxIcon = function NewCheckboxIcon(props) {
+  if (fg('platform-custom-icon-migration')) {
+    var primaryColor = props.primaryColor,
+      secondaryColor = props.secondaryColor,
+      label = props.label;
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      style: {
+        color: primaryColor,
+        fill: secondaryColor
+      },
+      "aria-label": label,
+      role: label ? 'img' : 'presentation',
+      className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
+    }, newCheckboxIconPath);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
-    React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("rect", {
-      x: "5.5",
-      y: "5.5",
-      width: "13",
-      height: "13",
-      rx: "1.5",
-      fill: "currentColor"
-    }), /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      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",
-      fill: "inherit"
-    })))
+    React.createElement(PrimitiveSVGIcon, props, newCheckboxIconPath)
   );
 };
+var newRadioIconPath = /*#__PURE__*/React.createElement("g", {
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "6.75",
+  fill: "currentColor",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3",
+  fill: "inherit"
+}));
 var NewRadioIcon = function NewRadioIcon(props) {
+  if (fg('platform-custom-icon-migration')) {
+    var primaryColor = props.primaryColor,
+      secondaryColor = props.secondaryColor,
+      label = props.label;
+    return /*#__PURE__*/React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      style: {
+        color: primaryColor,
+        fill: secondaryColor
+      },
+      "aria-label": label,
+      role: label ? 'img' : 'presentation',
+      className: ax(["_1reo15vq _18m915vq _1bsb1tcg _4t3i1tcg _lswuvuon _lcxvglyw"])
+    }, newRadioIconPath);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props, @atlaskit/design-system/no-custom-icons
-    React.createElement(PrimitiveSVGIcon, props, /*#__PURE__*/React.createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "6.75",
-      fill: "currentColor",
-      strokeWidth: "1.5"
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "3",
-      fill: "inherit"
-    })))
+    React.createElement(PrimitiveSVGIcon, props, newRadioIconPath)
   );
 };
 

package/dist/esm/data/countries.js

@@ -1250,13 +1250,11 @@ var allCountries = [{
 
 // separate countries into groups
 export var groupedCountries = [{
-  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
   label: 'Suggested',
   options: allCountries.filter(function (c) {
     return c.suggested;
   })
 }, {
-  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
   label: 'All Countries',
   options: allCountries.filter(function (c) {
     return !c.suggested;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "21.4.0",
+	"version": "21.4.2",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,14 +33,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/ds-lib": "^5.2.0",
+		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/react-select": "^3.9.0",
-		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -62,7 +61,7 @@
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/drawer": "^11.0.0",
-		"@atlaskit/form": "^14.2.0",
+		"@atlaskit/form": "^14.3.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/modal-dialog": "^14.7.0",
@@ -98,6 +97,9 @@
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},
+		"platform-custom-icon-migration": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_layering_in_main_slot_fixes": {
 			"type": "boolean"
 		}