This is an automated email from the ASF dual-hosted git repository. erikrit pushed a commit to branch erik-ritter--remove-uppercase-styling-filter-box in repository https://gitbox.apache.org/repos/asf/superset.git
commit 4d27d7de8656522d4d8e150f5289a6392756d7b3 Author: erik_ritter <[email protected]> AuthorDate: Wed May 12 14:19:51 2021 -0700 feat: Remove uppercase styling on FilterBox --- superset-frontend/src/components/Form/FormLabel.tsx | 16 +++++++++------- .../src/visualizations/FilterBox/FilterBox.jsx | 4 +++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/superset-frontend/src/components/Form/FormLabel.tsx b/superset-frontend/src/components/Form/FormLabel.tsx index cb4cba0..0070642 100644 --- a/superset-frontend/src/components/Form/FormLabel.tsx +++ b/superset-frontend/src/components/Form/FormLabel.tsx @@ -21,20 +21,21 @@ import { styled } from '@superset-ui/core'; export type FormLabelProps = { children: ReactNode; + className?: string; htmlFor?: string; required?: boolean; - className?: string; + uppercase?: boolean; }; -const Label = styled.label` - text-transform: uppercase; +const Label = styled.label<{ uppercase: boolean }>` + text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : 'none')}; font-size: ${({ theme }) => theme.typography.sizes.s}px; color: ${({ theme }) => theme.colors.grayscale.base}; margin-bottom: ${({ theme }) => theme.gridUnit}px; `; -const RequiredLabel = styled.label` - text-transform: uppercase; +const RequiredLabel = styled.label<{ uppercase: boolean }>` + text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : 'none')}; font-size: ${({ theme }) => theme.typography.sizes.s}px; color: ${({ theme }) => theme.colors.grayscale.base}; margin-bottom: ${({ theme }) => theme.gridUnit}px; @@ -48,13 +49,14 @@ const RequiredLabel = styled.label` export default function FormLabel({ children, + className, htmlFor, required = false, - className, + uppercase = true, }: FormLabelProps) { const StyledLabel = required ? RequiredLabel : Label; return ( - <StyledLabel htmlFor={htmlFor} className={className}> + <StyledLabel htmlFor={htmlFor} className={className} uppercase={uppercase}> {children} </StyledLabel> ); diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx index cbe9566..23a8613 100644 --- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx @@ -408,7 +408,9 @@ class FilterBox extends React.PureComponent { const { label, key } = filterConfig; return ( <div key={key} className="m-b-5 filter-container"> - <FormLabel htmlFor={`LABEL-${key}`}>{label}</FormLabel> + <FormLabel htmlFor={`LABEL-${key}`} uppercase={false}> + {label} + </FormLabel> {this.renderSelect(filterConfig)} </div> );
