github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1576 from prymitive/react-style

Browse Source 
fix(ui): ensure that react-select input gets correct color
This commit is contained in:
Łukasz Mierzwa
2020-04-01 21:24:25 +01:00
committed by GitHub
parent 2033e2d306 fd08799a42
commit 7a589ee2f4
11 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
View File

@@ -9,7 +9,7 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

2
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
View File

@@ -11,7 +11,7 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

2
ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.js.snap
View File

@@ -11,7 +11,7 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Disable multi-grid
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

2
ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.js.snap
View File

@@ -9,7 +9,7 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Automatic theme, follow browser preference
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

8
ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
View File

@@ -157,7 +157,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Automatic theme, follow browser preference
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -394,7 +394,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -475,7 +475,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -558,7 +558,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Disable multi-grid
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

8
ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
View File

@@ -176,7 +176,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Automatic theme, follow browser preference
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -413,7 +413,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -494,7 +494,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -577,7 +577,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Disable multi-grid
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

16
ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
View File

@@ -8,7 +8,7 @@ exports[`<MultiSelect /> matches snapshot without any extra props 1`] = `
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -69,7 +69,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -93,7 +93,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-1gtu0rj-indicatorContainer\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-1ij327q-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -120,7 +120,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
foo
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -171,7 +171,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with defaults 1`] = `
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -222,7 +222,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
<div class=\\"react-select__single-value react-select__single-value--is-disabled css-1wh03ml-singleValue\\">
foo
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -274,7 +274,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
@@ -339,7 +339,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
</svg>
</div>
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

2
ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
View File

@@ -39,7 +39,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
</svg>
</div>
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

2
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
View File

@@ -8,7 +8,7 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
name
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

2
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
View File

@@ -22,7 +22,7 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
Label value
</div>
</div>
<div class=\\"css-b8ldur-Input\\">
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>

11
ui/src/Components/Theme/ReactSelect.js
View File

@@ -107,6 +107,10 @@ const ReactSelectStyles = (theme) => ({
opacity: "0.75",
},
}),
input: (base, state) => ({
...base,
color: "inherit",
}),
indicatorsContainer: (base, state) => ({
...base,
backgroundColor: state.isDisabled
@@ -115,6 +119,13 @@ const ReactSelectStyles = (theme) => ({
borderTopRightRadius: "0.25rem",
borderBottomRightRadius: "0.25rem",
}),
dropdownIndicator: (base, state) =>
state.isFocused
? {
...base,
"&:hover": { color: "inherit" },
}
: { ...base },
menu: (base, state) => ({
...base,
zIndex: 1500,