@atlaskit/select 16.1.3 → 16.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.1.5
+
+### Patch Changes
+
+- [`7f5f23dcb68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5f23dcb68) - Introduce shape tokens to some packages.
+
+## 16.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.3
 
 ### Patch Changes

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "16.1.3";
+var packageVersion = "16.1.5";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/styles.js

@@ -20,7 +20,7 @@ function baseStyles(validationState) {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        fontFamily: (0, _constants.fontFamily)(),
+        fontFamily: "var(--ds-font-family-sans, ".concat((0, _constants.fontFamily)(), ")"),
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
@@ -73,8 +73,8 @@ function baseStyles(validationState) {
         backgroundColor: backgroundColor,
         borderColor: borderColor,
         borderStyle: 'solid',
-        borderRadius: '3px',
-        borderWidth: '2px',
+        borderRadius: "var(--ds-radius-100, 3px)",
+        borderWidth: "var(--ds-width-100, 2px)",
         boxShadow: 'none',
         minHeight: isCompact ? (0, _constants.gridSize)() * 4 : (0, _constants.gridSize)() * 5,
         padding: 0,
@@ -199,7 +199,7 @@ function baseStyles(validationState) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")"),
-        lineHeight: "".concat((0, _constants.gridSize)() * 2, "px") // 16px
+        lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
       });
     },
 
@@ -211,14 +211,14 @@ function baseStyles(validationState) {
     },
     menuList: function menuList(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: (0, _constants.gridSize)(),
-        paddingBottom: (0, _constants.gridSize)()
+        paddingTop: "var(--ds-space-100, 8px)",
+        paddingBottom: "var(--ds-space-100, 8px)"
       });
     },
     multiValue: function multiValue(css, _ref7) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        borderRadius: '2px',
+        borderRadius: "var(--ds-radius-050, 2px)",
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
@@ -230,9 +230,9 @@ function baseStyles(validationState) {
     },
     multiValueLabel: function multiValueLabel(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        padding: '2px',
+        padding: "var(--ds-space-025, 2px)",
         color: 'inherit',
-        paddingRight: '2px'
+        paddingRight: "var(--ds-space-025, 2px)"
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref8) {
@@ -240,8 +240,8 @@ function baseStyles(validationState) {
       return _objectSpread(_objectSpread({}, css), {}, {
         backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(_colors.R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
-        paddingLeft: '2px',
-        paddingRight: '2px',
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         borderRadius: '0px 2px 2px 0px',
         // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.1.3",
+	"version": "16.1.5",
 	"sideEffects": false
 }

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "16.1.3";
+const packageVersion = "16.1.5";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/styles.js

@@ -9,7 +9,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isDisabled
     }) => ({
       ...css,
-      fontFamily: fontFamily(),
+      fontFamily: `var(--ds-font-family-sans, ${fontFamily()})`,
       // react-select disables pointer events when isDisabled is true.
       // We override this and make the inner container turn it off instead.
       pointerEvents: 'all',
@@ -62,8 +62,8 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         backgroundColor,
         borderColor,
         borderStyle: 'solid',
-        borderRadius: '3px',
-        borderWidth: '2px',
+        borderRadius: "var(--ds-radius-100, 3px)",
+        borderWidth: "var(--ds-width-100, 2px)",
         boxShadow: 'none',
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
         padding: 0,
@@ -190,7 +190,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }) => ({
       ...css,
       color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`,
-      lineHeight: `${gridSize() * 2}px` // 16px
+      lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
     }),
 
     menu: css => ({
@@ -200,14 +200,14 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }),
     menuList: css => ({
       ...css,
-      paddingTop: gridSize(),
-      paddingBottom: gridSize()
+      paddingTop: "var(--ds-space-100, 8px)",
+      paddingBottom: "var(--ds-space-100, 8px)"
     }),
     multiValue: (css, {
       isFocused
     }) => ({
       ...css,
-      borderRadius: '2px',
+      borderRadius: "var(--ds-radius-050, 2px)",
       backgroundColor: isFocused ? `var(--ds-background-selected, ${N40})` : `var(--ds-background-neutral, ${N40})`,
       boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
       maxWidth: '100%',
@@ -218,9 +218,9 @@ export default function baseStyles(validationState, isCompact = false, appearanc
     }),
     multiValueLabel: css => ({
       ...css,
-      padding: '2px',
+      padding: "var(--ds-space-025, 2px)",
       color: 'inherit',
-      paddingRight: '2px'
+      paddingRight: "var(--ds-space-025, 2px)"
     }),
     multiValueRemove: (css, {
       isFocused
@@ -228,8 +228,8 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       ...css,
       backgroundColor: isFocused ? `var(--ds-UNSAFE-transparent, ${R75})` : undefined,
       fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
-      paddingLeft: '2px',
-      paddingRight: '2px',
+      paddingLeft: "var(--ds-space-025, 2px)",
+      paddingRight: "var(--ds-space-025, 2px)",
       borderRadius: '0px 2px 2px 0px',
       // DSP-6470 we should style like Tag once we have the :has selector
       ':hover': {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.1.3",
+	"version": "16.1.5",
 	"sideEffects": false
 }

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "16.1.3";
+var packageVersion = "16.1.5";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/styles.js

@@ -13,7 +13,7 @@ export default function baseStyles(validationState) {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        fontFamily: fontFamily(),
+        fontFamily: "var(--ds-font-family-sans, ".concat(fontFamily(), ")"),
         // react-select disables pointer events when isDisabled is true.
         // We override this and make the inner container turn it off instead.
         pointerEvents: 'all',
@@ -66,8 +66,8 @@ export default function baseStyles(validationState) {
         backgroundColor: backgroundColor,
         borderColor: borderColor,
         borderStyle: 'solid',
-        borderRadius: '3px',
-        borderWidth: '2px',
+        borderRadius: "var(--ds-radius-100, 3px)",
+        borderWidth: "var(--ds-width-100, 2px)",
         boxShadow: 'none',
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
         padding: 0,
@@ -192,7 +192,7 @@ export default function baseStyles(validationState) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
         color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")"),
-        lineHeight: "".concat(gridSize() * 2, "px") // 16px
+        lineHeight: "var(--ds-font-lineHeight-100, 16px)" // 16px
       });
     },
 
@@ -204,14 +204,14 @@ export default function baseStyles(validationState) {
     },
     menuList: function menuList(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        paddingTop: gridSize(),
-        paddingBottom: gridSize()
+        paddingTop: "var(--ds-space-100, 8px)",
+        paddingBottom: "var(--ds-space-100, 8px)"
       });
     },
     multiValue: function multiValue(css, _ref7) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        borderRadius: '2px',
+        borderRadius: "var(--ds-radius-050, 2px)",
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral, ".concat(N40, ")"),
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
@@ -223,9 +223,9 @@ export default function baseStyles(validationState) {
     },
     multiValueLabel: function multiValueLabel(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        padding: '2px',
+        padding: "var(--ds-space-025, 2px)",
         color: 'inherit',
-        paddingRight: '2px'
+        paddingRight: "var(--ds-space-025, 2px)"
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref8) {
@@ -233,8 +233,8 @@ export default function baseStyles(validationState) {
       return _objectSpread(_objectSpread({}, css), {}, {
         backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(R75, ")") : undefined,
         fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
-        paddingLeft: '2px',
-        paddingRight: '2px',
+        paddingLeft: "var(--ds-space-025, 2px)",
+        paddingRight: "var(--ds-space-025, 2px)",
         borderRadius: '0px 2px 2px 0px',
         // DSP-6470 we should style like Tag once we have the :has selector
         ':hover': {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.1.3",
+	"version": "16.1.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.1.3",
+  "version": "16.1.5",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,11 +31,11 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -60,7 +60,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.4.0",
     "@atlaskit/form": "^8.8.0",
-    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/logo": "^13.11.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/section-message": "^6.3.0",
@@ -83,8 +83,10 @@
   "techstack": {
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion"