Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radio feedback #2187

Closed
wants to merge 10 commits into from
Closed

Radio feedback #2187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6e1d079
add different bgs-story example to radio
larseirikhansen Aug 17, 2023
2381d47
add more bgs-stories to radio
larseirikhansen Aug 17, 2023
23943f2
radio border get darker with background
larseirikhansen Aug 17, 2023
44dc902
yarn changeset
larseirikhansen Aug 17, 2023
551fc82
Merge remote-tracking branch 'origin/main' into radio-feedback
larseirikhansen Aug 22, 2023
23d1d53
stories
larseirikhansen Aug 22, 2023
612655c
remove background image checkbox
larseirikhansen Aug 22, 2023
44b2d1e
story checkbox indereminate background
larseirikhansen Aug 22, 2023
dd58dca
added disabled story radio checkbox
larseirikhansen Aug 22, 2023
c49a86d
testing out borders instead of box-shadow for base, then shadow for p…
larseirikhansen Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/curvy-lions-raise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@navikt/ds-css": patch
---

:bug: radio border blir mørkere hvis bakgrunnen blir det
63 changes: 35 additions & 28 deletions @navikt/core/css/form/radio-checkbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,12 @@
.navds-radio__label::before {
content: "";
background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
width: 1.5rem;
height: 1.5rem;
height: 1.25rem;
width: 1.25rem;
margin: 2px;
border-radius: var(--a-border-radius-medium);
flex-shrink: 0;
border: 2px solid var(--ac-radio-checkbox-border, var(--a-border-default));
}

.navds-radio__label::before {
Expand Down Expand Up @@ -70,25 +71,25 @@

.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
.navds-radio__input:focus-visible + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
.navds-checkbox__input:focus + .navds-checkbox__label::before,
.navds-radio__input:focus + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--a-border-focus);
}
}

.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
.navds-radio__input:hover:focus + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--a-border-focus);
}
}

Expand Down Expand Up @@ -146,31 +147,31 @@

.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
/* box-shadow: 0 0 0 1px white, 0px 0px 0 3px var(--a-border-focus, blue); */
}

@supports not selector(:focus-visible) {
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 1px red, 1px 1px 0 2px var(--a-border-focus, blue);
}
}

.navds-radio__input:checked + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
}

.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
}

@supports not selector(:focus-visible) {
.navds-radio__input:checked:focus + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
}
}

Expand All @@ -182,13 +183,15 @@
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+ .navds-checkbox__label::before,
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
}

/* :hover without focus-visible or any other pseudo-class
*/
@supports not selector(:focus-visible) {
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
}
}

Expand All @@ -201,22 +204,26 @@
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}

/* box shadow til alle pseudo-klasser av .navds-checkbox__input

*/

.navds-checkbox--error
> .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
}

@supports not selector(:focus-visible) {
.navds-checkbox--error
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
}
}

Expand All @@ -225,15 +232,15 @@
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}

.navds-checkbox--error
> .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
}

@supports not selector(:focus-visible) {
Expand All @@ -242,15 +249,15 @@
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}

.navds-checkbox--error
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
}
}

Expand Down Expand Up @@ -292,7 +299,7 @@
> .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+ .navds-radio__label::before {
background-color: var(--__ac-radio-checkbox-readonly-bg);
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
}

.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
Expand All @@ -301,7 +308,7 @@
}

.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
background-color: var(--__ac-radio-checkbox-readonly-bg);
}

Expand All @@ -310,12 +317,12 @@
}

.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
background-color: var(--a-icon-subtle);
}

.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
background-color: var(--__ac-radio-checkbox-readonly-bg);
}

Expand Down
91 changes: 91 additions & 0 deletions @navikt/core/react/src/form/checkbox/checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,3 +224,94 @@ export const Readonly = () => (
</Checkbox>
</div>
);

export const DifferentBackgroundDemo = () => {
const [checked, setChecked] = useState([true, false, false]);

const toggleChecked = (index) => {
setChecked((checked) =>
checked.map((value, i) => (i === index ? !value : value))
);
};
return (
<div className="colgap">
<CheckboxGroup
legend="Hvem vant Rumpeldunkserien i første året til Harry Potter?"
defaultValue={["3"]}
>
<Checkbox value="1">Griffing</Checkbox>
<Checkbox value="2">Smygard</Checkbox>
<Checkbox value="3">Håsblås</Checkbox>
<Checkbox value="4">Ravnklo</Checkbox>
</CheckboxGroup>
<CheckboxGroup
legend="Hvilke frukter vil du ha?"
defaultValue={["eple"]}
className="bg-blue-100"
style={{ backgroundColor: "grey" }}
>
<Checkbox value="eple">Eple</Checkbox>
<Checkbox value="druer">Druer</Checkbox>
</CheckboxGroup>
<CheckboxGroup
legend="Når har du ferie?"
defaultValue={["1"]}
style={{ backgroundColor: "lightblue" }}
>
<Checkbox value="1">August</Checkbox>
<Checkbox value="2">Juli</Checkbox>
</CheckboxGroup>
<CheckboxGroup
legend="Alt er feil"
error="Du gjør alt feil"
style={{ backgroundColor: "lightblue" }}
>
<Checkbox value="1">Feil</Checkbox>
<Checkbox value="2">Feil</Checkbox>
</CheckboxGroup>
<CheckboxGroup
legend="Du får ikke endre denne"
readOnly
defaultValue={["1"]}
style={{ backgroundColor: "lightgray" }}
>
<Checkbox value="1">Ikke</Checkbox>
<Checkbox value="2">Prøv</Checkbox>
</CheckboxGroup>
<CheckboxGroup
legend="Denne er disabled"
disabled
defaultValue={["1"]}
style={{ backgroundColor: "grey" }}
>
<Checkbox value="1">Klarer du</Checkbox>
<Checkbox value="2">Å lese dette?</Checkbox>
</CheckboxGroup>
<CheckboxGroup
legend="Hvilke filtre vil du bruke?"
style={{ backgroundColor: "darkgrey" }}
>
<Checkbox
checked={checked[0] && checked[1] && checked[2]}
indeterminate={new Set(checked).size === 2} // if both false and true are present
onChange={(e) =>
setChecked([e.target.checked, e.target.checked, e.target.checked])
}
>
Alle
</Checkbox>
<div style={{ paddingLeft: "2rem" }}>
<Checkbox checked={checked[0]} onChange={() => toggleChecked(0)}>
Filter 1
</Checkbox>
<Checkbox checked={checked[1]} onChange={() => toggleChecked(1)}>
Filter 2
</Checkbox>
<Checkbox checked={checked[2]} onChange={() => toggleChecked(2)}>
Filter 3
</Checkbox>
</div>
</CheckboxGroup>
</div>
);
};
57 changes: 57 additions & 0 deletions @navikt/core/react/src/form/radio/radio.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,3 +119,60 @@ export const UUDemo = () => (
</RadioGroup>
</div>
);

export const DifferentBackgroundDemo = () => (
<div className="colgap">
<RadioGroup
legend="Hvem vant Rumpeldunkserien i første året til Harry Potter?"
defaultValue="3"
>
<Radio value="1">Griffing</Radio>
<Radio value="2">Smygard</Radio>
<Radio value="3">Håsblås</Radio>
<Radio value="4">Ravnklo</Radio>
</RadioGroup>
<RadioGroup
legend="Hvilken frukt vil du ha?"
defaultValue="eple"
className="bg-blue-100"
style={{ backgroundColor: "grey" }}
>
<Radio value="eple">Eple</Radio>
<Radio value="druer">Druer</Radio>
</RadioGroup>
<RadioGroup
legend="Når har du ferie?"
defaultValue="1"
style={{ backgroundColor: "lightblue" }}
>
<Radio value="1">August</Radio>
<Radio value="2">Juli</Radio>
</RadioGroup>
<RadioGroup
legend="Alt er feil"
error="Du gjør alt feil"
style={{ backgroundColor: "lightblue" }}
>
<Radio value="1">Feil</Radio>
<Radio value="2">Feil</Radio>
</RadioGroup>
<RadioGroup
legend="Du får ikke endre denne"
readOnly
defaultValue="1"
style={{ backgroundColor: "lightgray" }}
>
<Radio value="1">Ikke</Radio>
<Radio value="2">Prøv</Radio>
</RadioGroup>
<RadioGroup
legend="Denne er disabled"
disabled
defaultValue="1"
style={{ backgroundColor: "lightgray" }}
>
<Radio value="1">Klarer du</Radio>
<Radio value="2">Å lese dette?</Radio>
</RadioGroup>
</div>
);
Loading