react-select: update styles based on design review (#24339)

microsoft · Oct 27, 2022 · fe895d6 · fe895d6
1 parent 870f51f
commit fe895d6
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 11 deletions.
diff --git a/change/@fluentui-react-select-287be14f-25f7-44e5-b5a7-290b8772638a.json b/change/@fluentui-react-select-287be14f-25f7-44e5-b5a7-290b8772638a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update styles based on design review",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
@@ -15,7 +15,7 @@ const iconSizes = {
   large: '24px',
 };
 
-// TODO: This 400 style is not in the typography styles.
+// This 400 style is not in the typography styles.
 // May need a design change
 const contentSizes = {
   400: {
@@ -31,6 +31,36 @@ const fieldHeights = {
   large: '40px',
 };
 
+/* Since the <select> element must span the full width and cannot have children,
+ * the right padding needs to be calculated from the sum of the following:
+ * 1. Field padding-right
+ * 2. Icon width
+ * 3. Content-icon spacing
+ * 4. Content inner padding
+ */
+const paddingRight = {
+  small: `calc(${tokens.spacingHorizontalSNudge}
+    + ${iconSizes.small}
+    + ${tokens.spacingHorizontalXXS}
+    + ${tokens.spacingHorizontalXXS})`,
+  medium: `calc(${tokens.spacingHorizontalMNudge}
+    + ${iconSizes.medium}
+    + ${tokens.spacingHorizontalXXS}
+    + ${tokens.spacingHorizontalXXS})`,
+  large: `calc(${tokens.spacingHorizontalM}
+    + ${iconSizes.large}
+    + ${tokens.spacingHorizontalSNudge}
+    + ${tokens.spacingHorizontalSNudge})`,
+};
+
+/* Left padding is calculated from the outer padding + inner content padding values
+ * since <select> can't have additional child content or custom inner layout */
+const paddingLeft = {
+  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
+  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
+  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,
+};
+
 /* end of shared values */
 
 const useRootStyles = makeStyles({
@@ -91,7 +121,11 @@ const useSelectStyles = makeStyles({
     boxShadow: 'none',
     boxSizing: 'border-box',
     color: tokens.colorNeutralForeground1,
+    cursor: 'pointer',
     flexGrow: 1,
+    maxWidth: '100%',
+    paddingBottom: 0,
+    paddingTop: 0,
 
     ':focus': {
       outlineWidth: '2px',
@@ -108,25 +142,39 @@ const useSelectStyles = makeStyles({
       ...shorthands.borderColor('GrayText'),
     },
   },
+
   small: {
     height: fieldHeights.small,
-    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),
+    paddingLeft: paddingLeft.small,
+    paddingRight: paddingRight.small,
     ...typographyStyles.caption1,
   },
   medium: {
     height: fieldHeights.medium,
-    ...shorthands.padding('0', tokens.spacingHorizontalMNudge),
+    paddingLeft: paddingLeft.medium,
+    paddingRight: paddingRight.medium,
     ...typographyStyles.body1,
   },
   large: {
     height: fieldHeights.large,
-    ...shorthands.padding('0', tokens.spacingHorizontalM),
+    paddingLeft: paddingLeft.large,
+    paddingRight: paddingRight.large,
     ...contentSizes[400],
   },
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
+
+    '&:hover': {
+      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+    },
+
+    '&:active': {
+      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+      borderBottomColor: tokens.colorNeutralStrokeAccessible,
+    },
   },
   underline: {
     backgroundColor: tokens.colorTransparentBackground,
@@ -157,7 +205,6 @@ const useIconStyles = makeStyles({
     color: tokens.colorNeutralStrokeAccessible,
     display: 'block',
     position: 'absolute',
-    right: tokens.spacingHorizontalMNudge,
     pointerEvents: 'none',
 
     // the SVG must have display: block for accurate positioning
@@ -175,22 +222,19 @@ const useIconStyles = makeStyles({
   small: {
     fontSize: iconSizes.small,
     height: iconSizes.small,
-    paddingRight: tokens.spacingHorizontalSNudge,
-    paddingLeft: tokens.spacingHorizontalXXS,
+    right: tokens.spacingHorizontalSNudge,
     width: iconSizes.small,
   },
   medium: {
     fontSize: iconSizes.medium,
     height: iconSizes.medium,
-    paddingRight: tokens.spacingHorizontalM,
-    paddingLeft: tokens.spacingHorizontalXXS,
+    right: tokens.spacingHorizontalMNudge,
     width: iconSizes.medium,
   },
   large: {
     fontSize: iconSizes.large,
     height: iconSizes.large,
-    paddingRight: tokens.spacingHorizontalM,
-    paddingLeft: tokens.spacingHorizontalSNudge,
+    right: tokens.spacingHorizontalM,
     width: iconSizes.large,
   },
 });