sumup-oss · sirineJ · Dec 8, 2025 · Dec 8, 2025 · Dec 8, 2025 · Dec 8, 2025
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Centralized the "Close" label translations in CloseButton component and made the label optional in components that require it.
@@ -199,7 +199,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
             readOnly={readOnly}
             {...props}
           />
-          {value && onClear && clearLabel && (
+          {value && onClear && (
             <CloseButton
               className={classes.clear}
               size="s"

@@ -65,7 +65,7 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
         {...props}
       >
         {children}
-        {onClose && closeButtonLabel && (
+        {onClose && (
           <CloseButton className={classes.close} onClick={onClose}>
             {closeButtonLabel}
           </CloseButton>

@@ -16,29 +16,32 @@
 import { describe, expect, it } from 'vitest';
 import { createRef } from 'react';
 
-import { axe, render } from '../../util/test-utils.js';
+import { axe, render, screen } from '../../util/test-utils.js';
 
 import { CloseButton } from './CloseButton.js';
 
 describe('CloseButton', () => {
   it('should merge a custom class name with the default ones', () => {
     const className = 'foo';
-    const { container } = render(
-      <CloseButton label="Close" className={className} />,
-    );
-    const button = container.querySelector('button');
+    render(<CloseButton className={className}>Close</CloseButton>);
+    const button = screen.getByRole('button', { name: 'Close' });
     expect(button?.className).toContain(className);
   });
 
   it('should forward a ref', () => {
     const ref = createRef<HTMLHRElement>();
-    const { container } = render(<CloseButton label="Close" ref={ref} />);
-    const button = container.querySelector('button');
+    render(<CloseButton ref={ref}>Close</CloseButton>);
+    const button = screen.getByRole('button', { name: 'Close' });
     expect(ref.current).toBe(button);
   });
 
+  it('should render with default translated label', () => {
+    render(<CloseButton locale="fr-FR" />);
+    expect(screen.getByText('Fermer')).toBeVisible();
+  });
+
   it('should meet accessibility guidelines', async () => {
-    const { container } = render(<CloseButton label="Close" />);
+    const { container } = render(<CloseButton>Close</CloseButton>);
     const actual = await axe(container);
     expect(actual).toHaveNoViolations();
   });

@@ -24,7 +24,3 @@ export default {
 };
 
 export const Base = (args: CloseButtonProps) => <CloseButton {...args} />;
-
-Base.args = {
-  children: 'Close',
-};
@@ -16,26 +16,29 @@
 import { forwardRef } from 'react';
 import { Close } from '@sumup-oss/icons';
 
-import { IconButton, type IconButtonProps } from '../Button/IconButton.js';
+import { IconButton, type IconButtonProps } from '../Button/index.js';
+import { useI18n } from '../../hooks/useI18n/useI18n.js';
+import { translations } from './translations/index.js';
 
 export type CloseButtonProps = Omit<IconButtonProps, 'icon'>;
 
 /**
  * A generic close button.
  */
 
-export const CloseButton = forwardRef<any, CloseButtonProps>(
-  ({ label = 'Close', children = label, ...props }, ref) => (
+export const CloseButton = forwardRef<any, CloseButtonProps>((props, ref) => {
+  const { label, children = label, ...rest } = useI18n(props, translations);
+  return (
     <IconButton
       type="button"
       variant="tertiary"
-      {...props}
+      {...rest}
       icon={Close}
       ref={ref}
     >
       {children}
     </IconButton>
-  ),
-);
+  );
+});
 
 CloseButton.displayName = 'CloseButton';
@@ -0,0 +1,3 @@
+{
+  "label": "Затвори"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Zavřít"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Luk"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Schließen"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Schliessen"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Schließen"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Schließen"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Κλείσιμο"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Κλείσιμο"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Close"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Close"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Close"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Close"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Close"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Cerrar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Cerrar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Cerrar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Cerrar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Cerrar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Cerrar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Sulge"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Sulje"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Fermer"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Fermer"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Fermer"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Fermer"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Zatvori"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Bezárás"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Chiudi"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Chiudi"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Uždaryti"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Aizvērt"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Lukk"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Sluit"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Sluiten"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Zamknij"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Fechar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Fechar"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Închide"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Zatvoriť"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Zapri"
+}
@@ -0,0 +1,3 @@
+{
+  "label": "Stäng"
+}
@@ -36,11 +36,9 @@ import { clsx } from '../../styles/clsx.js';
 import { useClickOutside } from '../../hooks/useClickOutside/index.js';
 import { useEscapeKey } from '../../hooks/useEscapeKey/index.js';
 import { useLatest } from '../../hooks/useLatest/index.js';
-import { useI18n } from '../../hooks/useI18n/useI18n.js';
 import { useSwipe } from '../../hooks/useSwipe/index.js';
 
 import classes from './Dialog.module.css';
-import { translations } from './translations/index.js';
 
 type DataAttribute = `data-${string}`;
 
@@ -119,8 +117,8 @@ export interface DialogProps extends PublicDialogProps {
 }
 
 export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
-  (props, ref) => {
-    const {
+  (
+    {
       open,
       isModal = false,
       children,
@@ -136,7 +134,9 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
       locale,
       style,
       ...rest
-    } = useI18n(props, translations);
+    },
+    ref,
+  ) => {
     const dialogRef = useRef<HTMLDialogElement>(null);
     const openRef = useLatest<boolean>(open);
     const isModalRef = useLatest<boolean>(isModal);