From 3c7d0f1db3f1687f8affff551fe0a20ec31e74ea Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 16 Oct 2023 11:44:57 +0200 Subject: [PATCH 1/4] :art: Mindre Helptext variant --- .changeset/wild-rice-arrive.md | 6 ++++ @navikt/core/css/help-text.css | 5 +++ @navikt/core/react/src/help-text/HelpText.tsx | 12 ++++++- .../react/src/help-text/help-text.stories.tsx | 25 +++++++++++++- yarn.lock | 34 +++++++++---------- 5 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 .changeset/wild-rice-arrive.md diff --git a/.changeset/wild-rice-arrive.md b/.changeset/wild-rice-arrive.md new file mode 100644 index 0000000000..2317671e60 --- /dev/null +++ b/.changeset/wild-rice-arrive.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/ds-css": patch +--- + +HelpText: Lagt til variant `small` for visuelt mindre button. Klikkflate er fortsatt 1.5rem. diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css index e31a01a408..743c716eee 100644 --- a/@navikt/core/css/help-text.css +++ b/@navikt/core/css/help-text.css @@ -12,6 +12,11 @@ font-size: 1.5rem; } +.navds-help-text__button--small { + font-size: 1.25rem; + padding: calc(var(--a-spacing-1) / 2); +} + .navds-help-text__button:focus-visible { box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); } diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx index 75d1dda0cc..fe1e84dcb5 100644 --- a/@navikt/core/react/src/help-text/HelpText.tsx +++ b/@navikt/core/react/src/help-text/HelpText.tsx @@ -13,6 +13,10 @@ export interface HelpTextProps * @default "hjelp" */ title?: string; + /** + * Changes visual size of button/icon. Clickable area is kept at 1.5rem + */ + size?: "medium" | "small"; /** * Default dialog-placement on open * @default "top" @@ -59,6 +63,7 @@ export const HelpText = forwardRef( title = "hjelp", onClick, wrapperClassName, + size = "medium", ...rest }, ref @@ -76,7 +81,11 @@ export const HelpText = forwardRef( setOpen((x) => !x); onClick?.(e); }} - className={cl(className, "navds-help-text__button")} + className={cl( + className, + "navds-help-text__button", + `navds-help-text__button--${size}` + )} type="button" aria-expanded={open} > @@ -90,6 +99,7 @@ export const HelpText = forwardRef( anchorEl={buttonRef.current} placement={placement} strategy={strategy} + offset={size === "small" ? 12 : undefined} > {children} diff --git a/@navikt/core/react/src/help-text/help-text.stories.tsx b/@navikt/core/react/src/help-text/help-text.stories.tsx index 6b49f9c3f6..d90fd339dd 100644 --- a/@navikt/core/react/src/help-text/help-text.stories.tsx +++ b/@navikt/core/react/src/help-text/help-text.stories.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from "react"; -import { BodyLong, Heading, HelpText } from ".."; +import { BodyLong, HStack, Heading, HelpText, VStack } from ".."; export default { title: "ds-react/HelpText", @@ -33,6 +33,12 @@ export default { options: ["fixed", "absolute"], }, }, + size: { + control: { + type: "radio", + options: ["medium", "small"], + }, + }, }, }; @@ -98,3 +104,20 @@ export const WrapperClassName = { ); }, }; + +export const Sizes = { + render: () => { + return ( + + + Lorem ipsum + Lorem ipsum dolor sit amet + + + Lorem ipsum + Lorem ipsum dolor sit amet + + + ); + }, +}; diff --git a/yarn.lock b/yarn.lock index cfd37ec565..8b3ffea2de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3453,7 +3453,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^5.7.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^5.7.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3480,8 +3480,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^5.7.0 - "@navikt/ds-tokens": ^5.7.0 + "@navikt/ds-css": ^5.7.1 + "@navikt/ds-tokens": ^5.7.1 "@types/jest": ^29.0.0 concurrently: 7.2.1 copyfiles: 2.4.1 @@ -3499,7 +3499,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 5.7.0 + "@navikt/ds-css": 5.7.1 "@types/inquirer": ^9.0.3 "@types/jest": ^29.0.0 axios: 1.3.6 @@ -3523,11 +3523,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@5.7.0, @navikt/ds-css@^5.7.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@5.7.1, @navikt/ds-css@^5.7.1, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^5.7.0 + "@navikt/ds-tokens": ^5.7.1 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3540,13 +3540,13 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@^5.7.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@^5.7.1, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.25.4 - "@navikt/aksel-icons": ^5.7.0 - "@navikt/ds-tokens": ^5.7.0 + "@navikt/aksel-icons": ^5.7.1 + "@navikt/ds-tokens": ^5.7.1 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3580,11 +3580,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^5.7.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^5.7.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^5.7.0 + "@navikt/ds-tokens": ^5.7.1 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -3595,7 +3595,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^5.7.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^5.7.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8490,11 +8490,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^5.7.0 - "@navikt/ds-css": ^5.7.0 - "@navikt/ds-react": ^5.7.0 - "@navikt/ds-tailwind": ^5.7.0 - "@navikt/ds-tokens": ^5.7.0 + "@navikt/aksel-icons": ^5.7.1 + "@navikt/ds-css": ^5.7.1 + "@navikt/ds-react": ^5.7.1 + "@navikt/ds-tailwind": ^5.7.1 + "@navikt/ds-tokens": ^5.7.1 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft From eb801364725de72ef97e353b07f0171da58a001f Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 16 Oct 2023 14:57:50 +0200 Subject: [PATCH 2/4] =?UTF-8?q?:art:=20small-variant=20er=20n=C3=A5=20defa?= =?UTF-8?q?ult=20helptext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- @navikt/core/css/help-text.css | 10 +++----- @navikt/core/react/src/help-text/HelpText.tsx | 13 ++-------- .../core/react/src/help-text/HelpTextIcon.tsx | 2 +- .../react/src/help-text/help-text.stories.tsx | 25 +------------------ 4 files changed, 7 insertions(+), 43 deletions(-) diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css index 743c716eee..4ed9d3c826 100644 --- a/@navikt/core/css/help-text.css +++ b/@navikt/core/css/help-text.css @@ -1,6 +1,5 @@ .navds-help-text__button { margin: 0; - padding: 0; border: 0; cursor: pointer; background-color: transparent; @@ -9,22 +8,19 @@ justify-content: center; align-items: center; color: var(--ac-help-text-button-color, var(--a-surface-action)); - font-size: 1.5rem; -} - -.navds-help-text__button--small { font-size: 1.25rem; padding: calc(var(--a-spacing-1) / 2); } .navds-help-text__button:focus-visible { - box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); + outline: none; + box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus); } @supports not selector(:focus-visible) { .navds-help-text__button:focus { outline: none; - box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus); + box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus); } } diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx index fe1e84dcb5..4e312d441c 100644 --- a/@navikt/core/react/src/help-text/HelpText.tsx +++ b/@navikt/core/react/src/help-text/HelpText.tsx @@ -13,10 +13,6 @@ export interface HelpTextProps * @default "hjelp" */ title?: string; - /** - * Changes visual size of button/icon. Clickable area is kept at 1.5rem - */ - size?: "medium" | "small"; /** * Default dialog-placement on open * @default "top" @@ -63,7 +59,6 @@ export const HelpText = forwardRef( title = "hjelp", onClick, wrapperClassName, - size = "medium", ...rest }, ref @@ -81,11 +76,7 @@ export const HelpText = forwardRef( setOpen((x) => !x); onClick?.(e); }} - className={cl( - className, - "navds-help-text__button", - `navds-help-text__button--${size}` - )} + className={cl(className, "navds-help-text__button")} type="button" aria-expanded={open} > @@ -99,7 +90,7 @@ export const HelpText = forwardRef( anchorEl={buttonRef.current} placement={placement} strategy={strategy} - offset={size === "small" ? 12 : undefined} + offset={12} > {children} diff --git a/@navikt/core/react/src/help-text/HelpTextIcon.tsx b/@navikt/core/react/src/help-text/HelpTextIcon.tsx index f9770a614b..b35184218c 100644 --- a/@navikt/core/react/src/help-text/HelpTextIcon.tsx +++ b/@navikt/core/react/src/help-text/HelpTextIcon.tsx @@ -30,7 +30,7 @@ export const HelpTextIcon = ({ cx="12" cy="12" r="11" - strokeWidth="2" + strokeWidth="1.25" stroke="currentColor" fill={filled ? "currentColor" : "transparent"} /> diff --git a/@navikt/core/react/src/help-text/help-text.stories.tsx b/@navikt/core/react/src/help-text/help-text.stories.tsx index d90fd339dd..6b49f9c3f6 100644 --- a/@navikt/core/react/src/help-text/help-text.stories.tsx +++ b/@navikt/core/react/src/help-text/help-text.stories.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from "react"; -import { BodyLong, HStack, Heading, HelpText, VStack } from ".."; +import { BodyLong, Heading, HelpText } from ".."; export default { title: "ds-react/HelpText", @@ -33,12 +33,6 @@ export default { options: ["fixed", "absolute"], }, }, - size: { - control: { - type: "radio", - options: ["medium", "small"], - }, - }, }, }; @@ -104,20 +98,3 @@ export const WrapperClassName = { ); }, }; - -export const Sizes = { - render: () => { - return ( - - - Lorem ipsum - Lorem ipsum dolor sit amet - - - Lorem ipsum - Lorem ipsum dolor sit amet - - - ); - }, -}; From 754f19e0be6d001704d75ec9c0352f3057c210b0 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 16 Oct 2023 16:18:37 +0200 Subject: [PATCH 3/4] :lipstick: Larger helptext circle stroke-width --- @navikt/core/react/src/help-text/HelpTextIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/help-text/HelpTextIcon.tsx b/@navikt/core/react/src/help-text/HelpTextIcon.tsx index b35184218c..75e8035802 100644 --- a/@navikt/core/react/src/help-text/HelpTextIcon.tsx +++ b/@navikt/core/react/src/help-text/HelpTextIcon.tsx @@ -30,7 +30,7 @@ export const HelpTextIcon = ({ cx="12" cy="12" r="11" - strokeWidth="1.25" + strokeWidth="1.5" stroke="currentColor" fill={filled ? "currentColor" : "transparent"} /> From d425040f6932b60da53c941e62e92205b69d45cd Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Tue, 17 Oct 2023 15:39:45 +0200 Subject: [PATCH 4/4] Update .changeset/wild-rice-arrive.md --- .changeset/wild-rice-arrive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/wild-rice-arrive.md b/.changeset/wild-rice-arrive.md index 2317671e60..6ffa5481ac 100644 --- a/.changeset/wild-rice-arrive.md +++ b/.changeset/wild-rice-arrive.md @@ -3,4 +3,4 @@ "@navikt/ds-css": patch --- -HelpText: Lagt til variant `small` for visuelt mindre button. Klikkflate er fortsatt 1.5rem. +HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px