@channel.io/bezier-react 1.6.2 → 1.7.0

package/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap

@@ -20,26 +20,6 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
   justify-content: var(--bezier-alpha-stack-justify);
 }
 
-.c1 {
-  position: relative;
-}
-
-.c2 {
-  padding: 0 2px;
-  margin-bottom: 4px;
-}
-
-.c10 {
-  padding: 0 2px;
-  margin-top: 4px;
-}
-
-.c5 {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 .c3 {
   font-size: 1.3rem;
   line-height: 1.8rem;
@@ -74,6 +54,26 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
   transition-property: color;
 }
 
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  padding: 0 2px;
+  margin-bottom: 4px;
+}
+
+.c10 {
+  padding: 0 2px;
+  margin-top: 4px;
+}
+
+.c5 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
 .c12 {
   display: block;
   text-align: left;
@@ -320,6 +320,57 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   justify-content: var(--bezier-alpha-stack-justify);
 }
 
+.c3 {
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: bold;
+  color: #000000D9;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: color;
+  transition-property: color;
+}
+
+.c8 {
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+  margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: bold;
+  color: #000000D9;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: color;
+  transition-property: color;
+}
+
+.c15 {
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+  margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: normal;
+  color: #00000066;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: color;
+  transition-property: color;
+}
+
 .c0 {
   position: relative;
 }
@@ -373,57 +424,6 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
   flex-wrap: wrap;
 }
 
-.c3 {
-  font-size: 1.4rem;
-  line-height: 1.8rem;
-  margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: bold;
-  color: #000000D9;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
-  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
-  transition-timing-function: cubic-bezier(.3,0,0,1);
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-property: color;
-  transition-property: color;
-}
-
-.c8 {
-  font-size: 1.3rem;
-  line-height: 1.8rem;
-  margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: bold;
-  color: #000000D9;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
-  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
-  transition-timing-function: cubic-bezier(.3,0,0,1);
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-property: color;
-  transition-property: color;
-}
-
-.c15 {
-  font-size: 1.3rem;
-  line-height: 1.8rem;
-  margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: normal;
-  color: #00000066;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
-  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
-  transition-timing-function: cubic-bezier(.3,0,0,1);
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-property: color;
-  transition-property: color;
-}
-
 .c16 {
   display: block;
   text-align: left;
@@ -670,20 +670,6 @@ exports[`FormControl > Snapshot > With single field 1`] = `
   justify-content: var(--bezier-alpha-stack-justify);
 }
 
-.c1 {
-  position: relative;
-}
-
-.c2 {
-  padding: 0 2px;
-  margin-bottom: 4px;
-}
-
-.c8 {
-  padding: 0 2px;
-  margin-top: 4px;
-}
-
 .c3 {
   font-size: 1.3rem;
   line-height: 1.8rem;
@@ -718,6 +704,20 @@ exports[`FormControl > Snapshot > With single field 1`] = `
   transition-property: color;
 }
 
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  padding: 0 2px;
+  margin-bottom: 4px;
+}
+
+.c8 {
+  padding: 0 2px;
+  margin-top: 4px;
+}
+
 .c10 {
   display: block;
   text-align: left;
@@ -850,6 +850,40 @@ exports[`FormControl > Snapshot > With single field 1`] = `
 `;
 
 exports[`FormControl > Snapshot > With single field and left label position 1`] = `
+.c3 {
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: bold;
+  color: #000000D9;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: color;
+  transition-property: color;
+}
+
+.c10 {
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+  margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: normal;
+  color: #00000066;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: color;
+  transition-property: color;
+}
+
 .c0 {
   position: relative;
 }
@@ -892,40 +926,6 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
   grid-column: 2;
 }
 
-.c3 {
-  font-size: 1.4rem;
-  line-height: 1.8rem;
-  margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: bold;
-  color: #000000D9;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
-  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
-  transition-timing-function: cubic-bezier(.3,0,0,1);
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-property: color;
-  transition-property: color;
-}
-
-.c10 {
-  font-size: 1.3rem;
-  line-height: 1.8rem;
-  margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: normal;
-  color: #00000066;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
-  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
-  transition-timing-function: cubic-bezier(.3,0,0,1);
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-property: color;
-  transition-property: color;
-}
-
 .c11 {
   display: block;
   text-align: left;

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

@@ -15,22 +15,12 @@ export default {
   title: getTitle(base),
   component: Slider,
   argTypes: {
-    width: {
+    value: {
       control: {
-        type: 'text',
+        type: 'array',
       },
     },
-    min: {
-      control: {
-        type: 'number',
-      },
-    },
-    max: {
-      control: {
-        type: 'number',
-      },
-    },
-    step: {
+    minStepsBetweenThumbs: {
       control: {
         type: 'number',
       },
@@ -38,11 +28,8 @@ export default {
     onValueChange: {
       action: 'onValueChange',
     },
-    onThumbPointerDown: {
-      action: 'onThumbPointerDown',
-    },
-    onThumbPointerUp: {
-      action: 'onThumbPointerUp',
+    onValueCommit: {
+      action: 'onValueCommit',
     },
   },
 } as Meta
@@ -51,53 +38,13 @@ const Template: Story<SliderProps> = (args) => <Slider {...args} />
 
 export const Primary = Template.bind({})
 Primary.args = {
-  width: '285',
-  defaultValue: [5],
-  value: [2],
-  min: 0,
-  max: 10,
-  step: 1,
-}
-
-export const Uncontrolled = Template.bind({})
-Uncontrolled.args = {
-  width: '285',
-  defaultValue: [5],
-  value: [2],
-  min: 0,
-  max: 10,
-  step: 1,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  width: '285',
-  defaultValue: [5],
-  value: [2],
-  min: 0,
-  max: 10,
-  step: 1,
-  disabled: true,
-}
-
-export const WithGuide = Template.bind({})
-WithGuide.args = {
-  width: '285',
+  width: 285,
   defaultValue: [5],
-  value: [2],
-  guide: [0, 1, 2, 3, 4, 5, 10],
-  min: 0,
-  max: 10,
-  step: 1,
-}
-
-export const MultipleThumbs = Template.bind({})
-MultipleThumbs.args = {
-  width: '285',
-  defaultValue: [3, 7],
-  value: [2, 4],
+  value: undefined,
+  disabled: false,
+  guide: [5],
   min: 0,
   max: 10,
   step: 1,
-  minStepsBetweenThumbs: 1,
+  disableTooltip: false,
 }

package/src/components/Forms/Slider/Slider.styled.ts

@@ -1,134 +1,86 @@
-import {
-  css,
-  styled,
-} from '~/src/foundation'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { styled } from '~/src/foundation'
 
 import DisabledOpacity from '~/src/constants/DisabledOpacity'
-import { toLength } from '~/src/utils/styleUtils'
+import type { InterpolationProps } from '~/src/types/Foundation'
 
 import { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins'
 
-import type SliderProps from './Slider.types'
-
-const SLIDER_TRACK_RANGE_HEIGHT = 6
-const SLIDER_THUMB_SIZE = 20
-const SLIDER_GUIDE_WIDTH = 2
-const SLIDER_GUIDE_HEIGHT = 8
-
-interface CalculateGuideBottomPosition {
-  gap: number
-}
-
-function calculateGuideBottomPosition({
-  gap,
-}: CalculateGuideBottomPosition) {
-  return css`
-    bottom: calc(${SLIDER_GUIDE_HEIGHT}px + ${SLIDER_GUIDE_HEIGHT / 2}px + ${gap}px);
-  `
-}
-
-interface CalculateGuideLeftPosition {
-  min: number
-  max: number
-  guideValue: number
-}
-
-function calculateGuideLeftPosition({
-  min,
-  max,
-  guideValue,
-}: CalculateGuideLeftPosition) {
-  const relativePositionPercentage = (guideValue / (max - min)) * 100
-  const thumbOffsetPx = (((max + min) / 2) - guideValue) * (SLIDER_THUMB_SIZE / ((max - min)))
-
-  return css`
-    left: calc(${relativePositionPercentage}% - ${SLIDER_GUIDE_WIDTH / 2}px + ${thumbOffsetPx}px);
-  `
-}
-
-interface SliderRootProps extends SliderProps {
-  width: NonNullable<SliderProps['width']>
-}
-
-export const SliderRoot = styled.div<SliderRootProps>`
+export const SliderPrimitiveRoot = styled(SliderPrimitive.Root)<InterpolationProps>`
+  --bezier-slider-width: auto;
+  --bezier-slider-thumb-size: 20px;
+
   position: relative;
   display: flex;
   align-items: center;
-
-  width: ${({ width }) => toLength(width, '36px')};
-  height: ${SLIDER_THUMB_SIZE}px;
-
+  width: var(--bezier-slider-width);
+  height: var(--bezier-slider-thumb-size);
   touch-action: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  cursor: pointer;
   user-select: none;
 
-  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: ${DisabledOpacity};
+  }
 
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['opacity'])};
   ${({ interpolation }) => interpolation}
 `
 
-interface SliderTrackProps extends SliderProps {}
-
-export const SliderTrack = styled.div<SliderTrackProps>`
+export const SliderPrimitiveTrack = styled(SliderPrimitive.Track)`
   position: relative;
   flex: 1;
-  height: ${SLIDER_TRACK_RANGE_HEIGHT}px;
-
-  ${({ foundation }) => foundation?.rounding?.round3}
-  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};
-
-  ${({ interpolation }) => interpolation}
+  height: 6px;
+  background-color: var(--bg-black-dark);
+  border-radius: 3px;
 `
 
-interface SliderRangeProps extends SliderProps {}
-
-export const SliderRange = styled.div<SliderRangeProps>`
+export const SliderPrimitiveRange = styled(SliderPrimitive.Range)`
   position: absolute;
   height: 100%;
-
-  ${({ foundation }) => foundation?.rounding?.round3}
-  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};
-
-  ${({ interpolation }) => interpolation}
+  background-color: var(--bgtxt-green-normal);
+  border-radius: 3px;
 `
 
-interface SliderGuideProps extends SliderProps {
-  min: NonNullable<SliderProps['min']>
-  max: NonNullable<SliderProps['max']>
-  guideValue: number
-}
+export const GuideContainer = styled.div`
+  --bezier-slider-guide-height: 8px;
 
-export const SliderGuide = styled.div<SliderGuideProps>`
   position: absolute;
-  ${calculateGuideBottomPosition({ gap: 3 })}
-  ${({ min, max, guideValue }) => calculateGuideLeftPosition({ min, max, guideValue })}
-
-  width: ${SLIDER_GUIDE_WIDTH}px;
-  height: ${SLIDER_GUIDE_HEIGHT}px;
+  top: calc(-1 * (var(--bezier-slider-guide-height) + 3px));
+  left: calc(var(--bezier-slider-thumb-size) / 2);
+  width: calc(100% - var(--bezier-slider-thumb-size));
+`
 
-  ${({ foundation }) => foundation?.rounding?.round1}
-  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-light']};
+export const SliderGuide = styled.div`
+  --bezier-slider-guide-left: 0;
 
-  ${({ interpolation }) => interpolation}
+  position: absolute;
+  top: 0;
+  left: var(--bezier-slider-guide-left);
+  width: 2px;
+  height: var(--bezier-slider-guide-height);
+  background-color: var(--bg-black-light);
+  border-radius: 1px;
+  transform: translateX(-50%);
 `
 
-interface SliderThumbProps extends SliderProps {}
-
-export const SliderThumb = styled.div<SliderThumbProps>`
+export const SliderThumb = styled.div`
   all: unset;
   display: block;
+  width: var(--bezier-slider-thumb-size);
+  height: var(--bezier-slider-thumb-size);
+  border-radius: 12px;
 
-  width: ${SLIDER_THUMB_SIZE}px;
-  height: ${SLIDER_THUMB_SIZE}px;
-
-  ${({ foundation }) => foundation?.rounding?.round12}
   ${({ foundation }) => foundation?.elevation?.ev2()}
-  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
+  /* stylelint-disable order/properties-order */
+  /* NOTE: Override the background-color property inside ev mixin */
+  background-color: var(--bgtxt-absolute-white-dark);
 
   &:hover {
     ${({ foundation }) => foundation?.elevation?.ev3()}
-    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
+    background-color: var(--bgtxt-absolute-white-dark);
   }
 
   &:focus-visible {
@@ -136,5 +88,4 @@ export const SliderThumb = styled.div<SliderThumbProps>`
   }
 
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['box-shadow'])}
-  ${({ interpolation }) => interpolation}
 `