Merge 🚀 next release NOTICKET

src/components/ButtonV2/Button.tsx

@@ -44,7 +44,7 @@ export const ButtonV2Plain = <E extends ElementType = 'button'>(
           : size === 'sm'
           ? 'var(--sscds-space-2x)'
           : 'var(--sscds-space-3x)',
-      '--sscds-button-width': isExpanded ? '100%' : 'auto',
+      '--sscds-button-width': isExpanded ? '100%' : 'fit-content',
       '--sscds-button-width-min':
         typeof minWidth !== 'undefined' ? pxToRem(minWidth) : 'auto',
       '--sscds-button-height': getButtonSize(size),

src/components/ElementLabel/ElementLabel.tsx

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ElementType, ReactNode, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { WithAsProp } from '../../types/utils.types';
+import { PolymorphicProps } from '../../types/utils.types';
 
-export type ElementLabelProps = WithAsProp<{
+type ElementLabelOwnProps = {
   children: ReactNode;
   /* Font size */
   size?: 'sm' | 'md';
@@ -18,8 +18,11 @@ export type ElementLabelProps = WithAsProp<{
     | 'link';
   /* Font weight. When true ElementLabel will be rendered as bold */
   isStrong?: boolean;
-}> &
-  ComponentPropsWithoutRef<'span'>;
+};
+export type ElementLabelProps<Element extends ElementType> = PolymorphicProps<
+  ElementLabelOwnProps,
+  Element
+>;
 
 const ElementLabelRoot = styled.span`
   font-family: var(--sscds-font-family-body);
@@ -30,24 +33,27 @@ const ElementLabelRoot = styled.span`
 `;
 ElementLabelRoot.displayName = 'ElementLabel.Root';
 
-function ElementLabel({
+function ElementLabel<E extends ElementType = 'span'>({
   children,
   size = 'sm',
   color = 'default',
   isStrong = false,
   ...props
-}: ElementLabelProps) {
-  const vars = {
-    '--sscds-elementlabel-font-size': `var(--sscds-font-size-elementlabel-${size})`,
-    '--sscds-elementlabel-font-weight': isStrong
-      ? 'var(--sscds-font-weight-elementlabel-strong)'
-      : 'var(--sscds-font-weight-elementlabel-default)',
-    '--sscds-elementlabel-color':
-      color === 'link'
-        ? 'var(--sscds-color-link-default)'
-        : `var(--sscds-color-text-${color})`,
-    ...props.style,
-  };
+}: ElementLabelProps<E>) {
+  const vars = useMemo(
+    () => ({
+      '--sscds-elementlabel-font-size': `var(--sscds-font-size-elementlabel-${size})`,
+      '--sscds-elementlabel-font-weight': isStrong
+        ? 'var(--sscds-font-weight-elementlabel-strong)'
+        : 'var(--sscds-font-weight-elementlabel-default)',
+      '--sscds-elementlabel-color':
+        color === 'link'
+          ? 'var(--sscds-color-link-default)'
+          : `var(--sscds-color-text-${color})`,
+      ...props.style,
+    }),
+    [color, isStrong, props.style, size],
+  );
 
   return (
     <ElementLabelRoot {...props} style={vars}>

src/components/HexGrade/HexGrade.tsx

@@ -2,6 +2,7 @@ import { defaultTo, path, pipe } from 'ramda';
 import { isNotUndefined } from 'ramda-adjunct';
 import styled, { useTheme } from 'styled-components';
 import cls from 'classnames';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { createMarginSpacing, getColor } from '../../utils';
 import { HexGradeGrades, HexGradeVariants } from './HexGrade.enums';
@@ -59,7 +60,7 @@ const HexGrade = ({
   margin,
   className,
   ...props
-}: HexGradeProps) => {
+}: HexGradeProps & ComponentPropsWithoutRef<'svg'>) => {
   const theme = useTheme();
   const isCSVariant = variant === HexGradeVariants.cs;
   const gradeColorType = pipe(

src/components/IconWrapper/IconWrapper.tsx

@@ -1,4 +1,5 @@
 import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { getRadii } from '../../utils';
 import Icon from '../Icon/Icon';
@@ -18,13 +19,13 @@ const variances: Record<
   FlattenSimpleInterpolation
 > = {
   default: css`
-    box-shadow: inset 0 0 0 1px var(--slate-a6);
+    box-shadow: inset 0 0 0 1px var(--sscds-color-neutral-alpha-6);
   `,
   strong: css`
     background-color: var(--sscds-color-info-100);
   `,
   subtle: css`
-    background-color: var(--slate-a3);
+    background-color: var(--sscds-color-neutral-alpha-3);
   `,
 };
 
@@ -44,7 +45,11 @@ export default function IconWrapper({
   size = 'md',
   variant = 'default',
   ...rest
-}: IconWrapperProps) {
+}: IconWrapperProps &
+  Omit<
+    ComponentPropsWithoutRef<typeof Icon>,
+    'color' | 'size' | 'hasFixedSize' | 'hasFixedWidth' | 'name' | 'type'
+  >) {
   return (
     <IconWrapperRoot
       $size={size}

src/components/Modal/Modal.enums.ts

@@ -3,4 +3,5 @@ export const ModalSizes = {
   sm: 'sm',
   md: 'md',
   lg: 'lg',
+  xl: 'xl',
 } as const;

src/components/Modal/Modal.stories.tsx

@@ -1,19 +1,15 @@
 import { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import Modal from './Modal';
-import { ModalProps } from './Modal.types';
-import { ModalSizes } from './Modal.enums';
 import { H5 } from '../Heading';
 import { Paragraph } from '../Paragraph';
 import { Inline, Padbox } from '../layout';
 import { Button } from '../Button';
-import { generateControl } from '../../utils/tests/storybook';
-import { SpaceSizes } from '../../index';
 import { Tooltip } from '../Tooltip';
 
-export default {
+const meta = {
   title: 'components/modals/Modal',
   component: Modal,
   parameters: {
@@ -24,124 +20,143 @@ export default {
   },
   argTypes: {
     size: {
-      ...generateControl('select', ModalSizes),
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
     footer: {
       control: { disable: true },
     },
   },
-} as Meta;
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 function Footer() {
   return (
-    <Inline gap={SpaceSizes.md} justify="flex-end">
+    <Inline gap="4x" justify="flex-end">
       <Button variant="outline">Cancel</Button>
       <Button>Confirm</Button>
     </Inline>
   );
 }
 
-export const Playground: StoryFn<ModalProps> = (args) => {
-  const [isShown, setIsShown] = useState(false);
+export const Playground: Story = {
+  render: function Render(args) {
+    const [isShown, setIsShown] = useState(false);
 
-  return (
-    <Padbox paddingSize={SpaceSizes.xxl}>
-      <Inline justify="center">
-        <Button onClick={() => setIsShown(!isShown)}>Open modal</Button>
-        {isShown && (
-          <Modal
-            footer={<Footer />}
-            title="Title"
-            onClose={() => setIsShown(false)}
-            {...args}
-          >
-            <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-            <Paragraph size="md" style={{ marginBottom: 0 }}>
-              You can replace this with a local component. You can also just
-              override the text, but{' '}
-              <Tooltip popup="I'm tooltip">keep in mind</Tooltip> that you might
-              lose content that way in case we happend to change the underlying
-              component. Lorem ipsum dolor sit amet, consectetur adipiscing
-              elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-              laboris nisi ut aliquip ex ea commodo consequat.
-            </Paragraph>
-          </Modal>
-        )}
-      </Inline>
-    </Padbox>
-  );
+    return (
+      <Padbox paddingSize="32x">
+        <Inline justify="center">
+          <Button onClick={() => setIsShown(!isShown)}>Open modal</Button>
+          {isShown && <Modal {...args} onClose={() => setIsShown(false)} />}
+        </Inline>
+      </Padbox>
+    );
+  },
+  args: {
+    footer: <Footer />,
+    title: 'Title',
+    children: (
+      <>
+        <H5 style={{ margin: 0 }}>This is a placeholder</H5>
+        <Paragraph size="md" style={{ marginBottom: 0 }}>
+          You can replace this with a local component. You can also just
+          override the text, but{' '}
+          <Tooltip popup="I'm tooltip">keep in mind</Tooltip> that you might
+          lose content that way in case we happend to change the underlying
+          component. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+          ut aliquip ex ea commodo consequat.
+        </Paragraph>
+      </>
+    ),
+    onClose: action('close-modal'),
+  },
+  parameters: {
+    screenshot: { skip: true },
+  },
 };
 
-Playground.parameters = {
-  screenshot: { skip: true },
+export const WithTitle: Story = {
+  args: Playground.args,
 };
 
-export const WithTitle: StoryFn = () => (
-  <Modal footer={<Footer />} title="Title" onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const WithLongContent: Story = {
+  args: {
+    ...Playground.args,
+    children: (
+      <>
+        <H5 style={{ margin: 0 }}>This is a placeholder</H5>
+        <Paragraph size="md" style={{ marginBottom: 0 }}>
+          You can replace this with a local component. You can also just
+          override the text, but keep in mind that you might lose content that
+          way in case we happend to change the underlying component. Lorem ipsum
+          dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+          commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+          laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
+          amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </Paragraph>
+      </>
+    ),
+  },
+};
 
-export const WithLongContent: StoryFn = () => (
-  <Modal footer={<Footer />} title="Title" onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
-      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const WithoutTitle: Story = {
+  args: {
+    ...Playground.args,
+    title: undefined,
+  },
+};
 
-export const WithoutTitle: StoryFn = () => (
-  <Modal footer={<Footer />} onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const WithoutFooter: Story = {
+  args: {
+    ...Playground.args,
+    footer: undefined,
+  },
+};
 
-export const WithoutFooter: StoryFn = () => (
-  <Modal title="Simple modal" onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const SizeXs: Story = {
+  args: {
+    ...Playground.args,
+    size: 'xs',
+  },
+};
+export const SizeSm: Story = {
+  args: {
+    ...Playground.args,
+    size: 'sm',
+  },
+};
+export const SizeMd: Story = {
+  args: {
+    ...Playground.args,
+    size: 'md',
+  },
+};
+export const SizeLg: Story = {
+  args: {
+    ...Playground.args,
+    size: 'lg',
+  },
+};
+export const SizeXL: Story = {
+  args: {
+    ...Playground.args,
+    size: 'xl',
+  },
+};