Don't fallback to name on label to help clarify the different uses for each and allow label-less filters.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
2022-01-12 10:59:51 +01:00
parent 21705f6432
commit 1dbe63ec39
7 changed files with 74 additions and 24 deletions
@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-search': minor
+---
+
+The way labels are controlled on both the `<SearchFilter.Checkbox />` and
+`<SearchFilter.Select />` components has changed. Previously, the string passed
+on the `name` prop (which controls the field being filtered on) was also
+rendered as the field label. Now, if you want a label rendered, it must be
+passed on the new `label` prop. If no `label` is provided, no label will be
+rendered.
@@ -0,0 +1,27 @@
+---
+'@backstage/create-app': patch
+---
+
+A `label` prop was added to `<SearchFilter.* />` components in order to allow
+user-friendly label strings (as well as the option to omit a label). In order
+to maintain labels on your existing filters, add a `label` prop to them in your
+`SearchPage.tsx`.
+
+```diff
+--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
+@@ -96,11 +96,13 @@ const SearchPage = () => {
+               )}
+               <SearchFilter.Select
+                 className={classes.filter}
+                label="Kind"
+                 name="kind"
+                 values={['Component', 'Template']}
+               />
+               <SearchFilter.Checkbox
+                 className={classes.filter}
+                label="Lifecycle"
+                 name="lifecycle"
+                 values={['experimental', 'production']}
+               />
+```