baseui 10.7.2 → 10.9.0

package/a11y/a11y.js

@@ -140,8 +140,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(_index2.Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(_index2.Paragraph3, {
+  }, /*#__PURE__*/React.createElement(_index2.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(_index2.ParagraphSmall, {
       key: index
     }, violation.description);
   }))));

package/a11y/a11y.js.flow

@@ -11,7 +11,7 @@ import * as React from 'react';
 import axe from 'axe-core';
 
 import {Layer, TetherBehavior, TETHER_PLACEMENT} from '../layer/index.js';
-import {Paragraph3, Caption1} from '../typography/index.js';
+import {ParagraphSmall, ParagraphXSmall} from '../typography/index.js';
 import {styled} from '../styles/index.js';
 import {ThemeContext} from '../styles/theme-provider.js';
 
@@ -101,9 +101,9 @@ function Violation(props: ViolationPropsT) {
           $top={`${offset.top}px` || '0px'}
           $left={`${offset.left}px` || '0px'}
         >
-          <Caption1>{props.target}</Caption1>
+          <ParagraphXSmall>{props.target}</ParagraphXSmall>
           {props.violations.map((violation, index) => (
-            <Paragraph3 key={index}>{violation.description}</Paragraph3>
+            <ParagraphSmall key={index}>{violation.description}</ParagraphSmall>
           ))}
         </ViolationContainer>
       </TetherBehavior>

package/button/styled-components.js

@@ -46,11 +46,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -275,10 +278,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === _constants.KIND.primary || $kind === _constants.KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
 
   switch ($size) {
@@ -316,12 +345,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -409,10 +438,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
     var height, width;

package/button/styled-components.js.flow

@@ -46,11 +46,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor:
-        $kind === KIND.minimal || $kind === KIND.tertiary
-          ? 'transparent'
-          : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText,
+      ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
     },
     marginLeft: 0,
     marginTop: 0,
@@ -229,6 +225,30 @@ function getFontStyles({$theme, $size}) {
   }
 }
 
+function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill,
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText,
+      };
+    }
+  }
+
+  return {
+    backgroundColor:
+      $kind === KIND.minimal || $kind === KIND.tertiary
+        ? 'transparent'
+        : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText,
+  };
+}
+
 function getPaddingStyles({$theme, $size, $shape}) {
   const iconShape =
     $shape === SHAPE.square ||

package/combobox/combobox.js

@@ -60,6 +60,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -322,6 +323,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -360,9 +362,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -375,7 +376,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 var _default = Combobox;

package/combobox/combobox.js.flow

@@ -38,6 +38,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -274,6 +275,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // eslint-disable-next-line flowtype/no-weak-types
             ref={(listboxRef: any)}
             role="listbox"
+            aria-label={listBoxLabel}
             $width={listboxWidth}
             {...listBoxProps}
           >
@@ -322,10 +324,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           <OverriddenInput
             inputRef={handleInputRef}
             aria-activedescendant={
-              selectionIndex >= 0 ? activeDescendantId : undefined
+              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
             }
             aria-autocomplete="list"
-            aria-controls={listboxId}
             disabled={disabled}
             error={error}
             name={name}
@@ -338,6 +339,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
+            {...(isOpen ? {'aria-controls': listboxId} : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/types.js.flow

@@ -18,6 +18,8 @@ export type PropsT<OptionT = mixed> = {|
   disabled?: boolean,
   // Proxies value through to Input component.
   error?: boolean,
+  // Label used for the listbox/popup with options
+  listBoxLabel?: string,
   // Used to render a custom node besides the default.
   mapOptionToNode?: React.AbstractComponent<{|
     isSelected: boolean,

package/data-table/column-categorical.js

@@ -208,7 +208,7 @@ function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i

package/data-table/column-categorical.js.flow

@@ -14,7 +14,7 @@ import {Checkbox, StyledLabel} from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron, withStyle} from '../styles/index.js';
-import {Label3} from '../typography/index.js';
+import {LabelSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS} from './constants.js';
@@ -184,7 +184,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
         })}
       >
         {!filteredCategories.length && (
-          <Label3>{locale.datatable.categoricalFilterEmpty}</Label3>
+          <LabelSmall>{locale.datatable.categoricalFilterEmpty}</LabelSmall>
         )}
 
         {Boolean(filteredCategories.length) &&