Merge pull request #438 from db-ui/fix-icons-for-input

fix(input): filled icons for inputstate
db-ui · Feb 15, 2023 · a791fe6 · a791fe6
2 parents 55d27e6 + e1573c7
commit a791fe6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
@@ -289,7 +289,7 @@
 
 		&::after,
 		&::before {
-			--icon-font-family: var(--db-base-icon-font-family);
+			--icon-font-family: var(--db-base-icon-font-family-filled);
 			--icon-font-size: var(--db-base-icon-font-size);
 			right: 0;
 		}
@@ -325,7 +325,9 @@
 
 		& ~ .icon-input-state,
 		& ~ .icon-input-state .db-icon {
-			@include icon(glyph(error), 20, "filled", "after", false);
+			// TODO fix this workaround after new icon implementation
+			--icon-glyph: "\e1123";
+			@include icon(glyph(error), 24, "outline", "after", true);
 		}
 	}
 

diff --git a/showcases/react-showcase/src/components/input/index.tsx b/showcases/react-showcase/src/components/input/index.tsx
@@ -82,6 +82,17 @@ const variants: DefaultComponentVariants[] = [
 					/>
 				)
 			},
+			{
+				name: 'Invalid',
+				example: (
+					<DBInput
+						label={defaultLabelText}
+						minLength={5}
+						required={true}
+						description="minLength=5"
+					/>
+				)
+			},
 			{
 				name: 'Disabled',
 				example: (