Merge remote-tracking branch 'origin' into feat-combobox

Author: tenphi

.changeset/afraid-eels-drive.md

@@ -1,5 +1,21 @@
 # @cube-dev/ui-kit
 
+## 0.81.0
+
+### Minor Changes
+
+- [#820](https://github.com/cube-js/cube-ui-kit/pull/820) [`bcc9783e`](https://github.com/cube-js/cube-ui-kit/commit/bcc9783e284b209c053b15673990ce2c633178ac) Thanks [@tenphi](https://github.com/tenphi)! - New Switch sizes: `small` -> `medium` (and now default). new `small` size.
+
+## 0.80.2
+
+### Patch Changes
+
+- [#774](https://github.com/cube-js/cube-ui-kit/pull/774) [`3f8c4b7f`](https://github.com/cube-js/cube-ui-kit/commit/3f8c4b7f40b1869abe694135803e7b784e1c51c2) Thanks [@tenphi](https://github.com/tenphi)! - Improve style state application for padding and margin styles making it predictable.
+
+- [#819](https://github.com/cube-js/cube-ui-kit/pull/819) [`852e73f0`](https://github.com/cube-js/cube-ui-kit/commit/852e73f006ef57c5d52ddbbc420f35e16989aaa5) Thanks [@tenphi](https://github.com/tenphi)! - Add CubePauseIcon and CubePlayIcon.
+
+- [#816](https://github.com/cube-js/cube-ui-kit/pull/816) [`13fb4505`](https://github.com/cube-js/cube-ui-kit/commit/13fb4505adcae3f905b6b6a1c21de9fd291886fc) Thanks [@tenphi](https://github.com/tenphi)! - Support controllable filtering in FilterListBox and FilterPicker.
+
 ## 0.80.1
 
 ### Patch Changes

.changeset/tender-trees-sleep.md

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.80.1",
+  "version": "0.81.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

CHANGELOG.md

@@ -82,7 +82,7 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Switch size',
       table: {
@@ -92,29 +92,21 @@ export default {
 
     /* Events */
     onChange: {
-      action: 'change',
       description: 'Callback fired when the switch value changes',
       control: { type: null },
     },
     onFocus: {
-      action: 'focus',
       description: 'Callback fired when the switch receives focus',
       control: { type: null },
     },
     onBlur: {
-      action: 'blur',
       description: 'Callback fired when the switch loses focus',
       control: { type: null },
     },
   },
 };
 
-const Template: StoryFn<CubeSwitchProps> = (props) => (
-  <Switch
-    {...props}
-    onChange={(isSelected) => console.log('change', isSelected)}
-  />
-);
+const Template: StoryFn<CubeSwitchProps> = (props) => <Switch {...props} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -127,12 +119,6 @@ WithDefaultSelected.args = {
   defaultSelected: true,
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  children: 'Small switch',
-  size: 'small',
-};
-
 export const Invalid = Template.bind({});
 Invalid.args = {
   children: 'Required switch',
@@ -152,21 +138,36 @@ Loading.args = {
   isLoading: true,
 };
 
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: 'Toggle feature',
+};
+
+// Stories showing all sizes for visual comparison
+const SizesTemplate: StoryFn<CubeSwitchProps> = (props) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <Switch {...props} size="small">
+      Small switch
+    </Switch>
+    <Switch {...props} size="medium">
+      Medium switch
+    </Switch>
+    <Switch {...props} size="large">
+      Large switch
+    </Switch>
+  </div>
+);
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = {};
+
 // Stories showing both selected and unselected states for visual testing
 const MultiStateTemplate: StoryFn<CubeSwitchProps> = (props) => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-    <Switch
-      {...props}
-      isSelected={false}
-      onChange={(isSelected) => console.log('unselected change', isSelected)}
-    >
+    <Switch {...props} isSelected={false}>
       {props.children} (unselected)
     </Switch>
-    <Switch
-      {...props}
-      isSelected={true}
-      onChange={(isSelected) => console.log('selected change', isSelected)}
-    >
+    <Switch {...props} isSelected={true}>
       {props.children} (selected)
     </Switch>
   </div>

package.json

@@ -22,6 +22,7 @@ import {
   castNullableIsSelected,
   WithNullableSelected,
 } from '../../../utils/react/nullableValue';
+import { useId } from '../../../utils/react/useId';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { HiddenInput } from '../../HiddenInput';
@@ -52,24 +53,28 @@ const SwitchElement = tasty({
     fill: {
       '': '#white',
       checked: '#purple',
-      disabled: '#border',
+      disabled: '#border.5',
+      'disabled & checked': '#border',
     },
     color: {
       '': '#dark-03',
       checked: '#white',
     },
     border: {
       '': '#dark-05',
-      checked: '#purple',
-      disabled: '#dark-05',
+      checked: '#purple-text',
+      disabled: '#dark-05.5',
+      invalid: '#danger',
     },
     width: {
-      '': '5.25x 5.25x',
-      '[data-size="small"]': '4x 4x',
+      '': '5x 5x',
+      '[data-size="medium"]': '4x 4x',
+      '[data-size="small"]': '3x 3x',
     },
     height: {
       '': '3x 3x',
-      '[data-size="small"]': '2.5x 2.5x',
+      '[data-size="medium"]': '2.5x 2.5x',
+      '[data-size="small"]': '2x 2x',
     },
     outline: {
       '': '#purple-text.0',
@@ -78,35 +83,37 @@ const SwitchElement = tasty({
     outlineOffset: 1,
     transition: 'theme',
     cursor: 'pointer',
-    shadow: {
-      '': '0 0 0 0 #clear',
-      invalid: '0 0 0 1bw #white, 0 0 0 1ow #danger',
-    },
 
     Thumb: {
       position: 'absolute',
       width: {
         '': '2x 2x',
-        '[data-size="small"]': '1.5x 1.5x',
+        '[data-size="medium"]': '1.5x 1.5x',
+        '[data-size="small"]': '1.25x 1.25x',
       },
       height: {
         '': '2x 2x',
-        '[data-size="small"]': '1.5x 1.5x',
+        '[data-size="medium"]': '1.5x 1.5x',
+        '[data-size="small"]': '1.25x 1.25x',
       },
       radius: 'round',
       fill: {
         '': 'currentColor',
-        disabled: '#white.7',
+        disabled: '#current.5',
+        'disabled & checked': '#white.8',
       },
       top: {
         '': '.375x',
-        '[data-size="small"]': '.375x',
+        '[data-size="medium"]': '.375x',
+        '[data-size="small"]': '.25x',
       },
       left: {
         '': '.375x',
-        '[data-size="small"]': '.375x',
-        checked: '2.5x',
-        'checked & [data-size="small"]': '1.75x',
+        '[data-size="medium"]': '.375x',
+        '[data-size="small"]': '.25x',
+        checked: '2.25x',
+        'checked & [data-size="medium"]': '1.75x',
+        'checked & [data-size="small"]': '1.25x',
       },
       transition: 'left, theme',
       cursor: 'pointer',
@@ -121,8 +128,9 @@ export interface CubeSwitchProps
     FieldBaseProps,
     AriaSwitchProps {
   inputStyles?: Styles;
+  fieldStyles?: Styles;
   isLoading?: boolean;
-  size?: 'large' | 'small';
+  size?: 'large' | 'medium' | 'small';
 }
 
 function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
@@ -148,10 +156,13 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
     isLoading,
     labelPosition,
     inputStyles,
+    fieldStyles,
     validationState,
-    size = 'large',
+    size = 'medium',
   } = props;
 
+  const id = useId(props.id);
+
   let styles = extractStyles(props, OUTER_STYLES);
 
   inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
@@ -162,16 +173,7 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
   let inputRef = useRef(null);
   let domRef = useFocusableRef(ref, inputRef);
 
-  let { inputProps } = useSwitch(
-    {
-      ...props,
-      ...(typeof label === 'string' && label.trim()
-        ? { 'aria-label': label }
-        : {}),
-    },
-    useToggleState(props),
-    inputRef,
-  );
+  let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
 
   const mods = {
     checked: inputProps.checked,
@@ -189,12 +191,14 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
       qa={qa || 'SwitchWrapper'}
       mods={mods}
       data-size={size}
+      styles={styles}
       {...hoverProps}
     >
       <HiddenInput
         data-qa="HiddenInput"
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
+        id={id}
       />
       <SwitchElement
         qa="Switch"
@@ -216,10 +220,15 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
 
   return wrapWithField(switchField, domRef, {
     ...props,
+    id,
+    labelProps: {
+      ...props.labelProps,
+      for: id,
+    },
     children: null,
     labelStyles,
     inputStyles,
-    styles,
+    styles: fieldStyles,
   });
 }
 

src/components/fields/Switch/Switch.stories.tsx

@@ -0,0 +1,20 @@
+import { wrapIcon } from './wrap-icon';
+
+export const CubePauseIcon = wrapIcon(
+  'CubePauseIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M21 12.5V7.991a1.98 1.98 0 0 0-1-1.717l-7-4.008a2.02 2.02 0 0 0-2 0L4 6.273c-.619.355-1 1.01-1 1.718v8.018c0 .709.381 1.363 1 1.717l7 4.008c.305.174.65.265 1 .265m0 0c.35 0 .695-.091 1-.265m-1 .265V12m0 0 8.73-5.04M12 12 3.27 6.96M17 17v5m4-5v5"
+    />
+  </svg>,
+);

src/components/fields/Switch/Switch.tsx

@@ -0,0 +1,20 @@
+import { wrapIcon } from './wrap-icon';
+
+export const CubePlayIcon = wrapIcon(
+  'CubePlayIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M21 13.5V7.991a1.98 1.98 0 0 0-1-1.717l-7-4.008a2.02 2.02 0 0 0-2 0L4 6.273c-.619.355-1 1.01-1 1.718v8.018c0 .709.381 1.363 1 1.717l7 4.008c.305.174.65.265 1 .265m0 0c.35 0 .695-.091 1-.265m-1 .265V12m0 0 8.73-5.04M12 12 3.27 6.96M17 16v6l5-3z"
+    />
+  </svg>,
+);

src/icons/CubePauseIcon.tsx

@@ -42,6 +42,8 @@ export { CodeIcon } from './CodeIcon';
 export { CopyIcon } from './CopyIcon';
 export { CountIcon } from './CountIcon';
 export { CubeIcon } from './CubeIcon';
+export { CubePauseIcon } from './CubePauseIcon';
+export { CubePlayIcon } from './CubePlayIcon';
 export { CurrencyDollarIcon } from './CurrencyDollarIcon';
 export { DangerIcon } from './DangerIcon';
 export { DashboardIcon } from './DashboardIcon';