diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index 5a9f5440ec..b2872a086b 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -53,6 +53,7 @@ import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles' import { TabProps } from '@material-ui/core/Tab'; import { Theme } from '@material-ui/core/styles'; import { TooltipProps } from '@material-ui/core/Tooltip'; +import { TypographyProps } from '@material-ui/core/Typography'; import { WithStyles } from '@material-ui/core/styles'; // @public @@ -100,6 +101,7 @@ export type AutocompleteComponentProps< > & { name: string; label?: string; + LabelProps?: TypographyProps<'label'>; TextFieldProps?: Omit; renderInput?: AutocompleteProps< T, diff --git a/packages/core-components/src/components/Autocomplete/Autocomplete.tsx b/packages/core-components/src/components/Autocomplete/Autocomplete.tsx index a34dd8728a..e01497c5a1 100644 --- a/packages/core-components/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/core-components/src/components/Autocomplete/Autocomplete.tsx @@ -15,7 +15,7 @@ */ import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; +import Typography, { TypographyProps } from '@material-ui/core/Typography'; import Paper, { PaperProps } from '@material-ui/core/Paper'; import Popper, { PopperProps } from '@material-ui/core/Popper'; import TextField, { OutlinedTextFieldProps } from '@material-ui/core/TextField'; @@ -33,6 +33,7 @@ import Autocomplete, { } from '@material-ui/lab/Autocomplete'; import React, { ReactNode, useCallback } from 'react'; import { merge } from 'lodash'; +import classNames from 'classnames'; const useStyles = makeStyles( theme => ({ @@ -135,6 +136,7 @@ export type AutocompleteComponentProps< > & { name: string; label?: string; + LabelProps?: TypographyProps<'label'>; TextFieldProps?: Omit; renderInput?: AutocompleteProps< T, @@ -151,7 +153,7 @@ export function AutocompleteComponent< DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined, >(props: AutocompleteComponentProps) { - const { label, name, TextFieldProps, ...rest } = props; + const { label, name, LabelProps, TextFieldProps, ...rest } = props; const classes = useStyles(); const renderInput = useCallback( (params: AutocompleteRenderInputParams) => ( @@ -173,7 +175,11 @@ export function AutocompleteComponent< return ( {label ? ( - + {label} {autocomplete} diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index bf8db5f627..e26f231ff4 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -47,6 +47,8 @@ export type CatalogReactEntityOwnerPickerClassKey = 'input'; const useStyles = makeStyles( { root: {}, + label: {}, + input: {}, fullWidth: { width: '100%' }, boxLabel: { width: '100%', @@ -235,6 +237,8 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { }, 'data-testid': 'owner-picker-listbox', }} + LabelProps={{ className: classes.label }} + TextFieldProps={{ className: classes.input }} /> ); diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx index 02d1ddc238..891f6acc9e 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx @@ -33,6 +33,8 @@ export type CatalogReactEntityProcessingStatusPickerClassKey = 'input'; const useStyles = makeStyles( { root: {}, + input: {}, + label: {}, }, { name: 'CatalogReactEntityProcessingStatusPickerPicker' }, ); @@ -91,6 +93,8 @@ export const EntityProcessingStatusPicker = () => { /> )} name="processing-status-picker" + LabelProps={{ className: classes.label }} + TextFieldProps={{ className: classes.input }} /> );