From 7d25a02c1e45101ead6965833f12c4be48eba914 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 12 Aug 2022 12:34:54 +0200 Subject: [PATCH] refactor(theme-classic): split AnnouncementBar, increase z-index, use shadow (#7940) --- .../src/theme-classic.d.ts | 16 +++++++++ .../AnnouncementBar/CloseButton/index.tsx | 31 ++++++++++++++++ .../CloseButton/styles.module.css | 11 ++++++ .../theme/AnnouncementBar/Content/index.tsx | 28 +++++++++++++++ .../AnnouncementBar/Content/styles.module.css | 17 +++++++++ .../src/theme/AnnouncementBar/index.tsx | 36 ++++++------------- .../theme/AnnouncementBar/styles.module.css | 13 ++----- 7 files changed, 115 insertions(+), 37 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/styles.module.css create mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index e0f864266cf0..5c6db4e29825 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -55,6 +55,22 @@ declare module '@theme/AnnouncementBar' { export default function AnnouncementBar(): JSX.Element | null; } +declare module '@theme/AnnouncementBar/Content' { + import type {ComponentProps} from 'react'; + + export interface Props extends ComponentProps<'div'> {} + + export default function AnnouncementBarContent(props: Props): JSX.Element; +} + +declare module '@theme/AnnouncementBar/CloseButton' { + import type {ComponentProps} from 'react'; + + export interface Props extends ComponentProps<'button'> {} + + export default function AnnouncementBarCloseButton(props: Props): JSX.Element; +} + declare module '@theme/BackToTopButton' { export default function BackToTopButton(): JSX.Element; } diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx new file mode 100644 index 000000000000..5ae3135bf9f7 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx @@ -0,0 +1,31 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import clsx from 'clsx'; +import {translate} from '@docusaurus/Translate'; +import IconClose from '@theme/Icon/Close'; +import type {Props} from '@theme/AnnouncementBar/CloseButton'; +import styles from './styles.module.css'; + +export default function AnnouncementBarCloseButton( + props: Props, +): JSX.Element | null { + return ( + + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/styles.module.css new file mode 100644 index 000000000000..46f38c1a3344 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/styles.module.css @@ -0,0 +1,11 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.closeButton { + padding: 0; + line-height: 0; +} diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx new file mode 100644 index 000000000000..4feb2bc2b7d7 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx @@ -0,0 +1,28 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import clsx from 'clsx'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import type {Props} from '@theme/AnnouncementBar/Content'; +import styles from './styles.module.css'; + +export default function AnnouncementBarContent( + props: Props, +): JSX.Element | null { + const {announcementBar} = useThemeConfig(); + const {content} = announcementBar!; + return ( +
+ ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/styles.module.css new file mode 100644 index 000000000000..38b818db915f --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/styles.module.css @@ -0,0 +1,17 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.content { + font-size: 85%; + text-align: center; + padding: 5px 0; +} + +.content a { + color: inherit; + text-decoration: underline; +} diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx index 1cf1b377bbc2..aaa766c35134 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx @@ -6,49 +6,33 @@ */ import React from 'react'; -import clsx from 'clsx'; import {useThemeConfig} from '@docusaurus/theme-common'; import {useAnnouncementBar} from '@docusaurus/theme-common/internal'; -import {translate} from '@docusaurus/Translate'; -import IconClose from '@theme/Icon/Close'; +import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton'; +import AnnouncementBarContent from '@theme/AnnouncementBar/Content'; import styles from './styles.module.css'; export default function AnnouncementBar(): JSX.Element | null { - const {isActive, close} = useAnnouncementBar(); const {announcementBar} = useThemeConfig(); - + const {isActive, close} = useAnnouncementBar(); if (!isActive) { return null; } - - const {content, backgroundColor, textColor, isCloseable} = announcementBar!; - + const {backgroundColor, textColor, isCloseable} = announcementBar!; return (
{isCloseable &&
} -
- {isCloseable ? ( - - ) : null} + className={styles.announcementBarClose} + /> + )}
); } diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css index 74969ee6515c..f81f61ea8770 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css @@ -15,7 +15,8 @@ height: var(--docusaurus-announcement-bar-height); background-color: var(--ifm-color-white); color: var(--ifm-color-black); - border-bottom: 1px solid var(--ifm-color-emphasis-100); + box-shadow: var(--ifm-global-shadow-lw); + z-index: calc(var(--ifm-z-index-fixed) + 1); /* just above the navbar */ } html[data-announcement-bar-initially-dismissed='true'] .announcementBar { @@ -29,15 +30,10 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { .announcementBarClose { flex: 0 0 30px; align-self: stretch; - padding: 0; - line-height: 0; } .announcementBarContent { flex: 1 1 auto; - font-size: 85%; - text-align: center; - padding: 5px 0; } @media print { @@ -46,11 +42,6 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar { } } -.announcementBarContent a { - color: inherit; - text-decoration: underline; -} - @media (min-width: 997px) { :root { --docusaurus-announcement-bar-height: 30px;