feat(confirmation): compact code-input if slotsCount > 6

core-ds · Oct 18, 2021 · 99be0e1 · 99be0e1
1 parent 699154b
commit 99be0e1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/...age_snapshots__/confirmation-interactions-tests-open-don-t-receive-sms-snap.png b/...age_snapshots__/confirmation-interactions-tests-open-don-t-receive-sms-snap.png
diff --git a/packages/confirmation/src/components/code-input/component.tsx b/packages/confirmation/src/components/code-input/component.tsx
@@ -217,6 +217,7 @@ export const CodeInput = forwardRef<HTMLInputElement, CodeInputProps>(
             <div
                 className={cn(styles.component, className, {
                     [styles.shake]: Boolean(error),
+                    [styles.compact]: slotsCount > 6,
                 })}
             >
                 {new Array(slotsCount).fill('').map((_, index) => (

diff --git a/packages/confirmation/src/components/code-input/index.module.css b/packages/confirmation/src/components/code-input/index.module.css
@@ -38,6 +38,11 @@
     }
 }
 
+.compact .input {
+    width: 28px;
+    height: 40px;
+}
+
 @keyframes shake {
     0% {
         transform: translateX(0);

diff --git a/packages/confirmation/src/docs/Component.stories.mdx b/packages/confirmation/src/docs/Component.stories.mdx
@@ -124,7 +124,7 @@ import vars from '!!raw-loader!../vars.css';
                             maxWidth: '375px',
                             margin: '16px 0 0',
                             padding: '16px',
-                            border: '1px solid #eeeff1',
+                            boxShadow: '0 0 0 1px #eeeff1',
                             boxSizing: 'border-box'
                         }}
                     >