diff --git a/.changeset/good-pots-kick.md b/.changeset/good-pots-kick.md new file mode 100644 index 0000000000..8499ec8e5b --- /dev/null +++ b/.changeset/good-pots-kick.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/ds-css": patch +--- + +:lipstick: Chips.Toggle: Ikon i uvalgt tilstand diff --git a/@navikt/core/css/chips.css b/@navikt/core/css/chips.css index 51b98098e7..21c2312656 100644 --- a/@navikt/core/css/chips.css +++ b/@navikt/core/css/chips.css @@ -20,7 +20,7 @@ cursor: pointer; align-items: center; justify-content: center; - gap: var(--a-spacing-1); + gap: var(--a-spacing-05); margin: 0; padding: 0 var(--a-spacing-3); text-decoration: none; @@ -97,6 +97,19 @@ } } +.navds-chips--medium .navds-chips__toggle--with-checkmark { + padding-left: var(--a-spacing-1-alt); +} + +.navds-chips--small .navds-chips__toggle--with-checkmark { + padding-left: var(--a-spacing-1); +} + +.navds-chips--small .navds-chips__toggle-icon { + width: 1rem; + height: 1rem; +} + .navds-chips__removable { gap: 0; } diff --git a/@navikt/core/react/src/chips/Toggle.tsx b/@navikt/core/react/src/chips/Toggle.tsx index 405c5e9050..62f35e056b 100644 --- a/@navikt/core/react/src/chips/Toggle.tsx +++ b/@navikt/core/react/src/chips/Toggle.tsx @@ -6,7 +6,7 @@ export interface ToggleChipsProps extends React.ButtonHTMLAttributes { children: string; /** - * Toggles aria-pressed and visual-changes + * Toggles aria-pressed and visual changes */ selected?: boolean; /** @@ -44,28 +44,38 @@ export const ToggleChips: OverridableComponent< className={cl( "navds-chips__chip navds-chips__toggle", className, - `navds-chips__toggle--${variant}` + `navds-chips__toggle--${variant}`, + { "navds-chips__toggle--with-checkmark": checkmark } )} aria-pressed={selected} > - {selected && checkmark && ( + {checkmark && ( - + {selected ? ( + + ) : ( + + )} )} {children} diff --git a/@navikt/core/react/src/chips/chips.stories.tsx b/@navikt/core/react/src/chips/chips.stories.tsx index 4ce53cffbd..d8855693c6 100644 --- a/@navikt/core/react/src/chips/chips.stories.tsx +++ b/@navikt/core/react/src/chips/chips.stories.tsx @@ -60,11 +60,11 @@ Default.argTypes = { }, }; -export const Toggle = () => { +export const Toggle = ({ size }) => { const [selected, setSelected] = useState([2, 4]); return (
- + {options.map((c, y) => ( { ))} - + {options.map((c, y) => ( {
); }; +Toggle.argTypes = { + size: { + control: { type: "radio" }, + options: ["medium", "small"], + }, +}; export const ToggleNoCheckmark = () => { const [selected, setSelected] = useState(2);