Merge branch 'refs/heads/main' into fix/2042-Character-counter-inital…

…-value

packages/css/native-select.css

@@ -27,19 +27,19 @@
     background-image: none;
   }
 
-  .fds-native-select--small {
+  .fds-native-select--sm {
     padding: 0 var(--fds-spacing-2);
     padding-right: var(--fds-spacing-8);
     height: var(--fds-sizing-10);
   }
 
-  .fds-native-select--medium {
+  .fds-native-select--md {
     padding: 0 var(--fds-spacing-3);
     padding-right: var(--fds-spacing-10);
     height: var(--fds-sizing-12);
   }
 
-  .fds-native-select--large {
+  .fds-native-select--lg {
     padding: 0 var(--fds-spacing-4);
     padding-right: var(--fds-spacing-12);
     height: var(--fds-sizing-14);

packages/css/pagination.css

@@ -16,15 +16,15 @@
     visibility: hidden;
   }
 
-  .fds-pagination--small {
+  .fds-pagination--sm {
     --fds-pagination-chevron-margin: var(--fds-spacing-2);
   }
 
-  .fds-pagination--medium {
+  .fds-pagination--md {
     --fds-pagination-chevron-margin: var(--fds-spacing-2);
   }
 
-  .fds-pagination--large {
+  .fds-pagination--lg {
     --fds-pagination-chevron-margin: var(--fds-spacing-2);
   }
 
@@ -41,17 +41,17 @@
     margin-right: var(--fds-pagination-listitem-margin);
   }
 
-  .fds-pagination--small .fds-pagination__item {
+  .fds-pagination--sm .fds-pagination__item {
     --fds-pagination-listitem-margin: var(--fds-spacing-2);
     --fds-pagination-ellipsis-width: var(--fds-sizing-10);
   }
 
-  .fds-pagination--medium .fds-pagination__item {
+  .fds-pagination--md .fds-pagination__item {
     --fds-pagination-listitem-margin: var(--fds-spacing-4);
     --fds-pagination-ellipsis-width: var(--fds-sizing-12);
   }
 
-  .fds-pagination--large .fds-pagination__item {
+  .fds-pagination--lg .fds-pagination__item {
     --fds-pagination-listitem-margin: var(--fds-spacing-6);
     --fds-pagination-ellipsis-width: var(--fds-sizing-14);
   }

packages/css/radio.css

@@ -145,19 +145,19 @@
 
   /** Sizing */
 
-  .fds-radio--small {
+  .fds-radio--sm {
     --fds-radio-size: var(--fds-sizing-5);
 
     min-height: var(--fds-sizing-10);
   }
 
-  .fds-radio--medium {
+  .fds-radio--md {
     --fds-radio-size: var(--fds-sizing-6);
 
     min-height: var(--fds-sizing-11);
   }
 
-  .fds-radio--large {
+  .fds-radio--lg {
     --fds-radio-size: var(--fds-sizing-7);
 
     min-height: var(--fds-sizing-12);

packages/react/src/components/Pagination/Pagination.stories.tsx

@@ -28,7 +28,7 @@ export const Preview: StoryFn<typeof Pagination> = (args) => {
 };
 
 Preview.args = {
-  size: 'medium',
+  size: 'md',
   nextLabel: 'Neste',
   previousLabel: 'Forrige',
   totalPages: 10,

packages/react/src/components/Pagination/Pagination.tsx

@@ -3,6 +3,8 @@ import type * as React from 'react';
 import cl from 'clsx/lite';
 import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 
+import { getSize } from '../../utilities/getSize';
+
 import { PaginationRoot } from './PaginationRoot';
 import { PaginationContent } from './PaginationContent';
 import { PaginationItem } from './PaginationItem';
@@ -11,13 +13,18 @@ import { PaginationEllipsis } from './PaginationEllipsis';
 import { PaginationNext, PaginationPrevious } from './PaginationNextPrev';
 import { usePagination } from './usePagination';
 
+type OldPaginationSizes = 'small' | 'medium' | 'large';
+
 export type PaginationProps = {
   /** Sets the text label for the next page button */
   nextLabel: string;
   /** Sets the text label for the previous page button */
   previousLabel: string;
-  /** Sets the size of the component */
-  size?: 'small' | 'medium' | 'large';
+  /** Sets the size of the component
+   * @default md
+   * @note `small`, `medium`, `large` is deprecated
+   */
+  size?: 'sm' | 'md' | 'lg' | OldPaginationSizes;
   /** Sets how compact the component will be. If true, only 5 steps will show. */
   compact?: boolean;
   /** Hides the component's previous and next button labels */
@@ -35,17 +42,16 @@ export type PaginationProps = {
 } & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 
 const iconSize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem',
+  sm: '1rem',
+  md: '1.5rem',
+  lg: '2rem',
 };
 
 export const Pagination = forwardRef<HTMLElement, PaginationProps>(
   (
     {
       nextLabel = '',
       previousLabel = '',
-      size = 'medium',
       compact = false,
       hideLabels = false,
       currentPage = 1,
@@ -61,6 +67,9 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       currentPage,
       totalPages,
     });
+
+    const size = getSize(rest.size || 'md') as 'sm' | 'md' | 'lg';
+
     return (
       <PaginationRoot
         ref={ref}

packages/react/src/components/Pagination/PaginationRoot.tsx

@@ -1,22 +1,27 @@
 import { Slot } from '@radix-ui/react-slot';
 import { createContext, forwardRef, type HTMLAttributes } from 'react';
 
+import { getSize } from '../../utilities/getSize';
+
+import type { PaginationProps } from './Pagination';
+
 type PaginationContextProps = {
   size: NonNullable<PaginationRootProps['size']>;
   compact: boolean;
 };
 
 export const PaginationContext = createContext<PaginationContextProps>({
-  size: 'medium',
+  size: 'md',
   compact: false,
 });
 
 export type PaginationRootProps = {
   /**
    * Sets the size of the component
-   * @default medium
+   * @default md
+   * @note `small`, `medium`, `large` is deprecated
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: PaginationProps['size'];
   /**
    * Sets how compact the component will be. If true, only 5 steps will show.
    * @default false
@@ -30,8 +35,11 @@ export type PaginationRootProps = {
 } & HTMLAttributes<HTMLElement>;
 
 export const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>(
-  ({ asChild, size = 'medium', compact = false, ...rest }, ref) => {
+  ({ asChild, compact = false, ...rest }, ref) => {
     const Component = asChild ? Slot : 'nav';
+    const size = getSize(rest.size || 'md') as NonNullable<
+      PaginationRootProps['size']
+    >;
 
     return (
       <PaginationContext.Provider value={{ size, compact }}>

packages/react/src/components/form/NativeSelect/NativeSelect.stories.tsx

@@ -26,7 +26,7 @@ export const Preview: StoryFn<typeof NativeSelect> = (args) => (
 
 Preview.args = {
   label: 'Velg et fjell',
-  size: 'medium',
+  size: 'md',
   disabled: false,
   readOnly: false,
 };

packages/react/src/components/form/NativeSelect/NativeSelect.tsx

@@ -8,6 +8,8 @@ import { ErrorMessage, Label, Paragraph } from '../../Typography';
 
 import { useNativeSelect } from './useNativeSelect';
 
+type OldNativeSelectSizes = 'small' | 'medium' | 'large';
+
 export type NativeSelectProps = {
   /**
    * Label that appears over the select box. */
@@ -25,9 +27,10 @@ export type NativeSelectProps = {
   multiple?: boolean;
   /**
    * Defines the size of the select.
-   * @default medium
-   * */
-  size?: 'small' | 'medium' | 'large';
+   * @default md
+   * @note `small`, `medium`, `large` is deprecated
+   **/
+  size?: 'sm' | 'md' | 'lg' | OldNativeSelectSizes;
   /** Error message for form field */
   error?: ReactNode;
   /** Defines if the select is readOnly
@@ -59,7 +62,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       descriptionId,
       errorId,
       readOnly = false,
-      size = 'medium',
+      size = 'md',
     } = useNativeSelect(props);
 
     return (

packages/react/src/components/form/NativeSelect/useNativeSelect.ts

@@ -4,6 +4,7 @@ import { useContext } from 'react';
 import type { FormField } from '../useFormField';
 import { useFormField } from '../useFormField';
 import { FieldsetContext } from '../Fieldset/FieldsetContext';
+import { getSize } from '../../../utilities/getSize';
 
 import type { NativeSelectProps } from './NativeSelect';
 
@@ -26,10 +27,14 @@ export const useNativeSelect: UseNativeSelect = (props) => {
     ...rest
   } = useFormField(props, 'select');
 
+  const size = getSize(fieldset?.size ?? props.size ?? 'md') as NonNullable<
+    NativeSelectProps['size']
+  >;
+
   return {
     ...rest,
     readOnly,
-    size: fieldset?.size ?? props.size,
+    size,
     selectProps: {
       ...selectProps,
       readOnly,

packages/react/src/components/form/Radio/Radio.stories.tsx

@@ -16,7 +16,7 @@ export const Preview: Story = {
     disabled: false,
     readOnly: false,
     value: 'value',
-    size: 'medium',
+    size: 'md',
   },
 };
 

packages/react/src/components/form/Radio/Radio.tsx

@@ -22,7 +22,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
     inputProps,
     descriptionId,
     hasError,
-    size = 'medium',
+    size = 'md',
     readOnly,
   } = useRadio(props);