studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) enhance Switch component styles

Browse Source 
update Switch token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:14:39 +02:00
committed by NathanVss
parent 2123aedb72
commit d04b52eaf5
5 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/react/src/components/Forms/Switch/_index.scss
View File

@@ -1,5 +1,4 @@
.c__switch { .c__switch {
input { input {
opacity: 0; opacity: 0;
width: 0; width: 0;
@@ -32,7 +31,8 @@
width: 2.8125rem; width: 2.8125rem;
height: 1.5rem; height: 1.5rem;
background-color: var(--c--components--forms-switch--rail-background-color); background-color: var(--c--components--forms-switch--rail-background-color);
transition: var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition: var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
border-radius: var(--c--components--forms-switch--rail-border-radius); border-radius: var(--c--components--forms-switch--rail-border-radius);
&:before { &:before {
@@ -42,8 +42,11 @@
width: 1.125rem; width: 1.125rem;
left: 4px; left: 4px;
top: 3px; top: 3px;
background-color: var(--c--components--forms-switch--handle-background-color); background-color: var(
transition: var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); --c--components--forms-switch--handle-background-color
);
transition: var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
border-radius: var(--c--components--forms-switch--handle-border-radius); border-radius: var(--c--components--forms-switch--handle-border-radius);
} }
} }
@@ -53,21 +56,30 @@
} }
&.c__checkbox--disabled { &.c__checkbox--disabled {
input:not(:checked) + .c__switch__rail { input:not(:checked) + .c__switch__rail {
background-color: var(--c--components--forms-switch--rail-background-color--disabled); background-color: var(
--c--components--forms-switch--rail-background-color--disabled
);
}
input:checked + .c__switch__rail {
background-color: var(
--c--components--forms-switch--rail-background-color--disabled
);
} }
.c__switch__rail { .c__switch__rail {
cursor: default; cursor: default;
&:before { &:before {
background-color: var(--c--components--forms-switch--handle-background-color--disabled); background-color: var(
--c--components--forms-switch--handle-background-color--disabled
);
} }
} }
} }
&--right { &--right {
.c__checkbox__container { .c__checkbox__container {
flex-direction: row-reverse; flex-direction: row-reverse;
} }

1
packages/react/src/components/Forms/Switch/index.spec.tsx
View File

@@ -151,6 +151,7 @@ describe("<Switch/>", () => {
textItems: ["my text item 1", "my text item 2"], textItems: ["my text item 1", "my text item 2"],
rightText: "my right text", rightText: "my right text",
labelSide: "right", labelSide: "right",
disabled: false,
}; };
render(<Switch {...propsInput} />); render(<Switch {...propsInput} />);

14
packages/react/src/components/Forms/Switch/index.stories.tsx
View File

@@ -119,9 +119,7 @@ export const Controlled = {
const [checked, setChecked] = React.useState(false); const [checked, setChecked] = React.useState(false);
return ( return (
<div> <div>
<div className="clr-greyscale-900"> <div className="clr-gray-900">Value: {JSON.stringify(checked)}</div>
Value: {JSON.stringify(checked)}
</div>
<Switch <Switch
checked={checked} checked={checked}
onChange={(e) => setChecked(e.target.checked)} onChange={(e) => setChecked(e.target.checked)}
@@ -188,12 +186,22 @@ export const FormExampleRight = {
<Switch label="Bluetooth" fullWidth={true} labelSide="right" /> <Switch label="Bluetooth" fullWidth={true} labelSide="right" />
<Switch <Switch
label="VPN" label="VPN"
defaultChecked={true}
fullWidth={true} fullWidth={true}
labelSide="right" labelSide="right"
text="You must pay for this feature" text="You must pay for this feature"
state="error" state="error"
disabled={true} disabled={true}
/> />
<Switch
label="VPN"
defaultChecked={true}
fullWidth={true}
labelSide="right"
text="You must paDDy for this feature"
state="error"
disabled={true}
/>
</div> </div>
</form> </form>
); );

2
packages/react/src/components/Forms/Switch/index.tsx
View File

@@ -41,7 +41,7 @@ export const Switch = ({
{ {
"c__checkbox--disabled": props.disabled, "c__checkbox--disabled": props.disabled,
"c__switch--full-width": props.fullWidth, "c__switch--full-width": props.fullWidth,
}, }
)} )}
> >
<Field compact={true} {...fieldProps}> <Field compact={true} {...fieldProps}>

12
packages/react/src/components/Forms/Switch/tokens.ts
View File

@@ -1,11 +1,13 @@
import { DefaultTokens } from "@openfun/cunningham-tokens"; import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"accent-color": defaults.theme.colors["success-700"], "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
"rail-background-color": defaults.theme.colors["greyscale-500"], "rail-background-color": defaults.contextuals.content.semantic.neutral.tertiary,
"rail-background-color--disabled": defaults.theme.colors["greyscale-400"], "rail-background-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
"rail-border-radius": "50vw", "rail-border-radius": "50vw",
"handle-background-color": "white", "handle-background-color": defaults.contextuals.content.semantic.contextual.primary,
"handle-background-color--disabled": defaults.theme.colors["greyscale-200"], "handle-background-color--disabled":
defaults.contextuals.content.semantic.disabled.secondary,
"handle-border-radius": "50%", "handle-border-radius": "50%",
}); });