Added root and label class keys for autocomplete pickers

Signed-off-by: Harrison Hogg <hhogg@spotify.com>

.changeset/hungry-points-burn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Added 'root' and 'label' class keys for EntityAutocompletePicker, EntityOwnerPicker and EntityProcessingStatusPicker

.changeset/pretty-boats-promise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Added 'root' and 'label' class key to TemplateCategoryPicker

plugins/catalog-react/api-report.md

@@ -93,8 +93,12 @@ export type CatalogReactComponentsNameToClassKey = {
   CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
   CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
   CatalogReactEntityProcessingStatusPicker: CatalogReactEntityProcessingStatusPickerClassKey;
+  CatalogReactEntityAutocompletePickerClassKey: CatalogReactEntityAutocompletePickerClassKey;
 };
 
+// @public (undocumented)
+export type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label';
+
 // @public
 export type CatalogReactEntityDisplayNameClassKey = 'root' | 'icon';
 
@@ -105,10 +109,13 @@ export type CatalogReactEntityLifecyclePickerClassKey = 'input';
 export type CatalogReactEntityNamespacePickerClassKey = 'input';
 
 // @public (undocumented)
-export type CatalogReactEntityOwnerPickerClassKey = 'input';
+export type CatalogReactEntityOwnerPickerClassKey = 'input' | 'root' | 'label';
 
 // @public (undocumented)
-export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
+export type CatalogReactEntityProcessingStatusPickerClassKey =
+  | 'input'
+  | 'root'
+  | 'label';
 
 // @public (undocumented)
 export type CatalogReactEntitySearchBarClassKey = 'searchToolbar' | 'input';

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Box, TextFieldProps, Typography } from '@material-ui/core';
+import { Box, TextFieldProps, Typography, makeStyles } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete } from '@material-ui/lab';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -52,6 +52,17 @@ export type EntityAutocompletePickerProps<
   initialSelectedOptions?: string[];
 };
 
+/** @public */
+export type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label';
+
+const useStyles = makeStyles(
+  {
+    root: {},
+    label: {},
+  },
+  { name: 'CatalogReactEntityAutocompletePicker' },
+);
+
 /** @public */
 export function EntityAutocompletePicker<
   T extends DefaultEntityFilters = DefaultEntityFilters,
@@ -67,6 +78,8 @@ export function EntityAutocompletePicker<
     initialSelectedOptions = [],
   } = props;
 
+  const classes = useStyles();
+
   const {
     updateFilters,
     filters,
@@ -127,8 +140,8 @@ export function EntityAutocompletePicker<
   if (availableOptions.length <= 1) return null;
 
   return (
-    <Box pb={1} pt={1}>
-      <Typography variant="button" component="label">
+    <Box className={classes.root} pb={1} pt={1}>
+      <Typography className={classes.label} variant="button" component="label">
         {label}
         <Autocomplete<string, true>
           multiple

plugins/catalog-react/src/components/EntityAutocompletePicker/index.ts

@@ -16,6 +16,7 @@
 
 export { EntityAutocompletePicker } from './EntityAutocompletePicker';
 export type {
+  CatalogReactEntityAutocompletePickerClassKey,
   EntityAutocompletePickerProps,
   AllowedEntityFilters,
 } from './EntityAutocompletePicker';

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -44,10 +44,12 @@ import { withStyles } from '@material-ui/core/styles';
 import { useEntityPresentation } from '../../apis';
 
 /** @public */
-export type CatalogReactEntityOwnerPickerClassKey = 'input';
+export type CatalogReactEntityOwnerPickerClassKey = 'input' | 'root' | 'label';
 
 const useStyles = makeStyles(
   {
+    root: {},
+    label: {},
     input: {},
     fullWidth: { width: '100%' },
     boxLabel: {
@@ -174,8 +176,8 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
   }
 
   return (
-    <Box pb={1} pt={1}>
-      <Typography variant="button" component="label">
+    <Box className={classes.root} pb={1} pt={1}>
+      <Typography className={classes.label} variant="button" component="label">
         Owner
         <Autocomplete
           multiple

plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx

@@ -31,11 +31,16 @@ import { useEntityList } from '../../hooks';
 import { Autocomplete } from '@material-ui/lab';
 
 /** @public */
-export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
+export type CatalogReactEntityProcessingStatusPickerClassKey =
+  | 'input'
+  | 'root'
+  | 'label';
 
 const useStyles = makeStyles(
   {
+    root: {},
     input: {},
+    label: {},
   },
   {
     name: 'CatalogReactEntityProcessingStatusPickerPicker',
@@ -69,8 +74,8 @@ export const EntityProcessingStatusPicker = () => {
   const availableAdvancedItems = ['Is Orphan', 'Has Error'];
 
   return (
-    <Box pb={1} pt={1}>
-      <Typography variant="button" component="label">
+    <Box className={classes.root} pb={1} pt={1}>
+      <Typography className={classes.label} variant="button" component="label">
         Processing Status
         <Autocomplete<string, true>
           multiple

plugins/catalog-react/src/overridableComponents.ts

@@ -26,6 +26,7 @@ import {
   CatalogReactEntityOwnerPickerClassKey,
   CatalogReactEntityProcessingStatusPickerClassKey,
 } from './components';
+import { CatalogReactEntityAutocompletePickerClassKey } from './components/EntityAutocompletePicker/EntityAutocompletePicker';
 
 /** @public */
 export type CatalogReactComponentsNameToClassKey = {
@@ -36,6 +37,7 @@ export type CatalogReactComponentsNameToClassKey = {
   CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
   CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
   CatalogReactEntityProcessingStatusPicker: CatalogReactEntityProcessingStatusPickerClassKey;
+  CatalogReactEntityAutocompletePickerClassKey: CatalogReactEntityAutocompletePickerClassKey;
 };
 
 /** @public */

plugins/scaffolder-react/api-report-alpha.md

@@ -16,6 +16,7 @@ import { IconComponent } from '@backstage/core-plugin-api';
 import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
 import { LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import { Overrides } from '@material-ui/core/styles/overrides';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
@@ -25,6 +26,7 @@ import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderStep } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
 import { SetStateAction } from 'react';
+import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';
@@ -32,6 +34,13 @@ import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react';
 import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { UiSchema } from '@rjsf/utils';
 
+// @alpha (undocumented)
+export type BackstageOverrides = Overrides & {
+  [Name in keyof ScaffolderReactComponentsNameToClassKey]?: Partial<
+    StyleRules<ScaffolderReactComponentsNameToClassKey[Name]>
+  >;
+};
+
 // @alpha (undocumented)
 export const createAsyncValidators: (
   rootSchema: JsonObject,
@@ -132,6 +141,14 @@ export type ScaffolderPageContextMenuProps = {
   onCreateClicked?: () => void;
 };
 
+// @alpha (undocumented)
+export type ScaffolderReactComponentsNameToClassKey = {
+  ScaffolderReactTemplateCategoryPicker: ScaffolderReactTemplateCategoryPickerClassKey;
+};
+
+// @alpha (undocumented)
+export type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label';
+
 // @alpha
 export const Stepper: (stepperProps: StepperProps) => React_2.JSX.Element;
 

plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx

@@ -23,6 +23,7 @@ import {
   FormControlLabel,
   TextField,
   Typography,
+  makeStyles,
 } from '@material-ui/core';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -34,12 +35,24 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
+/** @alpha */
+export type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label';
+
+const useStyles = makeStyles(
+  {
+    root: {},
+    label: {},
+  },
+  { name: 'ScaffolderReactTemplateCategoryPicker' },
+);
+
 /**
  * The Category Picker that is rendered on the left side for picking
  * categories and filtering the template list.
  * @alpha
  */
 export const TemplateCategoryPicker = () => {
+  const classes = useStyles();
   const alertApi = useApi(alertApiRef);
   const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =
     useEntityTypeFilter();
@@ -57,8 +70,9 @@ export const TemplateCategoryPicker = () => {
   if (!availableTypes) return null;
 
   return (
-    <Box pb={1} pt={1}>
+    <Box className={classes.root} pb={1} pt={1}>
       <Typography
+        className={classes.label}
         variant="button"
         component="label"
         htmlFor="categories-picker"

plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { TemplateCategoryPicker } from './TemplateCategoryPicker';
+export type { ScaffolderReactTemplateCategoryPickerClassKey } from './TemplateCategoryPicker';

plugins/scaffolder-react/src/next/index.ts

@@ -16,3 +16,4 @@
 export * from './components';
 export * from './lib';
 export * from './hooks';
+export * from './overridableComponents';

plugins/scaffolder-react/src/next/overridableComponents.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Overrides } from '@material-ui/core/styles/overrides';
+import { StyleRules } from '@material-ui/core/styles/withStyles';
+import { ScaffolderReactTemplateCategoryPickerClassKey } from './components/TemplateCategoryPicker/TemplateCategoryPicker';
+
+/** @alpha */
+export type ScaffolderReactComponentsNameToClassKey = {
+  ScaffolderReactTemplateCategoryPicker: ScaffolderReactTemplateCategoryPickerClassKey;
+};
+
+/** @alpha */
+export type BackstageOverrides = Overrides & {
+  [Name in keyof ScaffolderReactComponentsNameToClassKey]?: Partial<
+    StyleRules<ScaffolderReactComponentsNameToClassKey[Name]>
+  >;
+};
+
+declare module '@backstage/theme' {
+  interface OverrideComponentNameToClassKeys
+    extends ScaffolderReactComponentsNameToClassKey {}
+}