Merge pull request #14396 from stevensacks/feat/text-control-max-length

Controls: Add max length config to text control
storybookjs · Jun 30, 2022 · b2c0b40 · b2c0b40
2 parents a33938f + fd265db
commit b2c0b40
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
@@ -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: {
@@ -71,8 +71,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>
 );

diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx
@@ -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);
   };
@@ -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>
   );
 };
diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts
@@ -61,7 +61,9 @@ export interface NormalizedOptionsConfig {
 }
 
 export type TextValue = string;
-export interface TextConfig {}
+export interface TextConfig {
+  maxLength?: number;
+}
 
 export type ControlType =
   | 'array'