(web-components) fix select style height overlap (#18348)

* fix a bug where the bottom border for select and comobox would visually disappear on active states * Change files
microsoft · Jun 8, 2021 · a5e0caf · a5e0caf
1 parent b4b04f0
commit a5e0caf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/change/@fluentui-web-components-861ce175-84fa-4e22-a53c-fea1744825d2.json b/change/@fluentui-web-components-861ce175-84fa-4e22-a53c-fea1744825d2.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix a bug where the bottom border for select and comobox would visually disappear on active states",
+ "packageName": "@fluentui/web-components",
+ "email": "chhol@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
@@ -54,11 +54,12 @@ export const selectStyles = (context, definition) =>
  border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest};
  box-sizing: border-box;
  color: ${neutralForegroundRest};
- contain: contents;
+ font-family: ${bodyFont};
  height: calc(${heightNumber} * 1px);
  position: relative;
  user-select: none;
  min-width: 250px;
+ vertical-align: top;
  }
 
  .listbox {
@@ -88,9 +89,9 @@ export const selectStyles = (context, definition) =>
  cursor: pointer;
  display: flex;
  font-size: ${typeRampBaseFontSize};
- font: inherit;
+ font-family: inherit;
+ min-height: 100%;
  line-height: ${typeRampBaseLineHeight};
- min-height: calc(${heightNumber} * 1px);
  padding: 0 calc(${designUnit} * 2.25px);
  width: 100%;
  }
@@ -131,6 +132,7 @@ export const selectStyles = (context, definition) =>
 
  :host([disabled]) .control {
  cursor: ${disabledCursor};
+ user-select: none;
  }
 
  :host([disabled]:hover) {
@@ -167,7 +169,7 @@ export const selectStyles = (context, definition) =>
  }
 
  .selected-value {
- font-family: ${bodyFont};
+ font-family: inherit;
  flex: 1 1 auto;
  text-align: start;
  }