fix(input): clear icon

core-ds · Aug 23, 2021 · 51debd4 · 51debd4
1 parent 03e3223
commit 51debd4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx
@@ -307,10 +307,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                                 onClick={handleClear}
                             >
                                 <span
-                                    className={cn(
-                                        styles.clearIcon,
-                                        colorStyles[colors].clearButton,
-                                    )}
+                                    className={cn(styles.clearIcon, colorStyles[colors].clearIcon)}
                                 />
                             </Button>
                         )}

diff --git a/packages/input/src/__image_snapshots__/input-clear-icon-default-theme-2-snap.png b/packages/input/src/__image_snapshots__/input-clear-icon-default-theme-2-snap.png
diff --git a/packages/input/src/__image_snapshots__/input-clear-icon-default-theme-snap.png b/packages/input/src/__image_snapshots__/input-clear-icon-default-theme-snap.png
diff --git a/packages/input/src/component.screenshots.test.tsx b/packages/input/src/component.screenshots.test.tsx
@@ -76,6 +76,33 @@ describe('Input | screenshots hint and error', () => {
     });
 });
 
+describe('Input | clear icon', () => {
+    const testCase = (theme: string, colors: string) =>
+        screenshotTesting({
+            cases: [
+                [
+                    `${theme} theme`,
+                    createSpriteStorybookUrl({
+                        componentName: 'Input',
+                        knobs: {
+                            size: 'm',
+                            clear: true,
+                            value: 'value',
+                            colors,
+                        },
+                        size: { width: 350, height: 150 },
+                    }),
+                ],
+            ],
+            screenshotOpts: {
+                fullPage: true,
+            },
+            theme,
+        })();
+
+    ['default', 'inverted'].forEach(colors => testCase('default', colors));
+});
+
 describe(
     'Input | screenshots addons',
     screenshotTesting({