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.

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

feat(Textfield): ✨ New Textfield component #816

Merged
merged 17 commits into from
Sep 21, 2023
Prev Previous commit
Next Next commit
Tweaks after feedback
mimarz committed Sep 21, 2023
commit 300f6bb55985236e0d50889c75eb864f3e7609c9
4 changes: 2 additions & 2 deletions packages/react/src/components/form/CharacterCounter.tsx
Original file line number Diff line number Diff line change
@@ -24,10 +24,10 @@ type CharacterCounterProps = {
};

const defaultLabel: CharacterCounterProps['label'] = (count) =>
count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye.`;
count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;

const defaultSrLabel = (maxCount: number) =>
`Tekstfelt med plass til ${maxCount} tegn.`;
`Tekstfelt med plass til ${maxCount} tegn`;

export const CharacterCounter = ({
label = defaultLabel,
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.textfield {
display: grid;
gap: var(--fds-spacing-2);
gap: var(--fds-spacing-1);
}

.adornment {
@@ -105,3 +105,7 @@
height: 1.2rem;
width: 1.2rem;
}

.errorMessage:empty {
display: none;
}
Original file line number Diff line number Diff line change
@@ -40,12 +40,21 @@ export const Controlled: StoryFn<typeof Textfield> = () => {
return (
<>
<Paragraph>Du har skrevet inn: {value}</Paragraph>
<Textfield
label='Kontroller meg!'
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<Button onClick={() => setValue('Kake 🎂')}>Jeg vil ha Kake 🎂</Button>
<div
style={{
display: 'flex',
alignItems: 'end',
marginTop: 'var(--fds-spacing-2)',
gap: 'var(--fds-spacing-2)',
}}
>
<Textfield
label='Kontroller meg!'
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<Button onClick={() => setValue('Kake 🎂')}>Jeg vil ha Kake 🎂</Button>
</div>
</>
);
};
Original file line number Diff line number Diff line change
@@ -110,7 +110,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
)}
htmlFor={inputProps.id}
size={size}
weight='regular'
weight='medium'
>
{readOnly && (
<PadlockLockedFillIcon
@@ -183,6 +183,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
/>
)}
<div
className={classes.errorMessage}
id={errorId}
aria-live='polite'
aria-relevant='additions removals'