From a1448ad4a406c8ab25e95963eeec51760c342550 Mon Sep 17 00:00:00 2001 From: Leonardo Dino Date: Tue, 29 Oct 2024 10:55:46 -0300 Subject: [PATCH] Reduce global css (#2468) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .../components/Body/Body.module.css | 6 ++-- .../{Modal.css => ModalContext.module.css} | 4 +-- .../components/ModalContext/ModalContext.tsx | 7 ++-- .../components/SidePanel/SidePanel.tsx | 2 -- .../components/SidePanel/SidePanelContext.css | 35 ------------------ .../SidePanel/SidePanelContext.module.css | 36 +++++++++++++++++++ .../components/SidePanel/SidePanelContext.tsx | 4 +-- 7 files changed, 47 insertions(+), 47 deletions(-) rename packages/circuit-ui/components/ModalContext/{Modal.css => ModalContext.module.css} (88%) delete mode 100644 packages/circuit-ui/components/SidePanel/SidePanelContext.css diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css index 0fad80c41e..d826635519 100644 --- a/packages/circuit-ui/components/Body/Body.module.css +++ b/packages/circuit-ui/components/Body/Body.module.css @@ -88,12 +88,14 @@ /* Variants */ .highlight, -strong { +strong.base, +.base strong { font-weight: var(--cui-font-weight-bold); } .quote, -blockquote { +blockquote.base, +.base blockquote { padding-left: var(--cui-spacings-kilo); font-style: italic; border-left: var(--cui-border-width-mega) solid var(--cui-border-accent); diff --git a/packages/circuit-ui/components/ModalContext/Modal.css b/packages/circuit-ui/components/ModalContext/ModalContext.module.css similarity index 88% rename from packages/circuit-ui/components/ModalContext/Modal.css rename to packages/circuit-ui/components/ModalContext/ModalContext.module.css index 0366289c73..ee877d489a 100644 --- a/packages/circuit-ui/components/ModalContext/Modal.css +++ b/packages/circuit-ui/components/ModalContext/ModalContext.module.css @@ -1,12 +1,12 @@ /* Remove scroll on the body when react-modal is open */ -.cui-modal-open { +.open { height: 100%; overflow-y: hidden; -webkit-overflow-scrolling: auto; } /* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ -.cui-modal-portal { +.portal { position: absolute; width: 100%; height: 100%; diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.tsx index eace659f21..58ed87be9e 100644 --- a/packages/circuit-ui/components/ModalContext/ModalContext.tsx +++ b/packages/circuit-ui/components/ModalContext/ModalContext.tsx @@ -29,11 +29,10 @@ import { last } from '../../util/helpers.js'; import { warn } from '../../util/logger.js'; import type { BaseModalProps, ModalComponent } from './types.js'; +import classes from './ModalContext.module.css'; -import './Modal.css'; - -const PORTAL_CLASS_NAME = 'cui-modal-portal'; -const HTML_OPEN_CLASS_NAME = 'cui-modal-open'; +const PORTAL_CLASS_NAME = classes.portal; +const HTML_OPEN_CLASS_NAME = classes.open; // These are the default app element ids in Next.js, Docusaurus, CRA and Storybook. const APP_ELEMENT_IDS = ['root', '__next', '__docusaurus', 'storybook-root']; diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.tsx index c30e57f342..e1d23ef804 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanel.tsx @@ -109,8 +109,6 @@ export const SidePanel = ({ labelledby: headerAriaId, }, onRequestClose: onBack || onClose, - portalClassName: 'cui-side-panel-portal', - htmlOpenClassName: 'cui-side-panel-open', bodyOpenClassName: '', /** * react-modal relies on document.activeElement to return focus after the modal is closed. diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.css b/packages/circuit-ui/components/SidePanel/SidePanelContext.css deleted file mode 100644 index 3178abc6c0..0000000000 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.css +++ /dev/null @@ -1,35 +0,0 @@ -:root { - --side-panel-width: 400px; -} - -/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ -.cui-side-panel-portal { - position: fixed; - right: 0; - bottom: 0; -} - -@media (max-width: 767px) { - /* Remove scroll on the body when react-modal is open */ - .cui-side-panel-open { - height: 100%; - overflow-y: hidden; - -webkit-overflow-scrolling: auto; - } - - /* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ - .cui-side-panel-portal { - top: 0; - left: 0; - z-index: var(--cui-z-index-modal); - } -} - -/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ -@media (min-width: 768px) { - .cui-side-panel-portal { - top: var(--top-navigation-height, 0); - z-index: var(--cui-z-index-absolute); - width: var(--side-panel-width); - } -} diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css b/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css index a971decf1e..26cfbf091c 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css +++ b/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css @@ -1,3 +1,39 @@ +:root { + --side-panel-width: 400px; +} + +/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ +.portal { + position: fixed; + right: 0; + bottom: 0; +} + +@media (max-width: 767px) { + /* Remove scroll on the body when react-modal is open */ + .open { + height: 100%; + overflow-y: hidden; + -webkit-overflow-scrolling: auto; + } + + /* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ + .portal { + top: 0; + left: 0; + z-index: var(--cui-z-index-modal); + } +} + +/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */ +@media (min-width: 768px) { + .portal { + top: var(--top-navigation-height, 0); + z-index: var(--cui-z-index-absolute); + width: var(--side-panel-width); + } +} + .base { width: 100%; min-height: calc(100vh - var(--top-navigation-height)); diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx b/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx index 7f34a123cc..c58c88322f 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx @@ -38,8 +38,6 @@ import { TRANSITION_DURATION } from './constants.js'; import type { SidePanelHookProps } from './useSidePanel.js'; import classes from './SidePanelContext.module.css'; -import './SidePanelContext.css'; - // It is important for users of screen readers that other page content be hidden // (via the `aria-hidden` attribute) while the side panel is open on mobile. // To allow react-modal to do this, Circuit UI calls `ReactModal.setAppElement` @@ -287,6 +285,8 @@ export function SidePanelProvider({ isStacked={isStacked} onBack={handleBack} onClose={handleClose} + portalClassName={classes.portal} + htmlOpenClassName={classes.open} /> ); })}