Merge branch 'develop' into feature/DES-752-DES-753-describe-props

# Conflicts:
#	packages/react/src/Alert/Alert.tsx
#	packages/react/src/Dialog/Dialog.tsx
#	packages/react/src/Pagination/Pagination.tsx

packages/css/src/components/search-field/search-field.scss

@@ -27,12 +27,12 @@
   font-family: var(--ams-search-field-input-font-family);
   font-size: var(--ams-search-field-input-font-size);
   font-weight: var(--ams-search-field-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-search-field-input-line-height);
   outline-offset: var(--ams-search-field-input-outline-offset);
   padding-block: var(--ams-search-field-input-padding-block);
   padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset-input;
@@ -53,10 +53,10 @@
 .ams-search-field__input::-webkit-search-cancel-button {
   appearance: none;
   background-image: var(--ams-search-field-input-cancel-button-background-image);
+  block-size: var(--ams-search-field-input-cancel-button-block-size);
   cursor: pointer;
-  height: var(--ams-search-field-input-cancel-button-height);
+  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
-  width: var(--ams-search-field-input-cancel-button-width);
 }
 
 @mixin reset-button {

packages/css/src/components/select/select.scss

@@ -16,8 +16,8 @@
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
   font-weight: var(--ams-select-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-select-line-height);
-  max-inline-size: 100%;
   outline-offset: var(--ams-select-outline-offset);
   padding-block: var(--ams-select-padding-block);
   padding-inline: var(--ams-select-padding-inline);

packages/css/src/components/text-area/text-area.scss

@@ -18,14 +18,14 @@
   font-family: var(--ams-text-area-font-family);
   font-size: var(--ams-text-area-font-size);
   font-weight: var(--ams-text-area-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-text-area-line-height);
-  max-width: 100%;
-  min-height: var(--ams-text-area-min-height);
+  max-inline-size: 100%; // This prevents overflow when using the `cols` prop
+  min-block-size: var(--ams-text-area-min-block-size);
   outline-offset: var(--ams-text-area-outline-offset);
   padding-block: var(--ams-text-area-padding-block);
   padding-inline: var(--ams-text-area-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset;
@@ -69,5 +69,5 @@
 }
 
 .ams-text-area--cols {
-  width: auto;
+  inline-size: auto;
 }

packages/css/src/components/text-input/text-input.scss

@@ -18,12 +18,12 @@
   font-family: var(--ams-text-input-font-family);
   font-size: var(--ams-text-input-font-size);
   font-weight: var(--ams-text-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-text-input-line-height);
   outline-offset: var(--ams-text-input-outline-offset);
   padding-block: var(--ams-text-input-padding-block);
   padding-inline: var(--ams-text-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
   @include reset;

packages/react/src/Alert/Alert.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { Alert } from './Alert'
 import '@testing-library/jest-dom'
@@ -52,6 +52,14 @@ describe('Alert', () => {
     expect(closeButton).toBeVisible()
   })
 
+  it('renders the close button with a label', () => {
+    render(<Alert closeable={true} closeButtonLabel="Close" />)
+
+    const closeButton = screen.getByRole('button', { name: 'Close' })
+
+    expect(closeButton).toBeInTheDocument()
+  })
+
   it('fires the onClose event when the close button is clicked', () => {
     const onClose = jest.fn()
     const { container } = render(<Alert closeable={true} onClose={onClose} />)

packages/react/src/Alert/Alert.tsx

@@ -15,6 +15,8 @@ import { IconButton } from '../IconButton'
 export type AlertProps = {
   /** Whether the user can dismiss the Alert. Adds a button to its top right. */
   closeable?: boolean
+  /** The label for the button that dismisses the Alert. */
+  closeButtonLabel?: string
   /** The hierarchical level of the Alert’s Heading within the document. */
   headingLevel?: HeadingProps['level']
   /** A function to run when dismissing. */
@@ -37,11 +39,12 @@ export const Alert = forwardRef(
     {
       children,
       className,
-      headingLevel = 2,
-      title,
-      severity = 'warning',
       closeable,
+      closeButtonLabel = 'Sluiten',
+      headingLevel = 2,
       onClose,
+      severity = 'warning',
+      title,
       ...restProps
     }: AlertProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -62,7 +65,7 @@ export const Alert = forwardRef(
           )}
           {children}
         </div>
-        {closeable && <IconButton label="Sluiten" size={alertSize} onClick={onClose} />}
+        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
       </Tag>
     )
   },

packages/react/src/Dialog/Dialog.test.tsx

@@ -77,7 +77,15 @@ describe('Dialog', () => {
   it('renders DialogClose button', () => {
     render(<Dialog open />)
 
-    const closeButton = screen.getByText('Sluiten')
+    const closeButton = screen.getByRole('button', { name: 'Sluiten' })
+
+    expect(closeButton).toBeInTheDocument()
+  })
+
+  it('renders a custom close label', () => {
+    render(<Dialog open closeButtonLabel="Close" />)
+
+    const closeButton = screen.getByRole('button', { name: 'Close' })
 
     expect(closeButton).toBeInTheDocument()
   })

packages/react/src/Dialog/Dialog.tsx

@@ -12,15 +12,20 @@ import { IconButton } from '../IconButton'
 export type DialogProps = {
   /** The list of buttons. Start with a primary button. */
   actions?: ReactNode
+  /** The label for the button that dismisses the Dialog. */
+  closeButtonLabel?: string
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
 export const Dialog = forwardRef(
-  ({ children, className, title, actions, ...restProps }: DialogProps, ref: ForwardedRef<HTMLDialogElement>) => (
+  (
+    { actions, children, className, closeButtonLabel = 'Sluiten', title, ...restProps }: DialogProps,
+    ref: ForwardedRef<HTMLDialogElement>,
+  ) => (
     <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
       <form method="dialog" className="ams-dialog__form">
         <header className="ams-dialog__header">
           <Heading size="level-4">{title}</Heading>
-          <IconButton formNoValidate label="Sluiten" size="level-4" />
+          <IconButton formNoValidate label={closeButtonLabel} size="level-4" />
         </header>
         <article className="ams-dialog__article">{children}</article>
         {actions && <footer className="ams-dialog__footer">{actions}</footer>}

packages/react/src/Pagination/Pagination.test.tsx

@@ -45,7 +45,7 @@ describe('Pagination', () => {
     expect(screen.getByTestId('firstSpacer')).toBeInTheDocument()
   })
 
-  it('should navigate to the next page when clicking on the "next" button', () => {
+  it('should navigate to the next page when clicking on the ‘next’ button', () => {
     const onPageChangeMock = jest.fn()
     render(<Pagination page={6} totalPages={10} onPageChange={onPageChangeMock} />)
 
@@ -60,7 +60,7 @@ describe('Pagination', () => {
     expect(screen.getByText('7')).toHaveAttribute('aria-current', 'true')
   })
 
-  it('should navigate to the previous page when clicking on the "previous" button', () => {
+  it('should navigate to the previous page when clicking on the ‘previous’ button', () => {
     const onPageChangeMock = jest.fn()
     render(<Pagination page={6} totalPages={10} onPageChange={onPageChangeMock} />)
 
@@ -98,10 +98,30 @@ describe('Pagination', () => {
     expect(screen.getByText('5')).not.toHaveAttribute('aria-current', 'true')
   })
 
+  it('renders custom labels for the ‘previous’ and ‘next’ buttons', () => {
+    render(<Pagination totalPages={10} previousLabel="previous" nextLabel="next" />)
+    const previousButton = screen.getByRole('button', { name: 'Vorige pagina' })
+    const nextButton = screen.getByRole('button', { name: 'Volgende pagina' })
+
+    expect(previousButton).toHaveTextContent('previous')
+    expect(nextButton).toHaveTextContent('next')
+  })
+
+  it('renders custom aria-labels for the ‘previous’ and ‘next’ buttons', () => {
+    render(<Pagination totalPages={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" />)
+
+    const previousButton = screen.getByRole('button', { name: 'Previous page' })
+    const nextButton = screen.getByRole('button', { name: 'Next page' })
+
+    expect(previousButton).toBeInTheDocument()
+    expect(nextButton).toBeInTheDocument()
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
     const { container } = render(<Pagination totalPages={10} ref={ref} />)
     const component = container.querySelector(':only-child')
+
     expect(ref.current).toBe(component)
   })
 })

packages/react/src/Pagination/Pagination.tsx

@@ -12,11 +12,19 @@ import { Icon } from '../Icon/Icon'
 export type PaginationProps = {
   /** The maximum amount of pages shown. Minimum value: 5. */
   maxVisiblePages?: number
+  /** The accessible name for the link to the next page. */
+  nextAriaLabel?: string
+  /** The label for the link to the next page. */
+  nextLabel?: string
   /** A function to run when the page number changes. */
   // eslint-disable-next-line no-unused-vars
   onPageChange?: (page: number) => void
   /** The current page number. */
   page?: number
+  /** The accessible name for the link to the previous page. */
+  previousAriaLabel?: string
+  /** The label for the link to the previous page. */
+  previousLabel?: string
   /** The total amount of pages. */
   totalPages: number
 } & HTMLAttributes<HTMLElement>
@@ -73,7 +81,18 @@ function getRange(currentPage: number, totalPages: number, maxVisiblePages: numb
 
 export const Pagination = forwardRef(
   (
-    { className, maxVisiblePages = 7, onPageChange, page = 1, totalPages, ...restProps }: PaginationProps,
+    {
+      className,
+      maxVisiblePages = 7,
+      nextAriaLabel = 'Volgende pagina',
+      nextLabel = 'volgende',
+      onPageChange,
+      page = 1,
+      previousAriaLabel = 'Vorige pagina',
+      previousLabel = 'vorige',
+      totalPages,
+      ...restProps
+    }: PaginationProps,
     ref: ForwardedRef<HTMLElement>,
   ) => {
     const [currentPage, setCurrentPage] = useState(page)
@@ -109,14 +128,14 @@ export const Pagination = forwardRef(
         <ol className="ams-pagination__list">
           <li>
             <button
-              aria-label="Vorige pagina"
+              aria-label={previousAriaLabel}
               className="ams-pagination__button"
               disabled={currentPage === 1}
               onClick={onPrevious}
               type="button"
             >
               <Icon svg={ChevronLeftIcon} size="level-5" />
-              vorige
+              {previousLabel}
             </button>
           </li>
           {range.map((pageNumberOrSpacer) =>
@@ -148,13 +167,13 @@ export const Pagination = forwardRef(
           )}
           <li>
             <button
-              aria-label="Volgende pagina"
+              aria-label={nextAriaLabel}
               className="ams-pagination__button"
               disabled={currentPage === totalPages}
               onClick={onNext}
               type="button"
             >
-              volgende
+              {nextLabel}
               <Icon svg={ChevronRightIcon} size="level-5" />
             </button>
           </li>

packages/react/src/SearchField/SearchField.test.tsx

@@ -31,6 +31,14 @@ describe('Search field', () => {
     expect(component).toBeVisible()
   })
 
+  it('renders the button with a label', () => {
+    render(<SearchField.Button label="Search" />)
+
+    const component = screen.getByRole('button', { name: 'Search' })
+
+    expect(component).toBeInTheDocument()
+  })
+
   it('renders the outer container design system BEM class name', () => {
     render(<SearchField />)
 

packages/react/src/SearchField/SearchFieldButton.tsx

@@ -10,14 +10,17 @@ import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-type SearchFieldButtonProps = HTMLAttributes<HTMLButtonElement>
+type SearchFieldButtonProps = {
+  /** The label for the button that triggers the search action. */
+  label?: string
+} & HTMLAttributes<HTMLButtonElement>
 
 // TODO: replace this with IconButton when that's done
 // TODO: discuss if IconButton is the right component to replace this
 export const SearchFieldButton = forwardRef(
-  ({ className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
+  ({ label = 'Zoeken', className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
     <button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
-      <VisuallyHidden>Zoeken</VisuallyHidden>
+      <VisuallyHidden>{label}</VisuallyHidden>
       <Icon svg={SearchIcon} size="level-5" square />
     </button>
   ),

proprietary/tokens/src/components/ams/search-field.tokens.json

@@ -5,11 +5,11 @@
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "padding-block": { "value": "{ams.space.inside.xs}" },
+        "padding-inline": { "value": "{ams.space.inside.xs}" },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" }
-        },
-        "padding-block": { "value": "{ams.space.inside.xs}" },
-        "padding-inline": { "value": "{ams.space.inside.xs}" }
+        }
       },
       "input": {
         "background-color": { "value": "{ams.color.primary-white}" },
@@ -28,9 +28,9 @@
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
           },
+          "block-size": { "value": "{ams.text.level.5.font-size}" },
           "color": { "value": "{ams.color.primary-blue}" },
-          "height": { "value": "{ams.text.level.5.font-size}" },
-          "width": { "value": "{ams.text.level.5.font-size}" }
+          "inline-size": { "value": "{ams.text.level.5.font-size}" }
         },
         "hover": {
           "box-shadow": {

proprietary/tokens/src/components/ams/text-area.tokens.json

@@ -8,7 +8,7 @@
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
-      "min-height": {
+      "min-block-size": {
         "value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})"
       },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },