mirror of https://github.com/apache/superset.git
style: FilterSelect style tweaks (#10446)
* style: FilterSelect style tweaks * using withTheme to avoid raw supersetTheme * lint Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
parent
edaf785815
commit
e6e6b49372
|
@ -17,7 +17,7 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { styled, withTheme } from '@superset-ui/style';
|
import { styled, withTheme, SupersetThemeProps } from '@superset-ui/style';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
|
@ -46,11 +46,13 @@ interface SelectFilterProps extends BaseFilter {
|
||||||
emptyLabel?: string;
|
emptyLabel?: string;
|
||||||
fetchSelects?: Filter['fetchSelects'];
|
fetchSelects?: Filter['fetchSelects'];
|
||||||
paginate?: boolean;
|
paginate?: boolean;
|
||||||
|
theme: SupersetThemeProps['theme'];
|
||||||
}
|
}
|
||||||
|
|
||||||
const FilterContainer = styled.div`
|
const FilterContainer = styled.div`
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin-right: 2em;
|
margin-right: 2em;
|
||||||
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FilterTitle = styled.label`
|
const FilterTitle = styled.label`
|
||||||
|
@ -59,13 +61,6 @@ const FilterTitle = styled.label`
|
||||||
margin: 0 0.4em 0 0;
|
margin: 0 0.4em 0 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const filterSelectTheme: PartialThemeConfig = {
|
|
||||||
spacing: {
|
|
||||||
baseUnit: 2,
|
|
||||||
minWidth: '5em',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const filterSelectStyles: PartialStylesConfig = {
|
const filterSelectStyles: PartialStylesConfig = {
|
||||||
container: (provider, { getValue }) => ({
|
container: (provider, { getValue }) => ({
|
||||||
...provider,
|
...provider,
|
||||||
|
@ -79,6 +74,7 @@ const filterSelectStyles: PartialStylesConfig = {
|
||||||
...provider,
|
...provider,
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
boxShadow: 'none',
|
boxShadow: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -92,7 +88,16 @@ function SelectFilter({
|
||||||
onSelect,
|
onSelect,
|
||||||
fetchSelects,
|
fetchSelects,
|
||||||
paginate = false,
|
paginate = false,
|
||||||
|
theme,
|
||||||
}: SelectFilterProps) {
|
}: SelectFilterProps) {
|
||||||
|
const filterSelectTheme: PartialThemeConfig = {
|
||||||
|
spacing: {
|
||||||
|
baseUnit: 2,
|
||||||
|
minWidth: '5em',
|
||||||
|
fontSize: theme.typography.sizes.s,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const clearFilterSelect = {
|
const clearFilterSelect = {
|
||||||
label: emptyLabel,
|
label: emptyLabel,
|
||||||
value: CLEAR_SELECT_FILTER_VALUE,
|
value: CLEAR_SELECT_FILTER_VALUE,
|
||||||
|
@ -175,6 +180,7 @@ function SelectFilter({
|
||||||
</FilterContainer>
|
</FilterContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
const StyledSelectFilter = withTheme(SelectFilter);
|
||||||
|
|
||||||
interface SearchHeaderProps extends BaseFilter {
|
interface SearchHeaderProps extends BaseFilter {
|
||||||
Header: string;
|
Header: string;
|
||||||
|
@ -239,7 +245,7 @@ function UIFilters({
|
||||||
internalFilters[index] && internalFilters[index].value;
|
internalFilters[index] && internalFilters[index].value;
|
||||||
if (input === 'select') {
|
if (input === 'select') {
|
||||||
return (
|
return (
|
||||||
<SelectFilter
|
<StyledSelectFilter
|
||||||
key={id}
|
key={id}
|
||||||
name={id}
|
name={id}
|
||||||
Header={Header}
|
Header={Header}
|
||||||
|
|
Loading…
Reference in New Issue