@atlaskit/select 15.5.0 → 15.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 15.6.0
+
+### Minor Changes
+
+- [`68cc8008851`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68cc8008851) - [ux] Introduces appearance prop to component, with 'default', 'subtle' and 'none' variants
+
 ## 15.5.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -121,7 +121,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")

package/dist/cjs/Select.js

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

package/dist/cjs/createSelect.js

@@ -41,7 +41,7 @@ var defaultComponents = _interopRequireWildcard(require("./components"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
-var _excluded = ["styles", "validationState", "spacing", "isMulti"];
+var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -119,6 +119,7 @@ function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
+            appearance = _this$props.appearance,
             props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
 
@@ -128,7 +129,7 @@ function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact), styles)
+          styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/cjs/styles.js

@@ -21,7 +21,7 @@ var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = (0, _constants.gridSize)() - BORDER_WIDTH;
 
-function baseStyles(validationState, isCompact) {
+function baseStyles(validationState, isCompact, appearance) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -69,6 +69,20 @@ function baseStyles(validationState, isCompact) {
       }
 
       var transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : 'transparent';
+        backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : 'transparent';
+        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-surface, ".concat(_colors.N30, ")");
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return _objectSpread(_objectSpread({}, css), {}, {
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -59,7 +59,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "unbindWindowKeydown", null);
 
-    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
+    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact', 'default'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })

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 = "15.5.0";
+const packageVersion = "15.6.0";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -64,6 +64,7 @@ export default function createSelect(WrappedComponent) {
         validationState,
         spacing,
         isMulti,
+        appearance,
         ...props
       } = this.props;
       const isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
@@ -74,7 +75,7 @@ export default function createSelect(WrappedComponent) {
         "aria-live": "assertive"
       }, props, {
         components: this.components,
-        styles: mergeStyles(baseStyles(validationState, isCompact), styles)
+        styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
       }));
     }
 

package/dist/es2019/styles.js

@@ -3,7 +3,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 const BORDER_WIDTH = 2;
 const ICON_PADDING = 2;
 const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact) {
+export default function baseStyles(validationState, isCompact, appearance) {
   return {
     container: (css, {
       isDisabled
@@ -49,6 +49,20 @@ export default function baseStyles(validationState, isCompact) {
       }
 
       const transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : 'transparent';
+        backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : 'transparent';
+        backgroundColorHover = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-surface, ${N30})`;
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return { ...css,
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -92,7 +92,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
 
-    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
+    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact', 'default'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(N80, ")")

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 = "15.5.0";
+var packageVersion = "15.6.0";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/createSelect.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["styles", "validationState", "spacing", "isMulti"];
+var _excluded = ["styles", "validationState", "spacing", "isMulti", "appearance"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -94,6 +94,7 @@ export default function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
+            appearance = _this$props.appearance,
             props = _objectWithoutProperties(_this$props, _excluded);
 
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
@@ -104,7 +105,7 @@ export default function createSelect(WrappedComponent) {
           "aria-live": "assertive"
         }, props, {
           components: this.components,
-          styles: mergeStyles(baseStyles(validationState, isCompact), styles)
+          styles: mergeStyles(baseStyles(validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/esm/styles.js

@@ -9,7 +9,7 @@ import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800,
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
-export default function baseStyles(validationState, isCompact) {
+export default function baseStyles(validationState, isCompact, appearance) {
   return {
     container: function container(css, _ref) {
       var isDisabled = _ref.isDisabled;
@@ -57,6 +57,20 @@ export default function baseStyles(validationState, isCompact) {
       }
 
       var transitionDuration = '200ms';
+
+      if (appearance === 'subtle') {
+        borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : 'transparent';
+        backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : 'transparent';
+        backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-surface, ".concat(N30, ")");
+      }
+
+      if (appearance === 'none') {
+        borderColor = 'transparent';
+        backgroundColor = 'transparent';
+        backgroundColorHover = 'transparent';
+        borderColorHover = 'transparent';
+      }
+
       return _objectSpread(_objectSpread({}, css), {}, {
         // Turn pointer events off when disabled - this makes it so hover etc don't work.
         pointerEvents: isDisabled ? 'none' : undefined,

package/dist/esm/version.json

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

package/dist/types/styles.d.ts

@@ -1,2 +1,2 @@
 import { StylesConfig, ValidationState } from './types';
-export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean): StylesConfig<Option, IsMulti>;
+export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean, appearance: 'default' | 'subtle' | 'none'): StylesConfig<Option, IsMulti>;

package/dist/types/types.d.ts

@@ -25,6 +25,7 @@ export interface OptionProps<Option = OptionType, IsMulti extends boolean = fals
 export interface SelectProps<OptionType, IsMulti extends boolean = false> extends ReactSelectProps<OptionType, IsMulti>, WithAnalyticsEventsProps {
     spacing?: 'compact' | 'default';
     validationState?: ValidationState;
+    appearance?: 'default' | 'subtle' | 'none';
 }
 export declare type ActionMeta<Option = OptionType> = RSActionMeta<Option>;
 export declare type InputActionMeta = RSInputActionMeta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.5.0",
+  "version": "15.6.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"