Fix border styles when select control is active (#19184)

* fix border styles when control is active * Change files Co-authored-by: Cory LaViska <corylaviska@microsoft.com>
microsoft · Jul 29, 2021 · b0f4787 · b0f4787
1 parent 0301b34
commit b0f4787
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/change/@fluentui-web-components-028bc033-4b14-45d6-bbf1-eacc6664f876.json b/change/@fluentui-web-components-028bc033-4b14-45d6-bbf1-eacc6664f876.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix border styles when control is active",
+ "packageName": "@fluentui/web-components",
+ "email": "corylaviska@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
@@ -153,15 +153,14 @@ export const selectStyles = (context, definition) =>
  :host(:not([disabled])) .control:active {
  background: ${neutralFillInputActive};
  border-color: ${neutralStrokeActive};
+ border-radius: calc(${controlCornerRadius} * 1px);
  }
 
- :host([open][position='above']) .listbox,
- :host([open][position='below']) .control {
+ :host([open][position='above']) .listbox {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  }
 
- :host([open][position='above']) .control,
  :host([open][position='below']) .listbox {
  border-top-left-radius: 0;
  border-top-right-radius: 0;