From b7c6be4c65579afedad1398d6174f35c2c00c1a0 Mon Sep 17 00:00:00 2001 From: Persijn kwekkeboom <3340349+poi33@users.noreply.github.com> Date: Mon, 29 Apr 2024 18:35:29 +0200 Subject: [PATCH] refactor(box): Move css-modules to plain css (#1846) (#1908) --- .../Box/Box.module.css => css/box.css} | 36 ++++----- packages/css/index.css | 1 + packages/css/react-css-modules.css | 74 ------------------- .../react/src/components/Box/Box.test.tsx | 6 +- packages/react/src/components/Box/Box.tsx | 12 ++- 5 files changed, 27 insertions(+), 102 deletions(-) rename packages/{react/src/components/Box/Box.module.css => css/box.css} (64%) diff --git a/packages/react/src/components/Box/Box.module.css b/packages/css/box.css similarity index 64% rename from packages/react/src/components/Box/Box.module.css rename to packages/css/box.css index f0f4275b6a..9744b8d5e7 100644 --- a/packages/react/src/components/Box/Box.module.css +++ b/packages/css/box.css @@ -1,73 +1,73 @@ @layer fds.box { - .xsmallShadow { + .fds-box--xsmall-shadow { box-shadow: var(--fds-shadow-xsmall); } - .smallShadow { + .fds-box--small-shadow { box-shadow: var(--fds-shadow-small); } - .mediumShadow { + .fds-box--medium-shadow { box-shadow: var(--fds-shadow-medium); } - .largeShadow { + .fds-box--large-shadow { box-shadow: var(--fds-shadow-large); } - .xlargeShadow { + .fds-box--xlarge-shadow { box-shadow: var(--fds-shadow-xlarge); } - .defaultBorderColor { + .fds-box--default-border-color { border: 1px solid var(--fds-semantic-border-neutral-default); } - .subtleBorderColor { + .fds-box--subtle-border-color { border: 1px solid var(--fds-semantic-border-neutral-subtle); } - .strongBorderColor { + .fds-box--strong-border-color { border: 1px solid var(--fds-semantic-border-neutral-strong); } - .smallBorderRadius { + .fds-box--small-border-radius { border-radius: var(--fds-border_radius-small); } - .mediumBorderRadius { + .fds-box--medium-border-radius { border-radius: var(--fds-border_radius-medium); } - .largeBorderRadius { + .fds-box--large-border-radius { border-radius: var(--fds-border_radius-large); } - .xlargeBorderRadius { + .fds-box--xlarge-border-radius { border-radius: var(--fds-border_radius-xlarge); } - .xxlargeBorderRadius { + .fds-box--xxlarge-border-radius { border-radius: var(--fds-border_radius-xxlarge); } - .xxxlargeBorderRadius { + .fds-box--xxxlarge-border-radius { border-radius: var(--fds-border_radius-xxxlarge); } - .xxxxlargeBorderRadius { + .fds-box--xxxxlarge-border-radius { border-radius: var(--fds-border_radius-xxxxlarge); } - .fullBorderRadius { + .fds-box--full-border-radius { border-radius: var(--fds-border_radius-full); } - .defaultBackground { + .fds-box--default-background { background-color: var(--fds-semantic-background-default); } - .subtleBackground { + .fds-box--subtle-background { background-color: var(--fds-semantic-background-subtle); } } diff --git a/packages/css/index.css b/packages/css/index.css index 884fb499e3..7d4edf9b40 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -10,3 +10,4 @@ @import url('./ingress.css'); @import url('./skiplink.css'); @import url('./accordion.css'); +@import url('./box.css'); diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css index 7961d0fb92..178755ee34 100644 --- a/packages/css/react-css-modules.css +++ b/packages/css/react-css-modules.css @@ -2329,80 +2329,6 @@ } } -@layer fds.box { - .fds-box-xsmallShadow-7eee64b7 { - box-shadow: var(--fds-shadow-xsmall); - } - - .fds-box-smallShadow-7eee64b7 { - box-shadow: var(--fds-shadow-small); - } - - .fds-box-mediumShadow-7eee64b7 { - box-shadow: var(--fds-shadow-medium); - } - - .fds-box-largeShadow-7eee64b7 { - box-shadow: var(--fds-shadow-large); - } - - .fds-box-xlargeShadow-7eee64b7 { - box-shadow: var(--fds-shadow-xlarge); - } - - .fds-box-defaultBorderColor-7eee64b7 { - border: 1px solid var(--fds-semantic-border-neutral-default); - } - - .fds-box-subtleBorderColor-7eee64b7 { - border: 1px solid var(--fds-semantic-border-neutral-subtle); - } - - .fds-box-strongBorderColor-7eee64b7 { - border: 1px solid var(--fds-semantic-border-neutral-strong); - } - - .fds-box-smallBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-small); - } - - .fds-box-mediumBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-medium); - } - - .fds-box-largeBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-large); - } - - .fds-box-xlargeBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-xlarge); - } - - .fds-box-xxlargeBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-xxlarge); - } - - .fds-box-xxxlargeBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-xxxlarge); - } - - .fds-box-xxxxlargeBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-xxxxlarge); - } - - .fds-box-fullBorderRadius-7eee64b7 { - border-radius: var(--fds-border_radius-full); - } - - .fds-box-defaultBackground-7eee64b7 { - background-color: var(--fds-semantic-background-default); - } - - .fds-box-subtleBackground-7eee64b7 { - background-color: var(--fds-semantic-background-subtle); - } -} - @layer fds.card { .fds-card-media-a01cb08f { width: auto; diff --git a/packages/react/src/components/Box/Box.test.tsx b/packages/react/src/components/Box/Box.test.tsx index 430c901473..26ed30416d 100644 --- a/packages/react/src/components/Box/Box.test.tsx +++ b/packages/react/src/components/Box/Box.test.tsx @@ -28,21 +28,21 @@ describe('Box', () => { render({ shadow: 'xsmall' }); const box = screen.getByTitle('box'); - expect(box.classList).toContain('xsmallShadow'); + expect(box.classList).toContain('fds-box--xsmall-shadow'); }); it('should render a div with correct classname when borderColor is subtle', () => { render({ borderColor: 'subtle' }); const box = screen.getByTitle('box'); - expect(box.classList).toContain('subtleBorderColor'); + expect(box.classList).toContain('fds-box--subtle-border-color'); }); it('should render a div with correct classname when borderRadius is small', () => { render({ borderRadius: 'small' }); const box = screen.getByTitle('box'); - expect(box.classList).toContain('smallBorderRadius'); + expect(box.classList).toContain('fds-box--small-border-radius'); }); it('should render as a button when we use asChild', () => { diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index 15b8dc5b03..f1aa723a62 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -1,10 +1,8 @@ import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; -import cl from 'clsx'; +import cl from 'clsx/lite'; import { Slot } from '@radix-ui/react-slot'; -import classes from './Box.module.css'; - export type BoxProps = { /** * Shadow size of the box @@ -61,10 +59,10 @@ export const Box = forwardRef(