Added root and label class keys for autocomplete pickers

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

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 {}
+}