chore!: make Size & Variant types singular

Author: joshuaellis

.changeset/ninety-spoons-grab.md

@@ -0,0 +1,7 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: all XXSize & XXVariant types are now singular
+
+This is consistent across the codebase.

docs/stories/Searchbar.stories.tsx

@@ -48,7 +48,6 @@ export const SizeS = {
           onChange={(e) => setValue(e.target.value)}
           clearLabel="Clearing the plugin search"
           placeholder="e.g: strapi-plugin-abcd"
-          size="S"
         >
           Searching for a plugin
         </Searchbar>

packages/design-system/src/components/Badge/Badge.tsx

@@ -3,11 +3,7 @@ import { css, styled, type DefaultTheme } from 'styled-components';
 import { Flex, FlexComponent, FlexProps } from '../Flex';
 import { Typography } from '../Typography';
 
-type BadgeSizes = 'S' | 'M';
-/**
- * @deprecated use `BadgeSizes` instead.
- */
-type BadgeSize = BadgeSizes;
+type BadgeSize = 'S' | 'M';
 
 interface BadgeProps extends FlexProps {
   /**
@@ -18,7 +14,7 @@ interface BadgeProps extends FlexProps {
   /**
    * @default 'M'
    */
-  size?: BadgeSizes;
+  size?: BadgeSize;
   textColor?: keyof DefaultTheme['colors'];
 }
 
@@ -52,7 +48,7 @@ const Badge = ({
   );
 };
 
-const Base = styled<FlexComponent>(Flex)<{ $size: BadgeSizes }>`
+const Base = styled<FlexComponent>(Flex)<{ $size: BadgeSize }>`
   border-radius: ${({ theme, $size }) => ($size === 'S' ? '2px' : theme.borderRadius)};
   ${({ $size, theme }) => {
     if ($size === 'S') {
@@ -70,4 +66,4 @@ const Base = styled<FlexComponent>(Flex)<{ $size: BadgeSizes }>`
 `;
 
 export { Badge };
-export type { BadgeProps, BadgeSizes, BadgeSize };
+export type { BadgeProps, BadgeSize };

packages/design-system/src/components/Button/Button.tsx

@@ -10,17 +10,17 @@ import { Box } from '../Box';
 import { Flex } from '../Flex';
 import { Typography } from '../Typography';
 
-import { BUTTON_SIZES, Variant, ButtonSizes, DEFAULT } from './constants';
+import { BUTTON_SIZES, ButtonVariant, ButtonSize, DEFAULT } from './constants';
 import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';
 
 type ButtonProps<C extends React.ElementType = 'button'> = BaseButtonProps<C> & {
   endIcon?: React.ReactNode;
   fullWidth?: boolean;
   loading?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  size?: ButtonSizes;
+  size?: ButtonSize;
   startIcon?: React.ReactNode;
-  variant?: Variant;
+  variant?: ButtonVariant;
 };
 
 const Button = forwardRef(

packages/design-system/src/components/Button/constants.ts

@@ -11,5 +11,5 @@ export const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT] as const;
 export const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS] as const;
 export const BUTTON_SIZES = ['S', 'M', 'L'] as const;
 
-export type Variant = (typeof VARIANTS)[number];
-export type ButtonSizes = (typeof BUTTON_SIZES)[number];
+export type ButtonVariant = (typeof VARIANTS)[number];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];

packages/design-system/src/components/Button/utils.ts

@@ -11,10 +11,10 @@ import {
   SUCCESS,
   DANGER_LIGHT,
   SUCCESS_LIGHT,
-  Variant,
+  type ButtonVariant,
 } from './constants';
 
-export const getVariantColorName = (variant: Variant): 'success' | 'danger' | 'neutral' | 'primary' => {
+export const getVariantColorName = (variant: ButtonVariant): 'success' | 'danger' | 'neutral' | 'primary' => {
   if (variant === SUCCESS_LIGHT || variant === DANGER_LIGHT) {
     return `${variant.substring(0, variant.lastIndexOf('-'))}` as 'success' | 'danger';
   }
@@ -37,7 +37,7 @@ export const getDisabledStyle = ({ theme }: { theme: DefaultTheme }) => {
   `;
 };
 
-export const getHoverStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: Variant }) => {
+export const getHoverStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ButtonVariant }) => {
   if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {
     return css`
       background-color: ${theme.colors.neutral0};
@@ -68,7 +68,7 @@ export const getHoverStyle = ({ theme, $variant }: { theme: DefaultTheme; $varia
   `;
 };
 
-export const getActiveStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: Variant }) => {
+export const getActiveStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ButtonVariant }) => {
   if ([...LIGHT_VARIANTS, SECONDARY].includes($variant)) {
     return css`
       background-color: ${theme.colors.neutral0};
@@ -88,7 +88,7 @@ export const getActiveStyle = ({ theme, $variant }: { theme: DefaultTheme; $vari
   `;
 };
 
-export const getVariantStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: Variant }) => {
+export const getVariantStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ButtonVariant }) => {
   switch ($variant) {
     case DANGER_LIGHT:
     case SUCCESS_LIGHT:

packages/design-system/src/components/Card/CardAsset.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 
 import { styled } from 'styled-components';
 
-type CardAssetSizes = 'S' | 'M';
+type CardAssetSize = 'S' | 'M';
 
 interface CardAssetProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   /**
    * @default 'M'
    */
-  size?: CardAssetSizes;
+  size?: CardAssetSize;
   children?: React.ReactNode;
 }
 
@@ -29,7 +29,7 @@ const CardAssetImg = styled.img`
   object-fit: contain;
 `;
 
-const CardAssetWrapper = styled.div<{ $size: CardAssetSizes }>`
+const CardAssetWrapper = styled.div<{ $size: CardAssetSize }>`
   display: flex;
   justify-content: center;
   height: ${({ $size }) => ($size === 'S' ? '8.8rem' : '16.4rem')};
@@ -41,4 +41,4 @@ const CardAssetWrapper = styled.div<{ $size: CardAssetSizes }>`
 `;
 
 export { CardAsset };
-export type { CardAssetProps, CardAssetSizes };
+export type { CardAssetProps, CardAssetSize };

packages/design-system/src/components/Combobox/Combobox.tsx

@@ -315,7 +315,7 @@ const Trigger = styled(ComboboxPrimitive.Trigger)<TriggerProps>`
   justify-content: space-between;
   gap: ${({ theme }) => theme.spaces[4]};
 
-  s &[data-disabled] {
+  &[data-disabled] {
     color: ${({ theme }) => theme.colors.neutral600};
     background: ${({ theme }) => theme.colors.neutral150};
     cursor: not-allowed;

packages/design-system/src/components/LinkButton/LinkButton.tsx

@@ -6,17 +6,17 @@ import { focus } from '../../styles/buttons';
 import { PolymorphicRef } from '../../types';
 import { forwardRef } from '../../utilities/forwardRef';
 import { BaseLink, BaseLinkComponent, BaseLinkProps } from '../BaseLink';
-import { VARIANTS, BUTTON_SIZES } from '../Button/constants';
+import { VARIANTS, ButtonSize, ButtonVariant } from '../Button/constants';
 import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from '../Button/utils';
 import { Flex } from '../Flex';
 import { Typography } from '../Typography';
 
 type LinkButtonProps<C extends React.ElementType = 'a'> = BaseLinkProps<C> & {
   disabled?: boolean;
   endIcon?: React.ReactNode;
-  size?: (typeof BUTTON_SIZES)[number];
+  size?: ButtonSize;
   startIcon?: React.ReactNode;
-  variant?: (typeof VARIANTS)[number];
+  variant?: ButtonVariant;
 };
 
 const LinkButton = forwardRef(