From 856d67f31f3037cfe950b5d299769fa9874c7139 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Nov 2024 12:57:59 +0100 Subject: [PATCH 1/7] :coffin: Remove popover arrow in new design --- @navikt/core/react/src/popover/Popover.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx index 64227527b4..0703204624 100644 --- a/@navikt/core/react/src/popover/Popover.tsx +++ b/@navikt/core/react/src/popover/Popover.tsx @@ -11,6 +11,7 @@ import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react"; import { DateContext } from "../date/context"; import { useModalContext } from "../modal/Modal.context"; import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer"; +import { UNSAFE_useAkselTheme } from "../provider"; import { useClientLayoutEffect } from "../util/hooks"; import { useMergeRefs } from "../util/hooks/useMergeRefs"; import PopoverContent, { PopoverContentType } from "./PopoverContent"; @@ -124,6 +125,8 @@ export const Popover = forwardRef( const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute"); const chosenFlip = isInDatepicker ? false : _flip; + const themeContext = UNSAFE_useAkselTheme(false); + const { update, refs, @@ -135,7 +138,7 @@ export const Popover = forwardRef( placement, open, middleware: [ - flOffset(offset ?? (arrow ? 16 : 4)), + flOffset(offset ?? (arrow && !themeContext ? 16 : 4)), chosenFlip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }), shift({ padding: 12 }), @@ -187,7 +190,8 @@ export const Popover = forwardRef( aria-hidden={!open || !anchorEl} > {children} - {arrow && ( + {/* Hide arrow in new design, prop will be remove din breaking change update */} + {arrow && !themeContext && (
{ arrowRef.current = node; From 0230bb67d85b23ec9f5d440c8ebf5ae4f5142fd2 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Nov 2024 13:06:02 +0100 Subject: [PATCH 2/7] :tada: Added darkmode support to popover --- .../core/css/darkside/popover.darkside.css | 92 ++++--------------- @navikt/core/react/src/popover/Popover.tsx | 2 +- .../react/src/popover/popover.stories.tsx | 1 + 3 files changed, 19 insertions(+), 76 deletions(-) diff --git a/@navikt/core/css/darkside/popover.darkside.css b/@navikt/core/css/darkside/popover.darkside.css index 9cdf49542d..cd2d462ce4 100644 --- a/@navikt/core/css/darkside/popover.darkside.css +++ b/@navikt/core/css/darkside/popover.darkside.css @@ -1,84 +1,26 @@ .navds-popover { - z-index: var(--a-z-index-popover); - background-color: var(--ac-popover-bg, var(--a-surface-default)); - box-shadow: var(--a-shadow-medium); - border: 1px solid; - border-color: var(--ac-popover-border, var(--a-border-default)); - border-radius: var(--a-border-radius-large); - max-width: calc(100vw - var(--a-spacing-6)); + z-index: 1000; + background: var(--ax-bg-raised); + box-shadow: + 0 0 1px 0 rgba(7 9 13/ 0.02), + 0 2px 5px 0 rgba(7 9 13/ 0.1), + 0 5px 12px 0 rgba(7 9 13/ 0.12); + border: 1px solid var(--ax-border-subtleA); + border-radius: var(--ax-border-radius-xlarge); + + /* Creates a small gutter between screen-edges on smaller devices */ + max-width: calc(100vw - var(--ax-spacing-6)); + + &:focus-visible { + outline: 2px solid var(--ax-border-focus); + outline-offset: 2px; + } } .navds-popover__content { - padding: var(--a-spacing-4); + padding: var(--ax-spacing-4); } .navds-popover--hidden { display: none; } - -.navds-popover:focus-visible { - outline: none; - box-shadow: var(--a-shadow-focus); -} - -@supports not selector(:focus-visible) { - .navds-popover:focus { - outline: none; - box-shadow: var(--a-shadow-focus); - } -} - -.navds-popover__arrow { - position: absolute; - z-index: -1; - transform: rotate(45deg); - background-color: var(--ac-popover-bg, var(--a-surface-default)); - border: 1px solid; - border-color: var(--ac-popover-border, var(--a-border-default)); - width: 1rem; - height: 1rem; -} - -.navds-popover[data-placement^="top"] > .navds-popover__arrow { - border-left-color: transparent; - border-top-color: transparent; -} - -/* prettier-ignore */ -.navds-popover[data-placement^="bottom"] > .navds-popover__arrow { - border-bottom-color: transparent; - border-right-color: transparent; -} - -.navds-popover[data-placement^="left"] > .navds-popover__arrow { - border-left-color: transparent; - border-bottom-color: transparent; -} - -.navds-popover[data-placement^="right"] > .navds-popover__arrow { - border-right-color: transparent; - border-top-color: transparent; -} - -@media (forced-colors: active) { - .navds-popover[data-placement^="top"] > .navds-popover__arrow { - border-left-color: canvas; - border-top-color: canvas; - } - - /* prettier-ignore */ - .navds-popover[data-placement^="bottom"] > .navds-popover__arrow { - border-bottom-color: canvas; - border-right-color: canvas; - } - - .navds-popover[data-placement^="left"] > .navds-popover__arrow { - border-left-color: canvas; - border-bottom-color: canvas; - } - - .navds-popover[data-placement^="right"] > .navds-popover__arrow { - border-right-color: canvas; - border-top-color: canvas; - } -} diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx index 0703204624..9319dbdb32 100644 --- a/@navikt/core/react/src/popover/Popover.tsx +++ b/@navikt/core/react/src/popover/Popover.tsx @@ -138,7 +138,7 @@ export const Popover = forwardRef( placement, open, middleware: [ - flOffset(offset ?? (arrow && !themeContext ? 16 : 4)), + flOffset(offset ?? themeContext ? 8 : arrow ? 16 : 4), chosenFlip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }), shift({ padding: 12 }), diff --git a/@navikt/core/react/src/popover/popover.stories.tsx b/@navikt/core/react/src/popover/popover.stories.tsx index 94d98166f3..4a98215ec4 100644 --- a/@navikt/core/react/src/popover/popover.stories.tsx +++ b/@navikt/core/react/src/popover/popover.stories.tsx @@ -92,6 +92,7 @@ export const Placement = () => { ); }; +/* TODO: All stories with Arrow can be removed after darkside update */ export const Arrow = () => { return (
From 77330a6fbd644011fc3745d1b3c22cc81b53f1a5 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Nov 2024 13:20:03 +0100 Subject: [PATCH 3/7] :tada: Progressbar darkmode support --- .../css/darkside/progress-bar.darkside.css | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/@navikt/core/css/darkside/progress-bar.darkside.css b/@navikt/core/css/darkside/progress-bar.darkside.css index 3ff4c1ca6f..c0eaba7efe 100644 --- a/@navikt/core/css/darkside/progress-bar.darkside.css +++ b/@navikt/core/css/darkside/progress-bar.darkside.css @@ -1,33 +1,32 @@ .navds-progress-bar { - background: var(--a-surface-neutral-subtle); + background: var(--ax-bg-neutral-moderateA); position: relative; - border-radius: var(--a-border-radius-full); + border-radius: var(--ax-border-radius-full); overflow: hidden; - box-shadow: - inset 0 1px 3px 0 rgba(0 0 0 / 0.15), - inset 0 0 1px 0 rgba(0 0 0 / 0.2); + box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA); } .navds-progress-bar--small { - height: 12px; - min-width: 12px; + height: 0.75rem; + min-width: 0.75rem; } .navds-progress-bar--medium { - height: 16px; - min-width: 16px; + height: 1rem; + min-width: 1rem; } .navds-progress-bar--large { - height: 24px; - min-width: 24px; + height: 1.5rem; + min-width: 1.5rem; } .navds-progress-bar__foreground { + /* TODO: rename --__ac- in ProgressBar.tsx after darkside update */ --__ac-progress-bar-translate: initial; transform: translateX(var(--__ac-progress-bar-translate)); - background: var(--ac-progress-bar-fg, var(--a-surface-alt-3)); + background: var(--ax-bg-info-strong); transform-origin: left; position: absolute; top: 0; @@ -104,5 +103,6 @@ .navds-progress-bar { outline: 1px solid transparent; + outline-offset: -1px; } } From b457c9d58038c3635e8a0f5e12fbd2ef7b045b93 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 14 Nov 2024 13:20:27 +0100 Subject: [PATCH 4/7] Revert ":tada: Progressbar darkmode support" This reverts commit 77330a6fbd644011fc3745d1b3c22cc81b53f1a5. --- .../css/darkside/progress-bar.darkside.css | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/@navikt/core/css/darkside/progress-bar.darkside.css b/@navikt/core/css/darkside/progress-bar.darkside.css index c0eaba7efe..3ff4c1ca6f 100644 --- a/@navikt/core/css/darkside/progress-bar.darkside.css +++ b/@navikt/core/css/darkside/progress-bar.darkside.css @@ -1,32 +1,33 @@ .navds-progress-bar { - background: var(--ax-bg-neutral-moderateA); + background: var(--a-surface-neutral-subtle); position: relative; - border-radius: var(--ax-border-radius-full); + border-radius: var(--a-border-radius-full); overflow: hidden; - box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA); + box-shadow: + inset 0 1px 3px 0 rgba(0 0 0 / 0.15), + inset 0 0 1px 0 rgba(0 0 0 / 0.2); } .navds-progress-bar--small { - height: 0.75rem; - min-width: 0.75rem; + height: 12px; + min-width: 12px; } .navds-progress-bar--medium { - height: 1rem; - min-width: 1rem; + height: 16px; + min-width: 16px; } .navds-progress-bar--large { - height: 1.5rem; - min-width: 1.5rem; + height: 24px; + min-width: 24px; } .navds-progress-bar__foreground { - /* TODO: rename --__ac- in ProgressBar.tsx after darkside update */ --__ac-progress-bar-translate: initial; transform: translateX(var(--__ac-progress-bar-translate)); - background: var(--ax-bg-info-strong); + background: var(--ac-progress-bar-fg, var(--a-surface-alt-3)); transform-origin: left; position: absolute; top: 0; @@ -103,6 +104,5 @@ .navds-progress-bar { outline: 1px solid transparent; - outline-offset: -1px; } } From a31eec018df5d999a493461fc9949c13572eaf6b Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Nov 2024 15:13:14 +0100 Subject: [PATCH 5/7] :fire: Remove focus-outline on Popover --- @navikt/core/css/darkside/popover.darkside.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/@navikt/core/css/darkside/popover.darkside.css b/@navikt/core/css/darkside/popover.darkside.css index cd2d462ce4..de6682320c 100644 --- a/@navikt/core/css/darkside/popover.darkside.css +++ b/@navikt/core/css/darkside/popover.darkside.css @@ -10,11 +10,6 @@ /* Creates a small gutter between screen-edges on smaller devices */ max-width: calc(100vw - var(--ax-spacing-6)); - - &:focus-visible { - outline: 2px solid var(--ax-border-focus); - outline-offset: 2px; - } } .navds-popover__content { From 270bc7099ba2a7e99b12020feefdccbf214ded7d Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Tue, 19 Nov 2024 15:20:01 +0100 Subject: [PATCH 6/7] Update @navikt/core/react/src/popover/Popover.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/popover/Popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx index 9319dbdb32..4cefe69548 100644 --- a/@navikt/core/react/src/popover/Popover.tsx +++ b/@navikt/core/react/src/popover/Popover.tsx @@ -190,7 +190,7 @@ export const Popover = forwardRef( aria-hidden={!open || !anchorEl} > {children} - {/* Hide arrow in new design, prop will be remove din breaking change update */} + {/* Hide arrow in new design, prop will be removed in breaking change update */} {arrow && !themeContext && (
{ From 054ebf55311d21f02a64058e77d947e224362ef1 Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Tue, 19 Nov 2024 15:20:26 +0100 Subject: [PATCH 7/7] Update @navikt/core/react/src/popover/Popover.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/popover/Popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx index 4cefe69548..8a330127c3 100644 --- a/@navikt/core/react/src/popover/Popover.tsx +++ b/@navikt/core/react/src/popover/Popover.tsx @@ -138,7 +138,7 @@ export const Popover = forwardRef( placement, open, middleware: [ - flOffset(offset ?? themeContext ? 8 : arrow ? 16 : 4), + flOffset(offset ?? (themeContext ? 8 : arrow ? 16 : 4)), chosenFlip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }), shift({ padding: 12 }),