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

🎨(react) enhance field component styles

Browse Source 
update field 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:12:54 +02:00
committed by NathanVss
parent 8f71cdb7f9
commit fe0c2b367f
3 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/react/src/components/Forms/Field/_index.scss
View File

@@ -6,6 +6,10 @@
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
&--disabled {
color: var(--c--components--forms-field--color--disabled);
}
&__footer { &__footer {
font-size: var(--c--components--forms-field--font-size); font-size: var(--c--components--forms-field--font-size);
padding: 0.25rem calc(1rem + 2px) 0 calc(1rem + 2px); padding: 0.25rem calc(1rem + 2px) 0 calc(1rem + 2px);
@@ -16,7 +20,7 @@
} }
ul { ul {
margin: 0.20rem 0 0 0; margin: 0.2rem 0 0 0;
padding: 0 0 0 1rem; padding: 0 0 0 1rem;
line-height: 1rem; line-height: 1rem;
} }
@@ -31,18 +35,19 @@
} }
&--error { &--error {
color: var(--c--theme--colors--danger-500); color: var(--c--components--forms-field--color--error);
label, .labelled-box label { label,
color: var(--c--theme--colors--danger-500); .labelled-box label {
color: var(--c--components--forms-field--color--error);
} }
} }
&--success { &--success {
color: var(--c--theme--colors--success-600); color: var(--c--components--forms-field--color--success);
.c__field__text { .c__field__text {
color: var(--c--theme--colors--success-600); color: var(--c--components--forms-field--color--success);
} }
} }

3
packages/react/src/components/Forms/Field/index.tsx
View File

@@ -11,6 +11,7 @@ export type FieldProps = {
fullWidth?: boolean | undefined; fullWidth?: boolean | undefined;
compact?: boolean | undefined; compact?: boolean | undefined;
className?: string | undefined; className?: string | undefined;
disabled?: boolean | undefined;
}; };
type Props = FieldProps & PropsWithChildren; type Props = FieldProps & PropsWithChildren;
@@ -24,12 +25,14 @@ export const Field = ({
fullWidth, fullWidth,
compact, compact,
className, className,
disabled,
}: Props) => { }: Props) => {
return ( return (
<div <div
className={classNames("c__field", "c__field--" + state, className, { className={classNames("c__field", "c__field--" + state, className, {
"c__field--full-width": fullWidth, "c__field--full-width": fullWidth,
"c__field--compact": compact && !fullWidth, "c__field--compact": compact && !fullWidth,
"c__field--disabled": disabled,
})} })}
> >
{children} {children}

7
packages/react/src/components/Forms/Field/tokens.ts
View File

@@ -2,6 +2,9 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
width: "292px", width: "292px",
"font-size": defaults.theme.font.sizes.s, "font-size": defaults.globals.font.sizes.s,
color: defaults.theme.colors["greyscale-600"], color: defaults.contextuals.content.semantic.neutral.secondary,
"color--error": defaults.contextuals.content.semantic.error.secondary,
"color--success": defaults.contextuals.content.semantic.success.secondary,
"color--disabled": defaults.contextuals.content.semantic.disabled.primary,
}); });