fix(theme): Footer Column/Link should merge provided className (#10796)

Author: slorber

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

@@ -308,6 +308,7 @@ const FooterLinkItemSchema = Joi.object({
   href: URISchema,
   html: Joi.string(),
   label: Joi.string(),
+  className: Joi.string(),
 })
   .xor('to', 'href', 'html')
   .with('to', 'label')
@@ -317,6 +318,12 @@ const FooterLinkItemSchema = Joi.object({
   // attributes like target, aria-role, data-customAttribute...)
   .unknown();
 
+const FooterColumnItemSchema = Joi.object({
+  title: Joi.string().allow(null).default(null),
+  className: Joi.string(),
+  items: Joi.array().items(FooterLinkItemSchema).default([]),
+});
+
 const LogoSchema = Joi.object({
   alt: Joi.string().allow(''),
   src: Joi.string().required(),
@@ -384,12 +391,7 @@ export const ThemeConfigSchema = Joi.object<ThemeConfig>({
     logo: LogoSchema,
     copyright: Joi.string(),
     links: Joi.alternatives(
-      Joi.array().items(
-        Joi.object({
-          title: Joi.string().allow(null).default(null),
-          items: Joi.array().items(FooterLinkItemSchema).default([]),
-        }),
-      ),
+      Joi.array().items(FooterColumnItemSchema),
       Joi.array().items(FooterLinkItemSchema),
     )
       .messages({

packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx

@@ -6,21 +6,21 @@
  */
 
 import React, {type ReactNode} from 'react';
-
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/Footer/LinkItem';
 
 export default function FooterLinkItem({item}: Props): ReactNode {
-  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+  const {to, href, label, prependBaseUrlToHref, className, ...props} = item;
   const toUrl = useBaseUrl(to);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
 
   return (
     <Link
-      className="footer__link-item"
+      className={clsx('footer__link-item', className)}
       {...(href
         ? {
             href: prependBaseUrlToHref ? normalizedHref : href,

packages/docusaurus-theme-classic/src/theme/Footer/Links/MultiColumn/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/MultiColumn';
 
@@ -15,7 +16,7 @@ type ColumnItemType = ColumnType['items'][number];
 function ColumnLinkItem({item}: {item: ColumnItemType}) {
   return item.html ? (
     <li
-      className="footer__item"
+      className={clsx('footer__item', item.className)}
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: item.html}}
@@ -29,7 +30,7 @@ function ColumnLinkItem({item}: {item: ColumnItemType}) {
 
 function Column({column}: {column: ColumnType}) {
   return (
-    <div className="col footer__col">
+    <div className={clsx('col footer__col', column.className)}>
       <div className="footer__title">{column.title}</div>
       <ul className="footer__items clean-list">
         {column.items.map((item, i) => (

packages/docusaurus-theme-classic/src/theme/Footer/Links/Simple/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import LinkItem from '@theme/Footer/LinkItem';
 import type {Props} from '@theme/Footer/Links/Simple';
 
@@ -16,7 +17,7 @@ function Separator() {
 function SimpleLinkItem({item}: {item: Props['links'][number]}) {
   return item.html ? (
     <span
-      className="footer__link-item"
+      className={clsx('footer__link-item', item.className)}
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{__html: item.html}}

packages/docusaurus-theme-common/src/utils/useThemeConfig.ts

@@ -67,12 +67,19 @@ export type PrismConfig = {
 
 export type FooterLinkItem = {
   label?: string;
+  className?: string;
   to?: string;
   href?: string;
   html?: string;
   prependBaseUrlToHref?: string;
 } & {[key: string]: unknown};
 
+export type FooterColumnItem = {
+  title: string | null;
+  className?: string;
+  items: FooterLinkItem[];
+};
+
 export type FooterLogo = BaseLogo;
 
 export type FooterBase = {
@@ -82,10 +89,7 @@ export type FooterBase = {
 };
 
 export type MultiColumnFooter = FooterBase & {
-  links: {
-    title: string | null;
-    items: FooterLinkItem[];
-  }[];
+  links: FooterColumnItem[];
 };
 
 export type SimpleFooter = FooterBase & {

website/docusaurus.config.ts

@@ -804,11 +804,12 @@ export default async function createConfigAsync() {
           },
           {
             title: 'Legal',
-            // Please don't remove the privacy and terms, it's a legal
-            // requirement.
+            className: 'footer-column-legal',
+            // Don't remove the privacy and terms, it's a legal requirement.
             items: [
               {
                 label: 'Privacy',
+                className: 'footer-item-privacy',
                 href: 'https://opensource.facebook.com/legal/privacy/',
               },
               {