@channel.io/bezier-react 2.4.0 → 2.5.1

package/src/components/Slider/Slider.stories.tsx

@@ -1,15 +1,10 @@
-import { type Meta } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import { Slider } from './Slider'
 
 const meta: Meta<typeof Slider> = {
   component: Slider,
   argTypes: {
-    value: {
-      control: {
-        type: 'object',
-      },
-    },
     minStepsBetweenThumbs: {
       control: {
         type: 'number',
@@ -21,15 +16,21 @@ const meta: Meta<typeof Slider> = {
     onValueCommit: {
       action: 'onValueCommit',
     },
+    value: {
+      if: {
+        exists: true,
+        arg: 'value',
+      },
+    },
+    defaultValue: {
+      if: {
+        exists: true,
+        arg: 'defaultValue',
+      },
+    },
   },
-}
-export default meta
-
-export const Primary = {
   args: {
     width: 285,
-    defaultValue: [5],
-    value: undefined,
     disabled: false,
     guide: [5],
     min: 0,
@@ -38,3 +39,16 @@ export const Primary = {
     disableTooltip: false,
   },
 }
+export default meta
+
+export const Primary = {
+  args: {
+    value: [5],
+  },
+} satisfies StoryObj<typeof meta>
+
+export const Uncontrolled = {
+  args: {
+    defaultValue: [5],
+  },
+} satisfies StoryObj<typeof meta>

package/src/styles/components/layout.module.scss

@@ -17,6 +17,7 @@
   --b-right: var(--b-inset);
   --b-bottom: var(--b-inset);
   --b-left: var(--b-inset);
+  --b-basis: initial;
   --b-shrink: initial;
   --b-grow: initial;
   --b-background-color: initial;
@@ -29,8 +30,11 @@
 
   inset: var(--b-top) var(--b-right) var(--b-bottom) var(--b-left);
 
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  flex-basis: var(--b-basis);
   flex-grow: var(--b-grow);
   flex-shrink: var(--b-shrink);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 
   box-sizing: border-box;
   width: var(--b-width);

package/src/types/props-helpers.ts

@@ -60,6 +60,7 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
   right,
   bottom,
   left,
+  basis,
   shrink,
   grow,
   backgroundColor,
@@ -97,6 +98,7 @@ export const splitByLayoutProps = <Props extends LayoutProps>({
     right,
     bottom,
     left,
+    basis,
     shrink,
     grow,
     backgroundColor,
@@ -169,6 +171,7 @@ export const getLayoutStyles = ({
   right,
   bottom,
   left,
+  basis,
   shrink,
   grow,
   backgroundColor,
@@ -204,6 +207,7 @@ export const getLayoutStyles = ({
     '--b-right': cssDimension(right),
     '--b-bottom': cssDimension(bottom),
     '--b-left': cssDimension(left),
+    '--b-basis': cssDimension(basis),
     '--b-shrink': shrink,
     '--b-grow': grow,
     '--b-background-color': tokenCssVar(backgroundColor),

package/src/types/props.ts

@@ -342,12 +342,17 @@ export interface LayoutProps {
    */
   left?: React.CSSProperties['left']
   /**
-   * the flex-shrink factor of a flex item.
+   * the flex-basis value of a flex item.
+   * @default initial
+   */
+  basis?: React.CSSProperties['flexBasis']
+  /**
+   * the flex-shrink value of a flex item.
    * @default initial
    */
   shrink?: React.CSSProperties['flexShrink']
   /**
-   * the flex-grow factor of a flex item.
+   * the flex-grow value of a flex item.
    * @default initial
    */
   grow?: React.CSSProperties['flexGrow']