diff --git a/.changeset/nasty-pens-march.md b/.changeset/nasty-pens-march.md new file mode 100644 index 0000000000..feee28fad4 --- /dev/null +++ b/.changeset/nasty-pens-march.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org-react': patch +--- + +Bug fixes and adding the possibility to add a default value. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, autofocus 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/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..3f9528b9bd 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -27,13 +27,18 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ width: '100%', cursor: 'pointer', justifyContent: 'space-between', + '& p': { + width: '100%', + textAlign: 'left', + marginLeft: 4, + }, }, title: { fontSize: '1.5rem', fontStyle: 'normal', fontWeight: theme.typography.fontWeightBold, letterSpacing: '-0.25px', - lineHeight: '32px', + height: '32px', marginBottom: 0, textTransform: 'none', },