baseui 0.0.0-next-2ebe581 → 0.0.0-next-03a6fdb

package/button/styled-components.js

@@ -48,7 +48,7 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText
     },
     marginLeft: 0,

package/button/styled-components.js.flow

@@ -46,7 +46,10 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor:
+        $kind === KIND.minimal || $kind === KIND.tertiary
+          ? 'transparent'
+          : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText,
     },
     marginLeft: 0,

package/datepicker/day.js

@@ -357,6 +357,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $startOfMonth: this.dateHelpers.isStartOfMonth(date),
         $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+        $month: this.getMonthProp(),
         $outsideMonth: $outsideMonth,
         $outsideMonthWithinRange: $outsideMonthWithinRange,
         $peekNextMonth: this.props.peekNextMonth,

package/datepicker/day.js.flow

@@ -313,6 +313,7 @@ export default class Day<T = Date> extends React.Component<
       $isFocusVisible: this.state.isFocusVisible,
       $startOfMonth: this.dateHelpers.isStartOfMonth(date),
       $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+      $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,

package/datepicker/index.d.ts

@@ -242,6 +242,7 @@ export type SharedStylePropsT = {
   $isHeader: boolean;
   $isHighlighted: boolean;
   $isHovered: boolean;
+  $month: number;
   $outsideMonth: boolean;
   $pseudoHighlighted: boolean;
   $pseudoSelected: boolean;

package/datepicker/types.js.flow

@@ -231,6 +231,7 @@ export type SharedStylePropsT = {
   $isHighlighted: ?boolean,
   $isHovered: ?boolean,
   $isFocusVisible: ?boolean,
+  $month: ?number,
   $outsideMonth: ?boolean,
   $outsideMonthWithinRange: ?boolean,
   $peekNextMonth: ?boolean,

package/es/button/styled-components.js

@@ -39,7 +39,7 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   },
   marginLeft: 0,

package/es/datepicker/day.js

@@ -292,6 +292,7 @@ export default class Day extends React.Component {
       $isFocusVisible: this.state.isFocusVisible,
       $startOfMonth: this.dateHelpers.isStartOfMonth(date),
       $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+      $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,

package/es/select/select-component.js

@@ -797,7 +797,6 @@ class Select extends React.Component {
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
     return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-      size: 16,
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,

package/es/select/styled-components.js

@@ -375,31 +375,61 @@ function getSvgStyles({
 export const StyledSelectArrow = styled('svg', props => {
   const {
     $theme,
-    $disabled
+    $disabled,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export const StyledClearIcon = styled('svg', props => {
   const {
-    $theme
+    $theme,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";

package/esm/button/styled-components.js

@@ -45,7 +45,7 @@ export var BaseButton = styled('button', function (_ref) {
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText
     },
     marginLeft: 0,

package/esm/datepicker/day.js

@@ -344,6 +344,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $startOfMonth: this.dateHelpers.isStartOfMonth(date),
         $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+        $month: this.getMonthProp(),
         $outsideMonth: $outsideMonth,
         $outsideMonthWithinRange: $outsideMonthWithinRange,
         $peekNextMonth: this.props.peekNextMonth,

package/esm/select/select-component.js

@@ -926,7 +926,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,

package/esm/select/styled-components.js

@@ -326,25 +326,49 @@ function getSvgStyles(_ref4) {
 }
 
 export var StyledSelectArrow = styled('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, SIZE.mini, 16), _defineProperty(_sizes, SIZE.compact, 16), _defineProperty(_sizes, SIZE.default, 20), _defineProperty(_sizes, SIZE.large, 24), _sizes);
+  var size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export var StyledClearIcon = styled('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, SIZE.mini, 15), _defineProperty(_sizes2, SIZE.compact, 15), _defineProperty(_sizes2, SIZE.default, 18), _defineProperty(_sizes2, SIZE.large, 22), _sizes2);
+  var size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 StyledClearIcon.displayName = "StyledClearIcon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-2ebe581",
+  "version": "0.0.0-next-03a6fdb",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/select/select-component.js

@@ -947,7 +947,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,

package/select/select-component.js.flow

@@ -793,7 +793,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
     return (
       <ClearIcon
-        size={16}
         title={ariaLabel}
         aria-label={ariaLabel}
         onClick={this.clearValue}

package/select/styled-components.js

@@ -342,26 +342,50 @@ function getSvgStyles(_ref4) {
 }
 
 var StyledSelectArrow = (0, _index.styled)('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 16), _defineProperty(_sizes, _constants.SIZE.compact, 16), _defineProperty(_sizes, _constants.SIZE.default, 20), _defineProperty(_sizes, _constants.SIZE.large, 24), _sizes);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledSelectArrow = StyledSelectArrow;
 StyledSelectArrow.displayName = "StyledSelectArrow";
 var StyledClearIcon = (0, _index.styled)('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 15), _defineProperty(_sizes2, _constants.SIZE.compact, 15), _defineProperty(_sizes2, _constants.SIZE.default, 18), _defineProperty(_sizes2, _constants.SIZE.large, 22), _sizes2);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledClearIcon = StyledClearIcon;

package/select/styled-components.js.flow

@@ -425,22 +425,50 @@ function getSvgStyles({$theme}) {
 }
 
 export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $disabled} = props;
+  const {$theme, $disabled, $size} = props;
   const {colors} = $theme;
+
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return {
     ...getSvgStyles({$theme}),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
     cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 
 export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme} = props;
+  const {$theme, $size} = props;
   const {colors} = $theme;
+
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return {
     ...getSvgStyles({$theme}),
     color: colors.contentPrimary,
     cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });