reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-12-01 05:53:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(devui): better Select styles to match other components (#787)

Browse Source 
* feat(extension): add back buttons for opening new windows

* Change import

* stash

* stash
This commit is contained in:
Nathan Bierema 2021-08-27 03:48:24 +00:00 committed by GitHub
parent 1dd169a60d
commit 2f7cf3efac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/devui/src/Select/Select.tsx
View File

@ -27,7 +27,7 @@ export class Select<
{...this.props} {...this.props}
theme={(theme) => ({ theme={(theme) => ({
...theme, ...theme,
borderRadius: this.props.theme.inputBorderRadius, borderRadius: 0,
colors: { colors: {
...theme.colors, ...theme.colors,
@ -60,9 +60,15 @@ export class Select<
}), }),
control: (base, props) => ({ control: (base, props) => ({
...base, ...base,
backgroundColor: props.isDisabled backgroundColor: props.isFocused
? props.theme.colors.neutral10 ? props.theme.colors.neutral10
: props.theme.colors.neutral5, : props.theme.colors.neutral5,
borderColor: props.theme.colors.neutral10,
'&:hover': {
backgroundColor: props.theme.colors.neutral10,
borderColor: props.theme.colors.neutral10,
},
}), }),
}} }}
/> />

72
packages/devui/tests/__snapshots__/Select.test.tsx.snap
View File

@ -5,7 +5,7 @@ exports[`Select renders correctly 1`] = `
class=" css-butsr4-container" class=" css-butsr4-container"
> >
<div <div
class=" css-vmgz7k-control" class=" css-10abb65-control"
> >
<div <div
class=" css-be27w2-ValueContainer" class=" css-be27w2-ValueContainer"
@ -73,21 +73,21 @@ exports[`Select renders with props 1`] = `
class=" css-ie73ge-container" class=" css-ie73ge-container"
> >
<div <div
class=" css-vmgz7k-control" class=" css-10abb65-control"
> >
<div <div
class=" css-be27w2-ValueContainer" class=" css-be27w2-ValueContainer"
> >
<div <div
class="css-syqu13-multiValue" class="css-168vvpw-multiValue"
> >
<div <div
class="css-1lxn4sj" class="css-1m51f4l"
> >
One One
</div> </div>
<div <div
class="css-19nhond" class="css-1to589f"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -489,7 +489,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -638,7 +638,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -673,12 +673,13 @@ exports[`Select should select another option 1`] = `
css={ css={
Object { Object {
"&:hover": Object { "&:hover": Object {
"backgroundColor": undefined,
"borderColor": undefined, "borderColor": undefined,
}, },
"alignItems": "center", "alignItems": "center",
"backgroundColor": undefined, "backgroundColor": undefined,
"borderColor": undefined, "borderColor": undefined,
"borderRadius": 4, "borderRadius": 0,
"borderStyle": "solid", "borderStyle": "solid",
"borderWidth": 1, "borderWidth": 1,
"boxShadow": null, "boxShadow": null,
@ -698,7 +699,7 @@ exports[`Select should select another option 1`] = `
onTouchEnd={[Function]} onTouchEnd={[Function]}
> >
<div <div
className=" css-vmgz7k-control" className=" css-10abb65-control"
onMouseDown={[Function]} onMouseDown={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
> >
@ -794,7 +795,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -924,7 +925,7 @@ exports[`Select should select another option 1`] = `
tabIndex="0" tabIndex="0"
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -1154,7 +1155,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -1292,7 +1293,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -1441,7 +1442,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -1637,7 +1638,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -1770,7 +1771,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -1805,7 +1806,7 @@ exports[`Select should select another option 1`] = `
css={ css={
Object { Object {
"backgroundColor": undefined, "backgroundColor": undefined,
"borderRadius": 4, "borderRadius": 0,
"boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)", "boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)",
"boxSizing": "border-box", "boxSizing": "border-box",
"label": "menu", "label": "menu",
@ -1821,7 +1822,7 @@ exports[`Select should select another option 1`] = `
onMouseMove={[Function]} onMouseMove={[Function]}
> >
<div <div
className=" css-1ektx4i-menu" className=" css-1uhnaxp-menu"
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseMove={[Function]} onMouseMove={[Function]}
> >
@ -1925,7 +1926,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -2084,7 +2085,7 @@ exports[`Select should select another option 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -2439,7 +2440,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -2588,7 +2589,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -2623,12 +2624,13 @@ exports[`Select shouldn't find any results 1`] = `
css={ css={
Object { Object {
"&:hover": Object { "&:hover": Object {
"backgroundColor": undefined,
"borderColor": undefined, "borderColor": undefined,
}, },
"alignItems": "center", "alignItems": "center",
"backgroundColor": undefined, "backgroundColor": undefined,
"borderColor": undefined, "borderColor": undefined,
"borderRadius": 4, "borderRadius": 0,
"borderStyle": "solid", "borderStyle": "solid",
"borderWidth": 1, "borderWidth": 1,
"boxShadow": null, "boxShadow": null,
@ -2648,7 +2650,7 @@ exports[`Select shouldn't find any results 1`] = `
onTouchEnd={[Function]} onTouchEnd={[Function]}
> >
<div <div
className=" css-vmgz7k-control" className=" css-10abb65-control"
onMouseDown={[Function]} onMouseDown={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
> >
@ -2744,7 +2746,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -2874,7 +2876,7 @@ exports[`Select shouldn't find any results 1`] = `
tabIndex="0" tabIndex="0"
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -3104,7 +3106,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -3242,7 +3244,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -3391,7 +3393,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -3587,7 +3589,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -3720,7 +3722,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -3755,7 +3757,7 @@ exports[`Select shouldn't find any results 1`] = `
css={ css={
Object { Object {
"backgroundColor": undefined, "backgroundColor": undefined,
"borderRadius": 4, "borderRadius": 0,
"boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)", "boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)",
"boxSizing": "border-box", "boxSizing": "border-box",
"label": "menu", "label": "menu",
@ -3771,7 +3773,7 @@ exports[`Select shouldn't find any results 1`] = `
onMouseMove={[Function]} onMouseMove={[Function]}
> >
<div <div
className=" css-1ektx4i-menu" className=" css-1uhnaxp-menu"
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseMove={[Function]} onMouseMove={[Function]}
> >
@ -3875,7 +3877,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,
@ -4013,7 +4015,7 @@ exports[`Select shouldn't find any results 1`] = `
setValue={[Function]} setValue={[Function]}
theme={ theme={
Object { Object {
"borderRadius": 4, "borderRadius": 0,
"colors": Object { "colors": Object {
"danger": undefined, "danger": undefined,
"dangerLight": undefined, "dangerLight": undefined,