nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(docsearch): group search button elements in containers (#74)

Browse source
This commit is contained in:
François Chalifour 2020-09-02 08:50:33 +02:00 committed by François Chalifour
parent a8fb06305a
commit 8640418995
2 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/docsearch-css/src/button.css
View file

@ -8,6 +8,7 @@
display: flex;
font-weight: 500;
height: 36px;
justify-content: space-between;
margin: 0 0 0 16px;
padding: 0 8px;
user-select: none;
@ -22,6 +23,11 @@
outline: none;
}
.DocSearch-Button-Container {
align-items: center;
display: flex;
}
.DocSearch-Search-Icon {
stroke-width: 1.6;
}
@ -35,6 +41,10 @@
padding: 0 12px 0 6px;
}
.DocSearch-Button-Keys {
display: flex;
}
.DocSearch-Button-Key {
align-items: center;
background: var(--docsearch-key-gradient);

16
packages/docsearch-react/src/DocSearchButton.tsx
View file

@ -41,13 +41,17 @@ export const DocSearchButton = React.forwardRef<
{...props}
ref={ref}
>
<SearchIcon />
<span className="DocSearch-Button-Placeholder">Search</span>
<div className="DocSearch-Button-Container">
<SearchIcon />
<span className="DocSearch-Button-Placeholder">Search</span>
</div>
<span className="DocSearch-Button-Key">
{key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
</span>
<span className="DocSearch-Button-Key">K</span>
<div className="DocSearch-Button-Keys">
<span className="DocSearch-Button-Key">
{key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
</span>
<span className="DocSearch-Button-Key">K</span>
</div>
</button>
);
});