feat(ListBox): select all (#735)

Author: tenphi

.changeset/curly-pans-invite.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix flipping of popover in FilterPicker if it's already open.

.changeset/nervous-rules-impress.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improved Button layout.

.changeset/nice-comics-fix.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improved FilterPicker layout with additional wrapper for consistency.

.changeset/slow-fans-develop.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix initial state inconsistency in FilterPicker.

.changeset/sour-donkeys-return.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Overflow text ellipsis in Buttons with icons by default.

.changeset/thirty-bikes-play.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `showSelectAll` and `selectAllLabel` options for ListBox, FilterListBox, and FilterPicker to add "Select All" option. The label can be customized.

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '280kB',
+    limit: '281kB',
   },
   {
     name: 'Tree shaking (just a Button)',

src/components/actions/Button/Button.docs.mdx

@@ -55,7 +55,7 @@ The `mods` prop accepts the following modifiers you can override:
 | loading | `boolean` | Displays loading spinner. |
 | selected | `boolean` | Displays selected state. |
 | with-icons | `boolean` | Indicates that the button contains at least one icon. |
-| single-icon-only | `boolean` | Icon-only button without text. |
+| single-icon | `boolean` | Icon-only button without text. |
 
 ## Variants
 

src/components/actions/Button/Button.tsx

@@ -10,6 +10,7 @@ import {
   TEXT_STYLES,
 } from '../../../tasty';
 import { accessibilityWarning } from '../../../utils/warnings';
+import { Text } from '../../content/Text';
 import { CubeActionProps } from '../Action/Action';
 import { useAction } from '../use-action';
 
@@ -60,8 +61,16 @@ const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 
 export const DEFAULT_BUTTON_STYLES = {
   display: 'inline-grid',
-  placeItems: 'center stretch',
-  placeContent: 'center',
+  flow: 'column',
+  placeItems: 'center start',
+  placeContent: {
+    '': 'center',
+    'right-icon | suffix': 'center stretch',
+  },
+  gridColumns: {
+    '': 'initial',
+    'left-icon | loading | prefix': 'max-content',
+  },
   position: 'relative',
   margin: 0,
   boxSizing: 'border-box',
@@ -73,7 +82,6 @@ export const DEFAULT_BUTTON_STYLES = {
     '': '.75x',
     '[data-size="small"]': '.5x',
   },
-  flow: 'column',
   preset: {
     '': 't3m',
     '[data-size="xsmall"]': 't4',
@@ -85,19 +93,19 @@ export const DEFAULT_BUTTON_STYLES = {
   outlineOffset: 1,
   padding: {
     '': '.5x (1.5x - 1bw)',
-    '[data-size="small"] | [data-size="xsmall"]': '.5x (1x - 1bw)',
+    '[data-size="small"] | [data-size="xsmall"]': '.5x (1.25x - 1bw)',
     '[data-size="medium"]': '.5x (1.5x - 1bw)',
-    '[data-size="large"]': '.5x (2x - 1bw)',
-    '[data-size="xlarge"]': '.5x (2.25x - 1bw)',
-    'single-icon-only | [data-type="link"]': 0,
+    '[data-size="large"]': '.5x (1.75x - 1bw)',
+    '[data-size="xlarge"]': '.5x (2x - 1bw)',
+    'single-icon | [data-type="link"]': 0,
   },
   width: {
     '': 'initial',
-    '[data-size="xsmall"] & single-icon-only': '@size-xs @size-xs',
-    '[data-size="small"] & single-icon-only': '@size-sm @size-sm',
-    '[data-size="medium"] & single-icon-only': '@size-md @size-md',
-    '[data-size="large"] & single-icon-only': '@size-lg @size-lg',
-    '[data-size="xlarge"] & single-icon-only': '@size-xl @size-xl',
+    '[data-size="xsmall"] & single-icon': '@size-xs @size-xs',
+    '[data-size="small"] & single-icon': '@size-sm @size-sm',
+    '[data-size="medium"] & single-icon': '@size-md @size-md',
+    '[data-size="large"] & single-icon': '@size-lg @size-lg',
+    '[data-size="xlarge"] & single-icon': '@size-xl @size-xl',
     '[data-type="link"]': 'initial',
   },
   height: {
@@ -114,6 +122,20 @@ export const DEFAULT_BUTTON_STYLES = {
     '': true,
     '[data-type="link"] & !focused': 0,
   },
+
+  ButtonIcon: {
+    width: 'max-content',
+  },
+
+  '& [data-element="ButtonIcon"]:first-child:not(:last-child)': {
+    marginLeft: '-.5x',
+    placeSelf: 'center start',
+  },
+
+  '& [data-element="ButtonIcon"]:last-child:not(:first-child)': {
+    marginRight: '-.5x',
+    placeSelf: 'center end',
+  },
 } as const;
 
 // ---------- DEFAULT THEME ----------
@@ -657,12 +679,16 @@ export const Button = forwardRef(function Button(
     !children
   );
 
+  const hasIcons = !!icon || !!rightIcon;
+
   const modifiers = useMemo(
     () => ({
       loading: isLoading,
       selected: isSelected,
-      'with-icons': !!icon || !!rightIcon,
-      'single-icon-only': singleIcon,
+      'with-icons': hasIcons,
+      'left-icon': !!icon,
+      'right-icon': !!rightIcon,
+      'single-icon': singleIcon,
       ...mods,
     }),
     [mods, isDisabled, isLoading, isSelected, singleIcon],
@@ -696,7 +722,12 @@ export const Button = forwardRef(function Button(
           <LoadingIcon data-element="ButtonIcon" />
         )
       ) : null}
-      {children}
+      {((hasIcons && children) || (!!icon && !!rightIcon)) &&
+      typeof children === 'string' ? (
+        <Text ellipsis>{children}</Text>
+      ) : (
+        children
+      )}
       {rightIcon}
     </ButtonElement>
   );

src/components/actions/Menu/styled.tsx

@@ -172,6 +172,14 @@ export const StyledItem = tasty({
       placeItems: 'center',
     },
 
+    '& [data-element="ButtonIcon"]:first-child:not(:last-child)': {
+      marginLeft: 0,
+    },
+
+    '& [data-element="ButtonIcon"]:last-child:not(:first-child)': {
+      marginRight: 0,
+    },
+
     Postfix: {
       color: {
         '': '#dark-03',