changed style for focused VarianSelect element (npm#248)

pavlov-kirill · web-flow · commit 9a0e571526d9 · 2022-10-28T19:29:36.000+05:00
diff --git a/theme/src/components/variant-select.js b/theme/src/components/variant-select.js
@@ -6,13 +6,19 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Dropdown } from '@primer/components';
+import { Dropdown, themeGet } from '@primer/components';
 import NavHierarchy from '../nav-hierarchy'
 
 VariantSelect.Menu = styled(Dropdown.Menu)`
   width: ${props => props.width ? props.width : '160px'};
 `
 
+VariantSelect.Button = styled(Dropdown.Button)`
+  &:focus {
+    box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')};
+  }
+`
+
 function VariantSelect(props) {
   const path = NavHierarchy.getPath(props.location.pathname);
   const vp = NavHierarchy.getVariantAndPage(props.root, path);
@@ -95,7 +101,7 @@ function VariantSelect(props) {
   return (
     <div ref={wrapper}>
       <Dropdown onKeyDown={onDropDownKeyDown} overlay={props.overlay}>
-          <Dropdown.Button>{selectedItem.variant.title}</Dropdown.Button>
+          <VariantSelect.Button>{selectedItem.variant.title}</VariantSelect.Button>
           <VariantSelect.Menu direction={props.direction} width={props.menuWidth}>
               {items}
           </VariantSelect.Menu>
