@atlaskit/select - npm Package Compare versions

Comparing version 17.10.0 to 17.10.1

dist/cjs/CountrySelect.js

@@ -21,4 +21,5 @@ "use strict";
 var flagStyles = (0, _react.css)({
-  fontSize: '18px',
-  marginRight: "var(--ds-space-100, 8px)"
+  fontSize: '1.125rem',
+  // emoji size
+  marginInlineEnd: "var(--ds-space-100, 8px)"
 });
@@ -25,0 +26,0 @@ var Opt = function Opt(_ref) {

dist/cjs/Select.js

@@ -12,3 +12,3 @@ "use strict";
 var packageName = "@atlaskit/select";
-var packageVersion = "17.10.0";
+var packageVersion = "17.10.1";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
@@ -15,0 +15,0 @@ var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

dist/cjs/styles.js

@@ -9,9 +9,6 @@ "use strict";
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-var BORDER_WIDTH = 2;
-var ICON_PADDING = 2;
-var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function baseStyles(validationState) {
@@ -23,4 +20,7 @@ var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var isDisabled = _ref.isDisabled;
-      return _objectSpread(_objectSpread({}, css), {}, {
-        fontFamily: "var(--ds-font-family-sans, ".concat((0, _constants.fontFamily)(), ")"),
+      return _objectSpread(_objectSpread(_objectSpread({}, css), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-new-typography_7m89c') ? {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      } : {
+        fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      }), {}, {
         // react-select disables pointer events when isDisabled is true.
@@ -84,8 +84,8 @@ // We override this and make the inner container turn it off instead.
         },
-        minHeight: isCompact ? (0, _constants.gridSize)() * 4 : (0, _constants.gridSize)() * 5,
+        minHeight: isCompact ? 32 : 40,
         padding: 0,
         transition: "background-color ".concat(transitionDuration, " ease-in-out,\n        border-color ").concat(transitionDuration, " ease-in-out"),
         '::-webkit-scrollbar': {
-          height: (0, _constants.gridSize)(),
-          width: (0, _constants.gridSize)()
+          height: 8,
+          width: 8
         },
@@ -111,4 +111,4 @@ '::-webkit-scrollbar-corner': {
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingLeft: paddingExcludingBorder,
-        paddingRight: paddingExcludingBorder,
+        paddingLeft: "var(--ds-space-075, 6px)",
+        paddingRight: "var(--ds-space-075, 6px)",
         paddingBottom: isCompact ? 0 : 2,
@@ -121,4 +121,4 @@ paddingTop: isCompact ? 0 : 2
         color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
-        paddingLeft: ICON_PADDING,
-        paddingRight: ICON_PADDING,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         paddingBottom: isCompact ? 0 : 6,
@@ -145,4 +145,4 @@ paddingTop: isCompact ? 0 : 6,
         color: color,
-        paddingLeft: ICON_PADDING,
-        paddingRight: ICON_PADDING,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         paddingBottom: isCompact ? 0 : 6,
@@ -157,3 +157,3 @@ paddingTop: isCompact ? 0 : 6,
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingRight: paddingExcludingBorder - ICON_PADDING
+        paddingRight: "var(--ds-space-050, 4px)"
       });
@@ -209,4 +209,5 @@ },
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")"),
-        lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")")
+      }, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-new-typography_7m89c') && {
+        lineHeight: '1rem'
       });
@@ -282,3 +283,5 @@ },
     groupHeading: function groupHeading(css) {
-      return _objectSpread(_objectSpread({}, css), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, css), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-new-typography_7m89c') && {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      }), {}, {
         color: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
@@ -285,0 +288,0 @@ });

dist/es2019/CountrySelect.js

@@ -14,4 +14,5 @@ import _extends from "@babel/runtime/helpers/extends";
 const flagStyles = css({
-  fontSize: '18px',
-  marginRight: "var(--ds-space-100, 8px)"
+  fontSize: '1.125rem',
+  // emoji size
+  marginInlineEnd: "var(--ds-space-100, 8px)"
 });
@@ -18,0 +19,0 @@ const Opt = ({

dist/es2019/Select.js

@@ -5,3 +5,3 @@ import ReactSelect from 'react-select';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.10.0";
+const packageVersion = "17.10.1";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
@@ -8,0 +8,0 @@ const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

dist/es2019/styles.js

@@ -1,7 +0,3 @@
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize, fontFamily } from '@atlaskit/theme/constants';
 import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
-const BORDER_WIDTH = 2;
-const ICON_PADDING = 2;
-const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default function baseStyles(validationState, isCompact = false, appearance) {
@@ -13,3 +9,7 @@ return {
       ...css,
-      fontFamily: `var(--ds-font-family-sans, ${fontFamily()})`,
+      ...(getBooleanFF('platform.design-system-team.select-new-typography_7m89c') ? {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      } : {
+        fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      }),
       // react-select disables pointer events when isDisabled is true.
@@ -73,3 +73,3 @@ // We override this and make the inner container turn it off instead.
         },
-        minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
+        minHeight: isCompact ? 32 : 40,
         padding: 0,
@@ -79,4 +79,4 @@ transition: `background-color ${transitionDuration} ease-in-out,
         '::-webkit-scrollbar': {
-          height: gridSize(),
-          width: gridSize()
+          height: 8,
+          width: 8
         },
@@ -102,4 +102,4 @@ '::-webkit-scrollbar-corner': {
       ...css,
-      paddingLeft: paddingExcludingBorder,
-      paddingRight: paddingExcludingBorder,
+      paddingLeft: "var(--ds-space-075, 6px)",
+      paddingRight: "var(--ds-space-075, 6px)",
       paddingBottom: isCompact ? 0 : 2,
@@ -111,4 +111,4 @@ paddingTop: isCompact ? 0 : 2
       color: `var(--ds-text-subtlest, ${N70})`,
-      paddingLeft: ICON_PADDING,
-      paddingRight: ICON_PADDING,
+      paddingLeft: "var(--ds-space-025, 2px)",
+      paddingRight: "var(--ds-space-025, 2px)",
       paddingBottom: isCompact ? 0 : 6,
@@ -135,4 +135,4 @@ paddingTop: isCompact ? 0 : 6,
         color,
-        paddingLeft: ICON_PADDING,
-        paddingRight: ICON_PADDING,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         paddingBottom: isCompact ? 0 : 6,
@@ -147,3 +147,3 @@ paddingTop: isCompact ? 0 : 6,
       ...css,
-      paddingRight: paddingExcludingBorder - ICON_PADDING
+      paddingRight: "var(--ds-space-050, 4px)"
     }),
@@ -202,3 +202,5 @@ option: (css, {
       color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`,
-      lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
+      ...(!getBooleanFF('platform.design-system-team.select-new-typography_7m89c') && {
+        lineHeight: '1rem'
+      })
     }),
@@ -274,2 +276,5 @@ menu: css => ({
       ...css,
+      ...(getBooleanFF('platform.design-system-team.select-new-typography_7m89c') && {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      }),
       color: `var(--ds-text-subtle, ${N200})`
@@ -276,0 +281,0 @@ })

dist/esm/CountrySelect.js

@@ -14,4 +14,5 @@ import _extends from "@babel/runtime/helpers/extends";
 var flagStyles = css({
-  fontSize: '18px',
-  marginRight: "var(--ds-space-100, 8px)"
+  fontSize: '1.125rem',
+  // emoji size
+  marginInlineEnd: "var(--ds-space-100, 8px)"
 });
@@ -18,0 +19,0 @@ var Opt = function Opt(_ref) {

dist/esm/Select.js

@@ -5,3 +5,3 @@ import ReactSelect from 'react-select';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.10.0";
+var packageVersion = "17.10.1";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
@@ -8,0 +8,0 @@ var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

dist/esm/styles.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize, fontFamily } from '@atlaskit/theme/constants';
 import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
-var BORDER_WIDTH = 2;
-var ICON_PADDING = 2;
-var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default function baseStyles(validationState) {
@@ -16,4 +12,7 @@ var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var isDisabled = _ref.isDisabled;
-      return _objectSpread(_objectSpread({}, css), {}, {
-        fontFamily: "var(--ds-font-family-sans, ".concat(fontFamily(), ")"),
+      return _objectSpread(_objectSpread(_objectSpread({}, css), getBooleanFF('platform.design-system-team.select-new-typography_7m89c') ? {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      } : {
+        fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      }), {}, {
         // react-select disables pointer events when isDisabled is true.
@@ -77,8 +76,8 @@ // We override this and make the inner container turn it off instead.
         },
-        minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
+        minHeight: isCompact ? 32 : 40,
         padding: 0,
         transition: "background-color ".concat(transitionDuration, " ease-in-out,\n        border-color ").concat(transitionDuration, " ease-in-out"),
         '::-webkit-scrollbar': {
-          height: gridSize(),
-          width: gridSize()
+          height: 8,
+          width: 8
         },
@@ -104,4 +103,4 @@ '::-webkit-scrollbar-corner': {
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingLeft: paddingExcludingBorder,
-        paddingRight: paddingExcludingBorder,
+        paddingLeft: "var(--ds-space-075, 6px)",
+        paddingRight: "var(--ds-space-075, 6px)",
         paddingBottom: isCompact ? 0 : 2,
@@ -114,4 +113,4 @@ paddingTop: isCompact ? 0 : 2
         color: "var(--ds-text-subtlest, ".concat(N70, ")"),
-        paddingLeft: ICON_PADDING,
-        paddingRight: ICON_PADDING,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         paddingBottom: isCompact ? 0 : 6,
@@ -138,4 +137,4 @@ paddingTop: isCompact ? 0 : 6,
         color: color,
-        paddingLeft: ICON_PADDING,
-        paddingRight: ICON_PADDING,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         paddingBottom: isCompact ? 0 : 6,
@@ -150,3 +149,3 @@ paddingTop: isCompact ? 0 : 6,
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingRight: paddingExcludingBorder - ICON_PADDING
+        paddingRight: "var(--ds-space-050, 4px)"
       });
@@ -202,4 +201,5 @@ },
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")"),
-        lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")")
+      }, !getBooleanFF('platform.design-system-team.select-new-typography_7m89c') && {
+        lineHeight: '1rem'
       });
@@ -275,3 +275,5 @@ },
     groupHeading: function groupHeading(css) {
-      return _objectSpread(_objectSpread({}, css), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, css), getBooleanFF('platform.design-system-team.select-new-typography_7m89c') && {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      }), {}, {
         color: "var(--ds-text-subtle, ".concat(N200, ")")
@@ -278,0 +280,0 @@ });

package.json

 {
   "name": "@atlaskit/select",
-  "version": "17.10.0",
+  "version": "17.10.1",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
@@ -48,3 +48,3 @@ "publishConfig": {
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^6.3.0",
+    "@atlaskit/primitives": "^6.4.0",
     "@atlaskit/spinner": "^16.1.0",
@@ -72,3 +72,4 @@ "@atlaskit/theme": "^12.8.0",
     "@af/integration-testing": "*",
-    "@atlaskit/checkbox": "^13.3.0",
+    "@af/visual-regression": "*",
+    "@atlaskit/checkbox": "^13.4.0",
     "@atlaskit/ds-lib": "^2.3.0",
@@ -79,3 +80,2 @@ "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
@@ -114,6 +114,8 @@ "@emotion/styled": "^11.0.0",
       "type": "boolean"
+    },
+    "platform.design-system-team.select-new-typography_7m89c": {
+      "type": "boolean"
     }
   },
-  "homepage": "https://atlassian.design/components/select/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "homepage": "https://atlassian.design/components/select/"
 }

No alert changes

Improved metrics

Lines of code

10183

increased by0.13%

Worsened metrics

Total package byte prevSize

489645

decreased by-0.36%

Dependency changes

• Updated@atlaskit/primitives@^6.4.0