support passing ids and additional attributes

Author: lebalz

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -48,6 +48,7 @@ declare module '@theme/Admonition' {
     readonly icon?: ReactNode;
     readonly title?: ReactNode;
     readonly className?: string;
+    readonly id?: string;
   }
 
   export default function Admonition(props: Props): ReactNode;
@@ -123,6 +124,7 @@ declare module '@theme/Admonition/Layout' {
     readonly icon?: ReactNode;
     readonly title?: ReactNode;
     readonly className?: string;
+    readonly id?: string;
   }
   export default function AdmonitionLayout(props: Props): ReactNode;
 }

packages/docusaurus-theme-classic/src/theme/Admonition/Layout/index.tsx

@@ -17,15 +17,17 @@ function AdmonitionContainer({
   type,
   className,
   children,
-}: Pick<Props, 'type' | 'className'> & {children: ReactNode}) {
+  ...optional
+}: Pick<Props, 'type' | 'className' | 'id'> & {children: ReactNode}) {
   return (
     <div
       className={clsx(
         ThemeClassNames.common.admonition,
         ThemeClassNames.common.admonitionType(type),
         styles.admonition,
         className,
-      )}>
+      )}
+      {...optional}>
       {children}
     </div>
   );
@@ -47,9 +49,9 @@ function AdmonitionContent({children}: Pick<Props, 'children'>) {
 }
 
 export default function AdmonitionLayout(props: Props): ReactNode {
-  const {type, icon, title, children, className} = props;
+  const {type, icon, title, children, className, ...optional} = props;
   return (
-    <AdmonitionContainer type={type} className={className}>
+    <AdmonitionContainer type={type} className={className} {...optional}>
       {title || icon ? <AdmonitionHeading title={title} icon={icon} /> : null}
       <AdmonitionContent>{children}</AdmonitionContent>
     </AdmonitionContainer>

website/_dogfooding/_docs tests/tests/admonitions.mdx

@@ -62,8 +62,8 @@ import InfoIcon from "@theme/Admonition/Icon/Info"
 ```css title="dogfooding.css"
 /* ... */
 .shadow {
-  --shadow-color: red;
-  box-shadow: 10px 10px 10px var(--shadow-color);
+  --shadow-size: 10px;
+  box-shadow: 10px 10px var(--shadow-size) var(--shadow-color);
 
   &.blue {
     --shadow-color: blue;
@@ -111,9 +111,9 @@ The last provided id `info-2` wins when writing `:::{#info-3 #info-1 #info-2}`
 
 ### Combination
 
-:::info{.shadow #info-4 .blue #info-2 hello=world}
+:::info{.shadow #info-4 .blue #info-2 style="--shadow-size:5px"}
 
-Multiple Classes, Ids and attributes: `:::info{.shadow #id1 .blue #id2 hello=world}`. `hello` is passed to the admonition component, but not further used, so ignored in the output.
+Multiple Classes, Ids and attributes: `:::info{.shadow #id1 .blue #id2 style="--shadow-size:5px"}`.
 
 :::
 

website/_dogfooding/dogfooding.css

@@ -27,7 +27,8 @@ html {
 
       .shadow {
         --shadow-color: red;
-        box-shadow: 10px 10px 10px var(--shadow-color);
+        --shadow-size: 10px;
+        box-shadow: 10px 10px var(--shadow-size) var(--shadow-color);
 
         &.blue {
           --shadow-color: blue;