changed style for focused VarianSelect element (#248)
pavlov-kirill committed
Oct 28, 2022 at 18:29 UTC
9a0e571526d98eecd7d4abbad05585e73f435ee5
1 file changed
+8
-2
theme/src/components/variant-select.js
+8
-2
@@ -6,13 +6,19 @@
6
7
import React from 'react';
8
import styled from 'styled-components';
9
-import { Dropdown } from '@primer/components';
9
+import { Dropdown, themeGet } from '@primer/components';
10
import NavHierarchy from '../nav-hierarchy'
11
12
VariantSelect.Menu = styled(Dropdown.Menu)`
13
width: ${props => props.width ? props.width : '160px'};
14
`
15
16
+VariantSelect.Button = styled(Dropdown.Button)`
17
+ &:focus {
18
+ box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')};
19
+ }
20
+`
21
+
22
function VariantSelect(props) {
23
const path = NavHierarchy.getPath(props.location.pathname);
24
const vp = NavHierarchy.getVariantAndPage(props.root, path);
@@ -95,7 +101,7 @@ function VariantSelect(props) {
101
return (
102
<div ref={wrapper}>
103
<Dropdown onKeyDown={onDropDownKeyDown} overlay={props.overlay}>
98
- <Dropdown.Button>{selectedItem.variant.title}</Dropdown.Button>
104
+ <VariantSelect.Button>{selectedItem.variant.title}</VariantSelect.Button>
105
<VariantSelect.Menu direction={props.direction} width={props.menuWidth}>
106
{items}
107
</VariantSelect.Menu>