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

Controls: Add max length config to text control #14396

Merged
merged 5 commits into from
Jun 30, 2022
Merged

Controls: Add max length config to text control #14396

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
40ed57b
add maxLength support to text control
stevensacks Mar 30, 2021
e5cac9f
Merge branch 'next' into feat/text-control-max-length
stevensacks Aug 3, 2021
6f0327d
Merge branch 'next' into pr/14396
shilman Jan 18, 2022
8b8fa09
Merge branch 'next' into pr/14396
shilman Mar 28, 2022
fd265db
Merge branch 'next' into feat/text-control-max-length
ndelangen Jun 30, 2022
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
8 changes: 5 additions & 3 deletions examples/official-storybook/stories/addon-controls.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default {
component: Button,
argTypes: {
children: { control: 'text', name: 'Children', mapping: { basic: 'BASIC' } },
type: { control: 'text', name: 'Type' },
type: { name: 'Type', control: { type: 'text', maxLength: 32 } },
json: { control: 'object', name: 'JSON' },
imageUrls: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
label: {
Expand Down Expand Up @@ -68,8 +68,10 @@ export default {
const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } };

const Template = (args) => (
<div>
<Button type={args.type}>{args.label || args.children}</Button>
<div style={args.background ? { background: args.background } : undefined}>
<Button type={args.type}>
{args.label?.type === 'b' ? <b>{args.children}</b> : args.children}
</Button>
{args.json && <pre>{JSON.stringify(args.json, null, 2)}</pre>}
</div>
);
Expand Down
23 changes: 22 additions & 1 deletion lib/components/src/controls/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,22 @@ const Wrapper = styled.label({
display: 'flex',
});

export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onBlur }) => {
const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
marginLeft: '0.75rem',
paddingTop: '0.35rem',
color: isMaxed ? 'red' : undefined,
}));

const format = (value?: TextValue) => value || '';

export const TextControl: FC<TextProps> = ({
name,
value,
onChange,
onFocus,
onBlur,
maxLength,
}) => {
const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
onChange(event.target.value);
};
Expand All @@ -34,13 +49,19 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
<Wrapper>
<Form.Textarea
id={getControlId(name)}
maxLength={maxLength}
onChange={handleChange}
size="flex"
placeholder="Edit string..."
autoFocus={forceVisible}
valid={isValid ? null : 'error'}
{...{ name, value: isValid ? value : '', onFocus, onBlur }}
/>
{maxLength && (
<MaxLength isMaxed={value?.length === maxLength}>
{value?.length ?? 0} / {maxLength}
</MaxLength>
)}
</Wrapper>
);
};
4 changes: 3 additions & 1 deletion lib/components/src/controls/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ export interface NormalizedOptionsConfig {
}

export type TextValue = string;
export interface TextConfig {}
export interface TextConfig {
maxLength?: number;
}

export type ControlType =
| 'array'
Expand Down