Merge branch 'main' into next

packages/circuit-ui/CHANGELOG.md

@@ -203,6 +203,12 @@
 
 - [#1992](https://github.com/sumup-oss/circuit-ui/pull/1992) [`0b7fb453`](https://github.com/sumup-oss/circuit-ui/commit/0b7fb453e6eb714561ab4ff8311ef3d4853006c5) Thanks [@connor-baer](https://github.com/connor-baer)! - Deprecated the `uniqueId` util. Use the official [`useId` hook](https://beta.reactjs.org/reference/react/useId) instead.
 
+## 6.11.0
+
+### Minor Changes
+
+- [#2191](https://github.com/sumup-oss/circuit-ui/pull/2191) [`7ba96798`](https://github.com/sumup-oss/circuit-ui/commit/7ba9679870c5a595bbd3036aa5a6f65c7ad29f8c) Thanks [@sirineJ](https://github.com/sirineJ)! - Added a new `description` prop to the RadioInput component. Use it to provide additional context for an option.
+
 ## 6.10.1
 
 ### Patch Changes

packages/circuit-ui/components/RadioButton/RadioButton.module.css

@@ -8,7 +8,7 @@
 
 .label::before {
   position: absolute;
-  top: 50%;
+  top: calc(var(--cui-typography-body-one-line-height) / 2);
   left: 0;
   box-sizing: border-box;
   display: block;
@@ -24,7 +24,7 @@
 
 .label::after {
   position: absolute;
-  top: 50%;
+  top: calc(var(--cui-typography-body-one-line-height) / 2);
   left: var(--cui-spacings-bit);
   box-sizing: border-box;
   display: block;
@@ -96,20 +96,20 @@
 
 /* Invalid */
 
-[aria-invalid="true"] .base:not(:focus) + .label::before {
+[aria-invalid='true'] .base:not(:focus) + .label::before {
   background-color: var(--cui-bg-danger);
   border-color: var(--cui-border-danger);
 }
 
-[aria-invalid="true"] .base:not(:focus) + .label::after {
+[aria-invalid='true'] .base:not(:focus) + .label::after {
   background-color: var(--cui-fg-danger);
 }
 
-[aria-invalid="true"] .base:hover + .label::before,
-[aria-invalid="true"] .base:focus + .label::before {
+[aria-invalid='true'] .base:hover + .label::before,
+[aria-invalid='true'] .base:focus + .label::before {
   border-color: var(--cui-border-danger-hovered);
 }
 
-[aria-invalid="true"] .base:checked + .label::before {
+[aria-invalid='true'] .base:checked + .label::before {
   border-color: var(--cui-border-danger);
 }

packages/circuit-ui/components/RadioButton/RadioButton.spec.tsx

@@ -70,6 +70,14 @@ describe('RadioButton', () => {
       const inputEl = screen.getByRole('radio');
       expect(inputEl).toHaveAccessibleName(defaultProps.label);
     });
+
+    it('should have a description', () => {
+      render(<RadioButton {...defaultProps} description="Some explanation" />);
+      const helperEl = screen.getAllByText('Some explanation');
+      expect(helperEl.length).toBeGreaterThan(0);
+      const labelEl = screen.getByText(defaultProps.label);
+      expect(labelEl).toHaveAccessibleDescription('Some explanation');
+    });
   });
 
   describe('State & Interactions', () => {

packages/circuit-ui/components/RadioButton/RadioButton.tsx

@@ -16,7 +16,7 @@
 import { InputHTMLAttributes, forwardRef, useId } from 'react';
 
 import { AccessibilityError } from '../../util/errors.js';
-import { FieldWrapper } from '../Field/index.js';
+import { FieldWrapper, FieldDescription } from '../Field/index.js';
 import { clsx } from '../../styles/clsx.js';
 import utilityClasses from '../../styles/utility.js';
 
@@ -28,6 +28,10 @@ export interface RadioButtonProps
    * A clear and concise description of the option's purpose.
    */
   label: string;
+  /**
+   * Further details about the option's purpose.
+   */
+  description?: string;
   children?: never;
 }
 
@@ -38,7 +42,9 @@ export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
   (
     {
       label,
-      id: customId,
+      description,
+      'aria-describedby': describedBy,
+      'id': customId,
       name,
       value,
       checked,
@@ -61,6 +67,11 @@ export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
     }
     const id = useId();
     const inputId = customId || id;
+    const descriptionId = useId();
+
+    const descriptionIds = [describedBy, description && descriptionId]
+      .filter(Boolean)
+      .join(' ');
 
     return (
       <FieldWrapper className={className} style={style} disabled={disabled}>
@@ -75,9 +86,24 @@ export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
           ref={ref}
           className={clsx(classes.base, utilityClasses.hideVisually)}
         />
-        <label htmlFor={inputId} className={classes.label} style={style}>
+        <label
+          htmlFor={inputId}
+          className={classes.label}
+          style={style}
+          aria-describedby={descriptionIds}
+        >
           {label}
+          {description && (
+            <FieldDescription aria-hidden="true">
+              {description}
+            </FieldDescription>
+          )}
         </label>
+        {description && (
+          <p id={descriptionIds} className={utilityClasses.hideVisually}>
+            {description}
+          </p>
+        )}
       </FieldWrapper>
     );
   },

packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.stories.tsx

@@ -44,8 +44,8 @@ Base.args = {
   label: 'Choose your favourite fruit',
   defaultValue: 'banana',
   options: [
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
+    { label: 'Apple', value: 'apple', description: 'Keeps the doctor away' },
+    { label: 'Banana', value: 'banana', description: 'Rich in Mg' },
     { label: 'Mango', value: 'mango' },
   ],
   // Storybook displays the default mocked function props poorly,
@@ -89,8 +89,8 @@ Validations.args = {
   label: 'Choose your favourite fruit',
   optionalLabel: 'Optional',
   options: [
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
+    { label: 'Apple', value: 'apple', description: 'Keeps the doctor away' },
+    { label: 'Banana', value: 'banana', description: 'Rich in Mg' },
     { label: 'Mango', value: 'mango' },
   ],
 };
@@ -102,8 +102,12 @@ export const Disabled = (args: RadioButtonGroupProps) => (
       name="fully-disabled"
       disabled
       options={[
-        { label: 'Apple', value: 'apple' },
-        { label: 'Banana', value: 'banana' },
+        {
+          label: 'Apple',
+          value: 'apple',
+          description: 'Keeps the doctor away',
+        },
+        { label: 'Banana', value: 'banana', description: 'Rich in Mg' },
         { label: 'Mango', value: 'mango' },
       ]}
       validationHint="All fruits are sold out"
@@ -113,9 +117,18 @@ export const Disabled = (args: RadioButtonGroupProps) => (
       {...args}
       name="partially-disabled"
       options={[
-        { label: 'Apple', value: 'apple' },
-        { label: 'Banana', value: 'banana' },
-        { label: 'Mango', value: 'mango', disabled: true },
+        {
+          label: 'Apple',
+          value: 'apple',
+          description: 'Keeps the doctor away',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+          description: 'Rich in Mg',
+          disabled: true,
+        },
+        { label: 'Mango', value: 'mango' },
       ]}
       validationHint="Some fruits are sold out"
       style={storyStyles}

packages/icons/CHANGELOG.md

@@ -33,6 +33,18 @@
 
 - [#2061](https://github.com/sumup-oss/circuit-ui/pull/2061) [`bc882426`](https://github.com/sumup-oss/circuit-ui/commit/bc882426a859e68ec7c029e1b56adbaa63f8260f) Thanks [@connor-baer](https://github.com/connor-baer)! - Switched to the `"exports"` field to configure the package entry points. Files that are not explicitly defined in `"exports"` can no longer be imported.
 
+## 2.30.1
+
+### Patch Changes
+
+- [#2203](https://github.com/sumup-oss/circuit-ui/pull/2203) [`71018c86`](https://github.com/sumup-oss/circuit-ui/commit/71018c860c3dc8fd12da2df728198fd22c69939a) Thanks [@connor-baer](https://github.com/connor-baer)! - Updated the Eftpos payment method icon to include the company name.
+
+## 2.30.0
+
+### Minor Changes
+
+- [#2201](https://github.com/sumup-oss/circuit-ui/pull/2201) [`2a40586c`](https://github.com/sumup-oss/circuit-ui/commit/2a40586c7efbf19f3834afdee2c95f0dcfbc41e5) Thanks [@Zayebatsu](https://github.com/Zayebatsu)! - Added new icon `ArrowSlanted` in size 16.
+
 ## 2.29.0
 
 ### Minor Changes

packages/icons/manifest.json

@@ -1216,6 +1216,11 @@
       "category": "Navigation",
       "size": "16"
     },
+    {
+      "name": "arrow_slanted",
+      "category": "Navigation",
+      "size": "16"
+    },
     {
       "name": "hamburger_menu",
       "category": "Navigation",