feat(FilterListBox): add component

.changeset/angry-boxes-speak.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improve the layout of Menu component.

.changeset/clever-rings-float.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+`wrapWithField` no longer wrap the input component with a field if no label is provided and `forceField` prop is not set.

.changeset/cool-pianos-lie.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add a new icon ChartKPI.

.changeset/purple-carrots-jump.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add FilterPicker component for single and multiple picker experience with a filter.

.changeset/short-humans-crash.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Split ListBox into two components: simple ListBox and FilterListBox with search input.

.cursor/rules/coding.mdc

@@ -0,0 +1,12 @@
+---
+alwaysApply: true
+---
+
+# Flow rules
+- Don't respond with "You're right!", "Great idea!" and so on. Get straight to the point.
+- **Stop and describe the reason**, if you can't closely implement the task or need a different approach from what was asked.
+- Do not run tests if you only changed stories or documentation since the last test run.
+
+# Coding rules
+
+- Use named imports from react (like `useCallback`) instead of using the `React` instance. Avoid: `React.useCallback`.

.size-limit.cjs

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

package.json

@@ -74,6 +74,7 @@
     "@react-types/shared": "^3.27.0",
     "@sparticuz/chromium": "^137.0.1",
     "@tabler/icons-react": "^3.31.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@vitejs/plugin-react": "^4.3.2",
     "clipboard-copy": "^4.0.1",

src/components/actions/Button/Button.stories.tsx

@@ -29,7 +29,7 @@ export default {
       },
     },
     size: {
-      options: ['small', 'medium', 'large'],
+      options: ['tiny', 'small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Button size',
       table: {

src/components/actions/Button/Button.tsx

@@ -27,7 +27,7 @@ export interface CubeButtonProps extends CubeActionProps {
     | 'outline'
     | 'neutral'
     | (string & {});
-  size?: 'small' | 'medium' | 'large' | (string & {});
+  size?: 'tiny' | 'small' | 'medium' | 'large' | (string & {});
 }
 
 export type ButtonVariant =
@@ -83,20 +83,23 @@ export const DEFAULT_BUTTON_STYLES = {
   reset: 'button',
   outlineOffset: 1,
   padding: {
-    '': '0 (2x - 1bw)',
-    '[data-size="small"]': '0 (1x - 1bw)',
-    '[data-size="medium"]': '0 (1.5x - 1bw)',
-    '[data-size="large"]': '0 (2.25x - 1bw)',
+    '': '.5x (2x - 1bw)',
+    '[data-size="tiny"]': '.5x (1x - 1bw)',
+    '[data-size="small"]': '.5x (1x - 1bw)',
+    '[data-size="medium"]': '.5x (1.5x - 1bw)',
+    '[data-size="large"]': '.5x (2.25x - 1bw)',
     'single-icon-only | [data-type="link"]': 0,
   },
   width: {
     '': 'initial',
+    '[data-size="tiny"] & single-icon-only': '3.5x 3.5x',
     '[data-size="small"] & single-icon-only': '4x 4x',
     '[data-size="medium"] & single-icon-only': '5x 5x',
     '[data-size="large"] & single-icon-only': '6x 6x',
   },
   height: {
     '': 'initial',
+    '[data-size="tiny"]': '3.5x 3.5x',
     '[data-size="small"]': '4x 4x',
     '[data-size="medium"]': '5x 5x',
     '[data-size="large"]': '6x 6x',
@@ -161,13 +164,13 @@ export const DEFAULT_OUTLINE_STYLES: Styles = {
   fill: {
     '': '#dark.0',
     hovered: '#dark.03',
-    'pressed | selected': '#dark.06',
+    'pressed | (selected & !hovered)': '#dark.06',
     '[disabled] | disabled': '#dark.04',
   },
   color: {
     '': '#dark-02',
     hovered: '#dark-02',
-    'pressed | selected': '#dark',
+    'pressed | (selected & !hovered)': '#dark',
     '[disabled] | disabled': '#dark-04',
   },
 } as const;
@@ -180,7 +183,7 @@ export const DEFAULT_NEUTRAL_STYLES: Styles = {
   fill: {
     '': '#dark.0',
     hovered: '#dark.03',
-    'pressed | selected': '#dark.06',
+    'pressed | (selected & !hovered)': '#dark.06',
   },
   color: {
     '': '#dark-02',
@@ -199,7 +202,7 @@ export const DEFAULT_CLEAR_STYLES: Styles = {
   fill: {
     '': '#purple.0',
     hovered: '#purple.16',
-    'pressed | selected': '#purple.10',
+    'pressed | (selected & !hovered)': '#purple.10',
   },
   color: {
     '': '#purple-text',
@@ -273,7 +276,7 @@ export const DANGER_OUTLINE_STYLES: Styles = {
   fill: {
     '': '#danger.0',
     hovered: '#danger.1',
-    'pressed | selected': '#danger.05',
+    'pressed | (selected & !hovered)': '#danger.05',
     '[disabled] | disabled': '#dark.04',
   },
   color: {
@@ -290,11 +293,11 @@ export const DANGER_NEUTRAL_STYLES: Styles = {
   fill: {
     '': '#dark.0',
     hovered: '#dark.04',
-    'pressed | selected': '#dark.05',
+    'pressed | (selected & !hovered)': '#dark.05',
   },
   color: {
     '': '#dark-02',
-    'pressed | selected': '#danger-text',
+    'pressed | (selected & !hovered)': '#danger-text',
     '[disabled] | disabled': '#dark-04',
   },
 } as const;
@@ -308,7 +311,7 @@ export const DANGER_CLEAR_STYLES: Styles = {
   fill: {
     '': '#danger.0',
     hovered: '#danger.1',
-    'pressed | selected': '#danger.05',
+    'pressed | (selected & !hovered)': '#danger.05',
   },
   color: {
     '': '#danger-text',
@@ -382,7 +385,7 @@ export const SUCCESS_OUTLINE_STYLES: Styles = {
   fill: {
     '': '#success.0',
     hovered: '#success.1',
-    'pressed | selected': '#success.05',
+    'pressed | (selected & !hovered)': '#success.05',
     '[disabled] | disabled': '#dark.04',
   },
   color: {
@@ -399,11 +402,11 @@ export const SUCCESS_NEUTRAL_STYLES: Styles = {
   fill: {
     '': '#dark.0',
     hovered: '#dark.04',
-    'pressed | selected': '#dark.05',
+    'pressed | (selected & !hovered)': '#dark.05',
   },
   color: {
     '': '#dark-02',
-    'pressed | selected': '#success-text',
+    'pressed | (selected & !hovered)': '#success-text',
     '[disabled] | disabled': '#dark-04',
   },
 } as const;
@@ -417,7 +420,7 @@ export const SUCCESS_CLEAR_STYLES: Styles = {
   fill: {
     '': '#success.0',
     hovered: '#success.1',
-    'pressed | selected': '#success.05',
+    'pressed | (selected & !hovered)': '#success.05',
   },
   color: {
     '': '#success-text',
@@ -489,7 +492,7 @@ export const SPECIAL_OUTLINE_STYLES: Styles = {
   fill: {
     '': '#white.0',
     hovered: '#white.18',
-    'pressed | selected': '#white.12',
+    'pressed | (selected & !hovered)': '#white.12',
     '[disabled] | disabled': '#white.12',
   },
   color: {
@@ -506,7 +509,7 @@ export const SPECIAL_NEUTRAL_STYLES: Styles = {
   fill: {
     '': '#white.0',
     hovered: '#white.12',
-    'pressed | selected': '#white.18',
+    'pressed | (selected & !hovered)': '#white.18',
   },
   color: {
     '': '#white',
@@ -619,14 +622,14 @@ export const Button = forwardRef(function Button(
     if (icon) {
       if (!specifiedLabel) {
         accessibilityWarning(
-          'If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.',
+          'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',
         );
         label = 'Unnamed'; // fix to avoid warning in production
       }
     } else {
       if (!specifiedLabel) {
         accessibilityWarning(
-          'If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.',
+          'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',
         );
         label = 'Unnamed'; // fix to avoid warning in production
       }

src/components/actions/CommandMenu/CommandMenu.stories.tsx

@@ -757,7 +757,7 @@ HotkeyTesting.args = {
 };
 
 export const MediumSize: StoryFn<CubeCommandMenuProps<any>> = (args) => (
-  <CommandMenu width="20x 50x" {...args} size="medium">
+  <CommandMenu width="20x 50x" {...args}>
     {basicCommands.map((command) => (
       <CommandMenu.Item
         key={command.key}
@@ -774,6 +774,7 @@ export const MediumSize: StoryFn<CubeCommandMenuProps<any>> = (args) => (
 MediumSize.args = {
   searchPlaceholder: 'Medium size command palette...',
   autoFocus: true,
+  size: 'medium',
 };
 
 export const WithDialog: StoryFn<CubeCommandMenuProps<any>> = (args) => (
@@ -834,6 +835,7 @@ export const WithHeaderAndFooter: StoryFn<CubeCommandMenuProps<any>> = (
         </FooterText>
       </>
     }
+    size="medium"
   >
     {basicCommands.map((command) => (
       <CommandMenu.Item
@@ -929,6 +931,7 @@ export const WithDialogContainer: StoryFn<CubeCommandMenuProps<any>> = (
 WithDialogContainer.args = {
   searchPlaceholder: 'Search commands...',
   autoFocus: true,
+  size: 'medium',
 };
 
 WithDialogContainer.play = async ({ canvasElement }) => {

src/components/actions/CommandMenu/CommandMenu.test.tsx

@@ -878,22 +878,6 @@ describe('CommandMenu', () => {
       expect(commandMenu).toHaveAttribute('data-is-tray');
     });
 
-    it('should apply modal mod when used inside a modal dialog', () => {
-      const { DialogContext } = require('../../overlays/Dialog/context');
-
-      render(
-        <DialogContext.Provider value={{ type: 'modal' }}>
-          <CommandMenu qa="test-command-menu">
-            <CommandMenu.Item key="item1">Item 1</CommandMenu.Item>
-            <CommandMenu.Item key="item2">Item 2</CommandMenu.Item>
-          </CommandMenu>
-        </DialogContext.Provider>,
-      );
-
-      const commandMenu = screen.getByTestId('test-command-menu');
-      expect(commandMenu).toHaveAttribute('data-is-modal');
-    });
-
     it('should not apply any special mods when used standalone', () => {
       render(
         <CommandMenu qa="test-command-menu">
@@ -905,7 +889,6 @@ describe('CommandMenu', () => {
       const commandMenu = screen.getByTestId('test-command-menu');
       expect(commandMenu).not.toHaveAttribute('data-is-popover');
       expect(commandMenu).not.toHaveAttribute('data-is-tray');
-      expect(commandMenu).not.toHaveAttribute('data-is-modal');
     });
   });
 });