feat: remove deprecated Modal, RadioGroup, Separator and Text

.changeset/sixty-moons-sit.md

@@ -0,0 +1,19 @@
+---
+"@ultraviolet/ui": major
+---
+
+
+**BREAKING CHANGES**
+
+Deprecated props removed:
+- `Modal`: 
+    - prop "customDialogBackdropStyles" removed -> use "backdropClassName" instead to style the backdrop
+    - prop "customDialogStyles" removed -> use "customDialogStyles" instead to style the dialog
+    - prop "width" removed -> use "size" instead (same possible values)
+    - prop "opened" removed -> use "open" instead
+    - prop "onOpen" removed -> use "show" instead (ModalState)
+    - prop "onClose" removed -> use "close" instead (ModalState)
+    - prop "hide" removed -> use "close" instead (ModalState)
+- `RadioGroup.Radio`: prop "name" removed, it is automatically passed from the parent `RadioGroup`
+- `Separator`: prop "color" removed -> use "sentiment" instead
+- `Text`: prop "color" removed -> use "sentiment" instead

examples/next/src/components/Card.tsx

@@ -24,7 +24,7 @@ const Card = ({ title, description, icon, className }: CardProps) => (
       <Image src={icon} alt="icon" width={64} height={64} />
     </div>
     <div>
-      <Text as="h3" variant="headingSmall" color="primary">
+      <Text as="h3" variant="headingSmall" sentiment="primary">
         {title}
       </Text>
       {typeof description === 'string' ? (

examples/next/src/pages/advanced/Introduction.tsx

@@ -24,10 +24,10 @@ const Introduction = () => (
         <GithubAndDocumentationButtons />
       </Breakpoint>
       <Stack>
-        <Text as="h1" variant="headingLarge" color="primary">
+        <Text as="h1" variant="headingLarge" sentiment="primary">
           Scaleway <b>UI</b>
         </Text>
-        <Text as="h2" variant="heading" color="primary" prominence="weak">
+        <Text as="h2" variant="heading" sentiment="primary" prominence="weak">
           Open Source <br />
           Component Library
         </Text>

packages/form/src/components/RadioGroupField/__tests__/index.test.tsx

@@ -12,8 +12,8 @@ describe('RadioField', () => {
         name="radio"
         legend="Label"
       >
-        <RadioGroupField.Radio name="value-1" value="value-1" label="Radio 1" />
-        <RadioGroupField.Radio name="value-2" value="value-2" label="Radio 2" />
+        <RadioGroupField.Radio value="value-1" label="Radio 1" />
+        <RadioGroupField.Radio value="value-2" label="Radio 2" />
       </RadioGroupField>,
     )
     const [firstInput, secondInput] = screen.getAllByRole('radio', {
@@ -37,8 +37,8 @@ describe('RadioField', () => {
         onChange={onChange}
         legend="RadioGroupField events"
       >
-        <RadioGroupField.Radio name="value-1" value="value-1" label="Radio 1" />
-        <RadioGroupField.Radio name="value-2" value="value-2" label="Radio 2" />
+        <RadioGroupField.Radio value="value-1" label="Radio 1" />
+        <RadioGroupField.Radio value="value-2" label="Radio 2" />
       </RadioGroupField>,
     )
     const input = screen.getAllByRole('radio', { hidden: true })[0]

packages/plus/src/components/EstimateCost/Components/Item.tsx

@@ -417,7 +417,7 @@ export const Item = memo(
                   </StyledDiv>
                 ) : null}
                 {subLabel && !isOverlay ? (
-                  <StyledText as="p" variant="body" color="primary" italic>
+                  <StyledText as="p" variant="body" sentiment="primary" italic>
                     {subLabel}
                   </StyledText>
                 ) : null}
@@ -469,7 +469,7 @@ export const Item = memo(
                       ? 'weak'
                       : 'default'
                   }
-                  color={
+                  sentiment={
                     computedItemPrice === 0 && computedMaxItemPrice === 0
                       ? 'neutral'
                       : 'primary'

packages/plus/src/components/EstimateCost/EstimateCostContent.tsx

@@ -431,7 +431,7 @@ export const EstimateCostContent = ({
                     <StyledText
                       as="h3"
                       variant="heading"
-                      color="primary"
+                      sentiment="primary"
                       isBeta={isBeta}
                     >
                       <LineThrough

packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap

@@ -1758,7 +1758,6 @@ exports[`Navigation > click on expand / collapse button 1`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-41 emotion-42 emotion-43"
-              color="neutral"
               role="separator"
             />
             <div
@@ -2836,7 +2835,6 @@ exports[`Navigation > click on expand / collapse button 2`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-22 emotion-23 emotion-24"
-              color="neutral"
               role="separator"
             />
             <div
@@ -4747,7 +4745,6 @@ exports[`Navigation > pin and unpin an item 1`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-41 emotion-42 emotion-43"
-              color="neutral"
               role="separator"
             />
             <div
@@ -6714,7 +6711,6 @@ exports[`Navigation > pin and unpin an item 2`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-41 emotion-42 emotion-43"
-              color="neutral"
               role="separator"
             />
             <div
@@ -8922,7 +8918,6 @@ exports[`Navigation > pin and unpin an item 3`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-64 emotion-65 emotion-66"
-              color="neutral"
               role="separator"
             />
             <div
@@ -10075,7 +10070,6 @@ exports[`Navigation > render with basic content 1`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-41 emotion-42 emotion-43"
-              color="neutral"
               role="separator"
             />
             <div
@@ -11002,7 +10996,6 @@ exports[`Navigation > render without pinnedFeature 1`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-12 emotion-13 emotion-14"
-              color="neutral"
               role="separator"
             />
             <div
@@ -12942,7 +12935,6 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
             <hr
               aria-orientation="horizontal"
               class="emotion-41 emotion-42 emotion-43"
-              color="neutral"
               role="separator"
             />
             <div

packages/plus/src/components/Plans/__tests__/__snapshots__/index.test.tsx.snap

@@ -635,7 +635,6 @@ exports[`Plans > should work with default props 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                       <p
@@ -646,7 +645,6 @@ exports[`Plans > should work with default props 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                     </div>
@@ -2126,7 +2124,6 @@ exports[`Plans > should work with group 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                       <p
@@ -2137,7 +2134,6 @@ exports[`Plans > should work with group 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                     </div>
@@ -3065,7 +3061,6 @@ exports[`Plans > should work with hideFeatureText 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-35 emotion-36"
-                        color="neutral"
                         role="separator"
                       />
                       <p
@@ -3076,7 +3071,6 @@ exports[`Plans > should work with hideFeatureText 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-35 emotion-36"
-                        color="neutral"
                         role="separator"
                       />
                     </div>
@@ -3997,7 +3991,6 @@ exports[`Plans > should work with hideLabels 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                       <p
@@ -4008,7 +4001,6 @@ exports[`Plans > should work with hideLabels 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                     </div>
@@ -4931,7 +4923,6 @@ exports[`Plans > should work with value 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                       <p
@@ -4942,7 +4933,6 @@ exports[`Plans > should work with value 1`] = `
                       <hr
                         aria-orientation="horizontal"
                         class="emotion-37 emotion-38"
-                        color="neutral"
                         role="separator"
                       />
                     </div>

packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/Demo.tsx

@@ -222,21 +222,9 @@ export const Demo = () => {
                     setRadioState(event.target.value)
                   }
                 >
-                  <RadioGroup.Radio
-                    value="option-1"
-                    name="option-1"
-                    label="Version 1.3.0"
-                  />
-                  <RadioGroup.Radio
-                    value="option-2"
-                    name="option-2"
-                    label="Version 1.2.0"
-                  />
-                  <RadioGroup.Radio
-                    value="option-3"
-                    name="option-3"
-                    label="Version 1.1.0"
-                  />
+                  <RadioGroup.Radio value="option-1" label="Version 1.3.0" />
+                  <RadioGroup.Radio value="option-2" label="Version 1.2.0" />
+                  <RadioGroup.Radio value="option-3" label="Version 1.1.0" />
                 </RadioGroup>
               </Stack>
             </Card>

packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap

@@ -934,7 +934,6 @@ exports[`Drawer > renders with disclosure and onClose 1`] = `
           <hr
             aria-orientation="horizontal"
             class="emotion-10 emotion-11"
-            color="neutral"
             role="separator"
           />
           <div

packages/ui/src/components/LineChart/CustomLegend.tsx

@@ -55,7 +55,7 @@ const StyledText = styled(Text)`
 `
 
 const Cell = ({ value, variant }: CellProps) => (
-  <StyledText variant={variant} color="neutral" as="span">
+  <StyledText variant={variant} sentiment="neutral" as="span">
     {value as string | number}
   </StyledText>
 )

packages/ui/src/components/Modal/ModalContent.tsx

@@ -17,7 +17,6 @@ const StyledContainer = styled.div`
 type ModalContentProps = ComponentProps<typeof Modal> & {
   visible: boolean
   open: boolean
-  opened: boolean
   placement: ModalPlacement
   finalSize: ModalSize
   finalId: string
@@ -31,7 +30,6 @@ type ModalContentProps = ComponentProps<typeof Modal> & {
 export const ModalContent = ({
   visible,
   open,
-  opened,
   placement,
   finalSize,
   ariaLabel,
@@ -42,18 +40,16 @@ export const ModalContent = ({
   className,
   backdropClassName,
   dataTestId,
-  customDialogStyles,
-  customDialogBackdropStyles,
   isClosable,
   children,
   handleOpen,
   handleToggle,
   finalId,
   image,
 }: ModalContentProps) =>
-  visible || open || opened ? (
+  visible || open ? (
     <Dialog
-      open={visible || open || opened}
+      open={visible || open}
       placement={placement}
       size={finalSize}
       ariaLabel={ariaLabel}
@@ -65,19 +61,14 @@ export const ModalContent = ({
       backdropClassName={backdropClassName}
       data-testid={dataTestId}
       id={finalId}
-      dialogCss={customDialogStyles}
-      backdropCss={customDialogBackdropStyles}
       image={image}
     >
       <>
         {typeof children === 'function'
           ? children({
               visible,
-              onClose: handleClose,
-              onOpen: handleOpen,
               toggle: handleToggle,
               modalId: finalId,
-              hide: handleClose,
               close: handleClose,
               show: handleOpen,
             })

packages/ui/src/components/Modal/__stories__/Carousel.stories.tsx

@@ -22,7 +22,7 @@ export const Carousel: StoryFn = props => {
   return (
     <Modal
       image={IMAGES_STEP[step]}
-      size="medium"
+      size="xsmall"
       disclosure={
         <Button onClick={() => setStep(0)}>Open Carousel Modal</Button>
       }
@@ -67,7 +67,7 @@ export const Carousel: StoryFn = props => {
 Carousel.parameters = {
   docs: {
     description: {
-      story: 'Add an image at the top of the modal.',
+      story: 'It is possible to create a carousel',
     },
   },
 }

packages/ui/src/components/Modal/__stories__/Size.stories.tsx

@@ -5,14 +5,14 @@ import { MODAL_WIDTH } from '../constants'
 
 export const Size: StoryFn = props => (
   <>
-    {Object.keys(MODAL_WIDTH).map(width => (
-      <div style={{ display: 'inline-block', padding: 16 }} key={width}>
+    {Object.keys(MODAL_WIDTH).map(size => (
+      <div style={{ display: 'inline-block', padding: 16 }} key={size}>
         <Modal
           {...props}
-          size={width as keyof typeof MODAL_WIDTH}
-          disclosure={<Button>{width}</Button>}
+          size={size as keyof typeof MODAL_WIDTH}
+          disclosure={<Button>{size}</Button>}
         >
-          <div style={{ padding: 32 }}>Content of the {width} modal</div>
+          <div style={{ padding: 32 }}>Content of the {size} modal</div>
         </Modal>
       </div>
     ))}
@@ -21,6 +21,6 @@ export const Size: StoryFn = props => (
 
 Size.parameters = {
   docs: {
-    description: { story: 'Here is a list of all the width values we support' },
+    description: { story: 'Here is a list of all the size values we support' },
   },
 }