Update styling for contentBefore and contentAfter input slots (#26115)

* Update styling for contentBefore and contentAfter input slots * change files * Update styling
microsoft · Jan 10, 2023 · a98c062 · a98c062
1 parent 25e3d5b
commit a98c062
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/change/@fluentui-react-input-68d90a7c-d6d4-4cc4-bd74-697d991fdfca.json b/change/@fluentui-react-input-68d90a7c-d6d4-4cc4-bd74-697d991fdfca.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Update contentBefore and contentAfter slot styling for svg",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-input/src/components/Input/useInputStyles.ts b/packages/react-components/react-input/src/components/Input/useInputStyles.ts
@@ -216,8 +216,8 @@ const useContentStyles = makeStyles({
   base: {
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground3, // "icon color" in design spec
+    display: 'flex',
     // special case styling for icons (most common case) to ensure they're centered vertically
-    '> svg': { display: 'block' },
   },
   disabled: {
     color: tokens.colorNeutralForegroundDisabled,