reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-09-21 11:29:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(devui): fix style of Select (#721)

Browse Source 
* fix(devui): fix style of Select

* Upgrade @types/react-select

* Update snapshots
This commit is contained in:
Nathan Bierema 2021-06-06 16:42:40 -04:00 committed by GitHub
parent bc5523f14f
commit bb72311e1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 135 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/devui/package.json
View File

@ -40,7 +40,7 @@
"@types/base16": "^1.0.2", "@types/base16": "^1.0.2",
"@types/codemirror": "^0.0.97", "@types/codemirror": "^0.0.97",
"@types/prop-types": "^15.7.3", "@types/prop-types": "^15.7.3",
"@types/react-select": "^3.0.19", "@types/react-select": "^3.1.2",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"@types/simple-element-resize-detector": "^1.3.0", "@types/simple-element-resize-detector": "^1.3.0",
"@types/styled-components": "^5.1.2", "@types/styled-components": "^5.1.2",

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

@ -44,6 +44,18 @@ export class Select extends (PureComponent || Component)<SelectProps> {
controlHeight: this.props.theme.inputHeight, controlHeight: this.props.theme.inputHeight,
}, },
})} })}
styles={{
container: (base, props) => ({
...base,
flexGrow: 1,
}),
control: (base, props) => ({
...base,
backgroundColor: props.isDisabled
? props.theme.colors.neutral10
: props.theme.colors.neutral5,
}),
}}
/> />
); );
} }

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

@ -2,7 +2,7 @@
exports[`Select renders correctly 1`] = ` exports[`Select renders correctly 1`] = `
<div <div
class=" css-2b097c-container" class=" css-butsr4-container"
> >
<div <div
class=" css-vmgz7k-control" class=" css-vmgz7k-control"
@ -70,7 +70,7 @@ exports[`Select renders correctly 1`] = `
exports[`Select renders with props 1`] = ` exports[`Select renders with props 1`] = `
<div <div
class=" css-2b097c-container" class=" css-butsr4-container"
> >
<div <div
class=" css-vmgz7k-control" class=" css-vmgz7k-control"
@ -312,6 +312,12 @@ exports[`Select should select another option 1`] = `
}, },
] ]
} }
styles={
Object {
"container": [Function],
"control": [Function],
}
}
theme={[Function]} theme={[Function]}
> >
<Select <Select
@ -368,7 +374,12 @@ exports[`Select should select another option 1`] = `
pageSize={5} pageSize={5}
placeholder="Select..." placeholder="Select..."
screenReaderStatus={[Function]} screenReaderStatus={[Function]}
styles={Object {}} styles={
Object {
"container": [Function],
"control": [Function],
}
}
tabIndex="0" tabIndex="0"
tabSelectsValue={true} tabSelectsValue={true}
theme={[Function]} theme={[Function]}
@ -460,7 +471,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -506,6 +520,7 @@ exports[`Select should select another option 1`] = `
Object { Object {
"boxSizing": "border-box", "boxSizing": "border-box",
"direction": null, "direction": null,
"flexGrow": 1,
"label": "container", "label": "container",
"pointerEvents": null, "pointerEvents": null,
"position": "relative", "position": "relative",
@ -514,7 +529,7 @@ exports[`Select should select another option 1`] = `
onKeyDown={[Function]} onKeyDown={[Function]}
> >
<div <div
className=" css-2b097c-container" className=" css-butsr4-container"
onKeyDown={[Function]} onKeyDown={[Function]}
> >
<Control <Control
@ -605,7 +620,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -758,7 +776,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -884,7 +905,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -1112,7 +1136,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -1247,7 +1274,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -1393,7 +1423,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -1585,7 +1618,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -1715,7 +1751,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -1867,7 +1906,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -2023,7 +2065,10 @@ exports[`Select should select another option 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -2216,6 +2261,12 @@ exports[`Select shouldn't find any results 1`] = `
}, },
] ]
} }
styles={
Object {
"container": [Function],
"control": [Function],
}
}
theme={[Function]} theme={[Function]}
> >
<Select <Select
@ -2272,7 +2323,12 @@ exports[`Select shouldn't find any results 1`] = `
pageSize={5} pageSize={5}
placeholder="Select..." placeholder="Select..."
screenReaderStatus={[Function]} screenReaderStatus={[Function]}
styles={Object {}} styles={
Object {
"container": [Function],
"control": [Function],
}
}
tabIndex="0" tabIndex="0"
tabSelectsValue={true} tabSelectsValue={true}
theme={[Function]} theme={[Function]}
@ -2364,7 +2420,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -2410,6 +2469,7 @@ exports[`Select shouldn't find any results 1`] = `
Object { Object {
"boxSizing": "border-box", "boxSizing": "border-box",
"direction": null, "direction": null,
"flexGrow": 1,
"label": "container", "label": "container",
"pointerEvents": null, "pointerEvents": null,
"position": "relative", "position": "relative",
@ -2418,7 +2478,7 @@ exports[`Select shouldn't find any results 1`] = `
onKeyDown={[Function]} onKeyDown={[Function]}
> >
<div <div
className=" css-2b097c-container" className=" css-butsr4-container"
onKeyDown={[Function]} onKeyDown={[Function]}
> >
<Control <Control
@ -2509,7 +2569,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -2662,7 +2725,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -2788,7 +2854,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3016,7 +3085,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3151,7 +3223,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3297,7 +3372,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3489,7 +3567,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3619,7 +3700,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3771,7 +3855,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],
@ -3906,7 +3993,10 @@ exports[`Select shouldn't find any results 1`] = `
"pageSize": 5, "pageSize": 5,
"placeholder": "Select...", "placeholder": "Select...",
"screenReaderStatus": [Function], "screenReaderStatus": [Function],
"styles": Object {}, "styles": Object {
"container": [Function],
"control": [Function],
},
"tabIndex": "0", "tabIndex": "0",
"tabSelectsValue": true, "tabSelectsValue": true,
"theme": [Function], "theme": [Function],

8
yarn.lock
View File

@ -4035,10 +4035,10 @@
"@types/history" "*" "@types/history" "*"
"@types/react" "*" "@types/react" "*"
"@types/react-select@^3.0.19": "@types/react-select@^3.1.2":
version "3.0.19" version "3.1.2"
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.19.tgz#f73b04b8113451b0597df8a8315f9bf8ce03eb44" resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.1.2.tgz#38627df4b49be9b28f800ed72b35d830369a624b"
integrity sha512-d+6qtfFXZeIOAABlVL1e50RZn8ctOABE4tFDxM6KW4lKuXgTTgLVrSik5AX9XjBjV7N80FtS6GTN/WeoXL9Jww== integrity sha512-ygvR/2FL87R2OLObEWFootYzkvm67LRA+URYEAcBuvKk7IXmdsnIwSGm60cVXGaqkJQHozb2Cy1t94tCYb6rJA==
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-dom" "*" "@types/react-dom" "*"