feat(PinInput): responsive prop and CSS API (#1679)

gravity-ui · Jun 26, 2024 · 24484d2 · 24484d2
1 parent f7a2594
commit 24484d2
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/src/components/PinInput/PinInput.scss b/src/components/PinInput/PinInput.scss
@@ -6,13 +6,13 @@ $block: '.#{variables.$ns}pin-input';
     display: inline-block;
 
     &__items {
-        display: inline-flex;
-        gap: var(--_--gap);
+        display: flex;
+        gap: var(--g-pin-input-item-gap, var(--_--gap));
     }
 
     &__item {
         flex: 0 0 auto;
-        width: var(--_--item-width);
+        width: var(--g-pin-input-item-width, var(--_--item-width));
     }
 
     &__control {
@@ -43,4 +43,13 @@ $block: '.#{variables.$ns}pin-input';
             --_--gap: 12px;
         }
     }
+
+    &_responsive {
+        display: block;
+
+        #{$block}__item {
+            width: auto;
+            flex: 1 1 auto;
+        }
+    }
 }
diff --git a/src/components/PinInput/PinInput.tsx b/src/components/PinInput/PinInput.tsx
@@ -35,6 +35,7 @@ export interface PinInputProps extends DOMProps, AriaLabelingProps, QAProps {
     autoFocus?: boolean;
     otp?: boolean;
     mask?: boolean;
+    responsive?: boolean;
     note?: TextInputProps['note'];
     validationState?: TextInputProps['validationState'];
     errorMessage?: TextInputProps['errorMessage'];
@@ -69,6 +70,7 @@ export const PinInput = React.forwardRef<HTMLDivElement, PinInputProps>((props,
         autoFocus,
         otp,
         mask,
+        responsive,
         note,
         validationState,
         errorMessage,
@@ -244,7 +246,7 @@ export const PinInput = React.forwardRef<HTMLDivElement, PinInputProps>((props,
     );
 
     return (
-        <div ref={ref} className={b({size}, className)} style={style} data-qa={qa}>
+        <div ref={ref} className={b({size, responsive}, className)} style={style} data-qa={qa}>
             <div className={b('items')}>
                 {Array.from({length}).map((__, i) => (
                     <div key={i} className={b('item')}>

diff --git a/src/components/PinInput/README.md b/src/components/PinInput/README.md
@@ -161,6 +161,13 @@ If you want the browser to suggest "one time codes" from the outer context (e.g.
 
 - `focus(): void` - Set focus to the current active input.
 
+## CSS API
+
+| Name                       | Description                                            |
+| :------------------------- | :----------------------------------------------------- |
+| `--g-pin-input-item-width` | Set width of each input, unless `responsive` is `true` |
+| `--g-pin-input-item-gap`   | Set gap between inputs                                 |
+
 ## Properties
 
 | Name             | Description                                                                                                                                          |             Type             |   Default   |
@@ -184,6 +191,7 @@ If you want the browser to suggest "one time codes" from the outer context (e.g.
 | otp              | When set to `true` adds `autocomplete="one-time-code"` to inputs                                                                                     |          `boolean`           |             |
 | placeholder      | Placeholder for inputs                                                                                                                               |           `string`           |             |
 | qa               | HTML `data-qa` attribute, for test purposes                                                                                                          |           `string`           |             |
+| responsive       | Parent's width distributed evenly between inputs                                                                                                     |          `boolean`           |             |
 | size             | Size of input fields                                                                                                                                 |   `"s"` `"m"` `"l"` `"xl"`   |    `"m"`    |
 | style            | HTML `style` attribute                                                                                                                               |    `React.CSSProperties`     |             |
 | type             | What type of input value is allowed                                                                                                                  | `"numeric"` `"alphanumeric"` | `"numeric"` |

diff --git a/src/components/PinInput/__stories__/PinInput.stories.tsx b/src/components/PinInput/__stories__/PinInput.stories.tsx
@@ -114,3 +114,22 @@ export const WithNote: Story = {
         note: 'Additional info',
     },
 };
+
+export const Responsive: Story = {
+    render: (args) => (
+        <div
+            style={{
+                resize: 'horizontal',
+                width: 200,
+                overflow: 'scroll',
+                paddingBottom: 16,
+            }}
+        >
+            <PinInput {...args} />
+        </div>
+    ),
+    args: {
+        ...Default.args,
+        responsive: true,
+    },
+};