diff --git a/.changeset/fair-walls-talk.md b/.changeset/fair-walls-talk.md new file mode 100644 index 0000000000..3e3ee26160 --- /dev/null +++ b/.changeset/fair-walls-talk.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org-react': patch +--- + +Bug fixes and adding the possibility to add a default value for the `GroupListPicker`. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening diff --git a/plugins/org-react/README.md b/plugins/org-react/README.md index 91c7ebf48a..1f87a5e7e6 100644 --- a/plugins/org-react/README.md +++ b/plugins/org-react/README.md @@ -18,13 +18,14 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo -+ ++ ``` -The `GroupListPicker` comes with three props: +The `GroupListPicker` comes with four props: - `groupTypes`: gives the user the option which group types the component should load. If no value is provided all group types will be loaded in; - `placeholder`: the placeholder that the select box in the component should display. This might be helpful in informing your users what the functionality of the component is. - `onChange`: a prop to help the user to give access to the selected group +- `defaultValue`: gives the user the option to define a default value that will be shown initially before making a selection diff --git a/plugins/org-react/api-report.md b/plugins/org-react/api-report.md index 60cd6944d0..48bd090f64 100644 --- a/plugins/org-react/api-report.md +++ b/plugins/org-react/api-report.md @@ -12,6 +12,7 @@ export const GroupListPicker: (props: GroupListPickerProps) => JSX.Element; // @public export type GroupListPickerProps = { + defaultValue?: string; placeholder?: string; groupTypes?: Array; onChange: (value: GroupEntity | undefined) => void; diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx index 1296c520c3..a47c346390 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx @@ -34,6 +34,7 @@ import { GroupListPickerButton } from './GroupListPickerButton'; * @public */ export type GroupListPickerProps = { + defaultValue?: string; placeholder?: string; groupTypes?: Array; onChange: (value: GroupEntity | undefined) => void; @@ -43,9 +44,9 @@ export type GroupListPickerProps = { export const GroupListPicker = (props: GroupListPickerProps) => { const catalogApi = useApi(catalogApiRef); - const { onChange, groupTypes, placeholder = '' } = props; + const { onChange, groupTypes, placeholder = '', defaultValue = '' } = props; const [anchorEl, setAnchorEl] = React.useState(null); - const [inputValue, setInputValue] = React.useState(''); + const [inputValue, setInputValue] = React.useState(defaultValue); const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); @@ -75,6 +76,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => { const handleChange = useCallback( (_, v: GroupEntity | null) => { onChange(v ?? undefined); + setAnchorEl(null); }, [onChange], ); @@ -108,6 +110,8 @@ export const GroupListPicker = (props: GroupListPickerProps) => { renderInput={params => ( diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx index 149bf778b1..01ffe7e58b 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -22,8 +22,7 @@ import PeopleIcon from '@material-ui/icons/People'; const useStyles = makeStyles((theme: BackstageTheme) => ({ btn: { - margin: 0, - padding: 10, + padding: '10px', width: '100%', cursor: 'pointer', justifyContent: 'space-between', @@ -32,10 +31,13 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ fontSize: '1.5rem', fontStyle: 'normal', fontWeight: theme.typography.fontWeightBold, + height: '32px', letterSpacing: '-0.25px', - lineHeight: '32px', marginBottom: 0, + marginLeft: '4px', + textAlign: 'left', textTransform: 'none', + width: '100%', }, icon: { transform: 'scale(1.5)',