Enable style prop on every component

Author: garronej

src/Accordion.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import React, { forwardRef, memo, ReactNode, useId, useState } from "react";
+import React, {
+    forwardRef,
+    memo,
+    useId,
+    useState,
+    type ReactNode,
+    type CSSProperties
+} from "react";
 import { assert } from "tsafe";
 import type { Equals } from "tsafe";
 import { fr } from "./fr";
@@ -16,6 +23,7 @@ export namespace AccordionProps {
         titleAs?: `h${2 | 3 | 4 | 5 | 6}`;
         label: ReactNode;
         classes?: Partial<Record<"root" | "accordion" | "title" | "collapse", string>>;
+        style?: CSSProperties;
         children: NonNullable<ReactNode>;
     };
 
@@ -46,6 +54,7 @@ export const Accordion = memo(
             titleAs: HtmlTitleTag = "h3",
             label,
             classes = {},
+            style,
             children,
             expanded: expandedProp,
             defaultExpanded = false,
@@ -69,7 +78,12 @@ export const Accordion = memo(
         );
 
         return (
-            <section className={cx(fr.cx("fr-accordion"), className)} ref={ref} {...rest}>
+            <section
+                className={cx(fr.cx("fr-accordion"), className)}
+                style={style}
+                ref={ref}
+                {...rest}
+            >
                 <HtmlTitleTag className={cx(fr.cx("fr-accordion__title"), classes.title)}>
                     <button
                         className={fr.cx("fr-accordion__btn")}

src/Alert.tsx

@@ -1,7 +1,14 @@
 "use client";
 
-import React, { memo, forwardRef, useState, useEffect, useRef } from "react";
-import type { ReactNode } from "react";
+import React, {
+    memo,
+    forwardRef,
+    useState,
+    useEffect,
+    useRef,
+    type ReactNode,
+    type CSSProperties
+} from "react";
 import type { FrClassName } from "./fr/generatedFromCss/classNames";
 import { symToStr } from "tsafe/symToStr";
 import { fr } from "./fr";
@@ -17,6 +24,7 @@ export type AlertProps = {
     /** Default h3 */
     as?: `h${2 | 3 | 4 | 5 | 6}`;
     classes?: Partial<Record<"root" | "title" | "description" | "close", string>>;
+    style?: CSSProperties;
 } & (AlertProps.DefaultSize | AlertProps.Small) &
     (AlertProps.NonClosable | AlertProps.Closable);
 
@@ -74,6 +82,7 @@ export const Alert = memo(
             severity,
             as: HtmlTitleTag = "h3",
             classes = {},
+            style,
             small: isSmall,
             title,
             description,
@@ -144,6 +153,7 @@ export const Alert = memo(
                     classes.root,
                     className
                 )}
+                style={style}
                 {...(refShouldSetRole.current && { "role": "alert" })}
                 ref={ref}
                 {...rest}

src/Badge.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, ReactNode } from "react";
+import React, { memo, forwardRef, type ReactNode, type CSSProperties } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -8,6 +8,7 @@ import type { AlertProps } from "./Alert";
 
 export type BadgeProps = {
     className?: string;
+    style?: CSSProperties;
     severity?: AlertProps.Severity | "new";
     small?: boolean;
     noIcon?: boolean;
@@ -19,6 +20,7 @@ export const Badge = memo(
     forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
         const {
             className,
+            style,
             severity,
             small: isSmall = false,
             noIcon = false,
@@ -39,6 +41,7 @@ export const Badge = memo(
                     ),
                     className
                 )}
+                style={style}
                 ref={ref}
                 {...rest}
             >

src/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, useId, ReactNode } from "react";
+import React, { memo, forwardRef, useId, type ReactNode, type CSSProperties } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -17,6 +17,7 @@ export type BreadcrumbProps = {
     }[];
     currentPageLabel: ReactNode;
     classes?: Partial<Record<"root" | "button" | "collapse" | "list" | "link" | "text", string>>;
+    style?: CSSProperties;
 };
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-breadcrumb> */
@@ -28,6 +29,7 @@ export const Breadcrumb = memo(
             segments,
             currentPageLabel,
             classes = {},
+            style,
             ...rest
         } = props;
 
@@ -43,6 +45,7 @@ export const Breadcrumb = memo(
                 ref={ref}
                 role="navigation"
                 className={cx(fr.cx("fr-breadcrumb"), classes.root, className)}
+                style={style}
                 aria-label={`${t("navigation label")} :`}
                 {...rest}
             >

src/Button.tsx

@@ -1,9 +1,11 @@
-import React, { memo, forwardRef } from "react";
-import type {
-    ReactNode,
-    RefAttributes,
-    MemoExoticComponent,
-    ForwardRefExoticComponent
+import React, {
+    memo,
+    forwardRef,
+    type ReactNode,
+    type RefAttributes,
+    type MemoExoticComponent,
+    type ForwardRefExoticComponent,
+    type CSSProperties
 } from "react";
 import { fr } from "./fr";
 import { cx } from "./tools/cx";
@@ -24,6 +26,7 @@ export namespace ButtonProps {
         priority?: "primary" | "secondary" | "tertiary" | "tertiary no outline";
         /** Default medium */
         size?: "small" | "medium" | "large";
+        style?: CSSProperties;
     };
 
     export type IconOnly = {
@@ -91,6 +94,7 @@ export const Button = memo(
             nativeButtonProps,
             disabled,
             type,
+            style,
             ...rest
         } = props;
 
@@ -127,6 +131,7 @@ export const Button = memo(
                 {...linkProps}
                 title={title ?? linkProps.title}
                 className={className}
+                style={style}
                 ref={ref as React.ForwardedRef<HTMLAnchorElement>}
                 {...rest}
             >
@@ -136,6 +141,7 @@ export const Button = memo(
             <button
                 {...nativeButtonProps}
                 className={className}
+                style={style}
                 type={type}
                 title={title}
                 onClick={onClick}

src/ButtonsGroup.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef } from "react";
+import React, { memo, forwardRef, type CSSProperties } from "react";
 import { Button } from "./Button";
 import { ButtonProps } from "./Button";
 import { symToStr } from "tsafe/symToStr";
@@ -20,6 +20,7 @@ export namespace ButtonsGroupProps {
         /** Default: false */
         buttonsEquisized?: boolean;
         buttons: [ButtonProps, ButtonProps, ...ButtonProps[]];
+        style?: CSSProperties;
     };
 
     export type AlwaysStacked = Common & {
@@ -56,6 +57,7 @@ export const ButtonsGroup = memo(
             buttonsEquisized = false,
             isReverseOrder = false,
             buttons,
+            style,
             ...rest
         } = props;
 
@@ -95,7 +97,7 @@ export const ButtonsGroup = memo(
         );
 
         return (
-            <ul className={buttonsGroupClassName} ref={ref} {...rest}>
+            <ul className={buttonsGroupClassName} style={style} ref={ref} {...rest}>
                 {buttons.map((buttonProps, i) => (
                     <li key={i}>
                         <Button {...buttonProps} />

src/CallOut.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, ReactNode } from "react";
+import React, { memo, forwardRef, ReactNode, type CSSProperties } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -19,6 +19,7 @@ export type CallOutProps = {
     buttonProps?: ButtonProps;
     colorVariant?: CallOutProps.ColorVariant;
     classes?: Partial<Record<"root" | "title" | "text" | "button", string>>;
+    style?: CSSProperties;
     children: ReactNode;
 };
 
@@ -41,6 +42,7 @@ export const CallOut = memo(
             colorVariant,
             classes = {},
             children,
+            style,
             ...rest
         } = props;
 
@@ -58,6 +60,7 @@ export const CallOut = memo(
                     className
                 )}
                 ref={ref}
+                style={style}
                 {...rest}
             >
                 {title !== undefined && (

src/Card.tsx

@@ -1,5 +1,4 @@
-import React, { memo, forwardRef } from "react";
-import type { ReactNode } from "react";
+import React, { memo, forwardRef, type ReactNode, type CSSProperties } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -56,6 +55,7 @@ export type CardProps = {
             string
         >
     >;
+    style?: CSSProperties;
     /** Default false */
     horizontal?: boolean;
 } & (CardProps.EnlargedLink | CardProps.NotEnlargedLink);
@@ -96,6 +96,7 @@ export const Card = memo(
             shadow = false,
             grey = false,
             iconId,
+            style,
             ...rest
         } = props;
 
@@ -129,6 +130,7 @@ export const Card = memo(
                     classes.root,
                     className
                 )}
+                style={style}
                 ref={ref}
                 {...rest}
             >

src/Display.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, useId } from "react";
+import React, { memo, forwardRef, useId, type CSSProperties } from "react";
 import { fr } from "./fr";
 import { symToStr } from "tsafe/symToStr";
 import { createComponentI18nApi } from "./i18n";
@@ -14,6 +14,7 @@ import type { FooterProps } from "./Footer";
 
 export type DisplayProps = {
     className?: string;
+    style?: CSSProperties;
 };
 
 const dialogId = "fr-theme-modal";
@@ -39,7 +40,7 @@ export const headerFooterDisplayItem: HeaderProps.QuickAccessItem.Button &
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-display> */
 export const Display = memo(
     forwardRef<HTMLDialogElement, DisplayProps>((props, ref) => {
-        const { className, ...rest } = props;
+        const { className, style, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -52,6 +53,7 @@ export const Display = memo(
                 role="dialog"
                 aria-labelledby={dialogTitleId}
                 ref={ref}
+                style={style}
                 {...rest}
             >
                 <div className={fr.cx("fr-container", "fr-container--fluid", "fr-container-md")}>

src/Footer.tsx

@@ -1,5 +1,4 @@
-import React, { memo, forwardRef } from "react";
-import type { ReactNode } from "react";
+import React, { memo, forwardRef, type ReactNode, type CSSProperties } from "react";
 import { getLink } from "./link";
 import type { RegisteredLinkProps } from "./link";
 import { symToStr } from "tsafe/symToStr";
@@ -55,6 +54,7 @@ export type FooterProps = {
             string
         >
     >;
+    style?: CSSProperties;
 };
 
 export namespace FooterProps {
@@ -99,6 +99,7 @@ export const Footer = memo(
             bottomItems = [],
             operatorLogo,
             license,
+            style,
             ...rest
         } = props;
 
@@ -114,6 +115,7 @@ export const Footer = memo(
                 role="contentinfo"
                 id="footer"
                 ref={ref}
+                style={style}
                 {...rest}
             >
                 <div className={fr.cx("fr-container")}>