Expose styling of facet headers in FilterGroup (#321)

* Expose styling of facet headers in FilterGroup * Automated update to repo's documentation from github action * useMemo * move merge out of memo Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
yext · Nov 7, 2022 · 99a9542 · 99a9542
1 parent c24ae51
commit 99a9542
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,6 @@ lib/
 # testing
 /coverage
 /storybook-static
+
+.env
+test-site/.env
diff --git a/docs/search-ui-react.filtergroupcssclasses.md b/docs/search-ui-react.filtergroupcssclasses.md
@@ -21,4 +21,5 @@ export interface FilterGroupCssClasses
 |  [optionLabel?](./search-ui-react.filtergroupcssclasses.optionlabel.md) | string | <i>(Optional)</i> |
 |  [optionsContainer?](./search-ui-react.filtergroupcssclasses.optionscontainer.md) | string | <i>(Optional)</i> |
 |  [searchInput?](./search-ui-react.filtergroupcssclasses.searchinput.md) | string | <i>(Optional)</i> |
+|  [titleLabel?](./search-ui-react.filtergroupcssclasses.titlelabel.md) | string | <i>(Optional)</i> |
 
diff --git a/docs/search-ui-react.filtergroupcssclasses.titlelabel.md b/docs/search-ui-react.filtergroupcssclasses.titlelabel.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) &gt; [titleLabel](./search-ui-react.filtergroupcssclasses.titlelabel.md)
+
+## FilterGroupCssClasses.titleLabel property
+
+<b>Signature:</b>
+
+```typescript
+titleLabel?: string;
+```
diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md
@@ -204,6 +204,8 @@ export interface FilterGroupCssClasses {
     optionsContainer?: string;
     // (undocumented)
     searchInput?: string;
+    // (undocumented)
+    titleLabel?: string;
 }
 
 // @public

diff --git a/src/components/FilterGroup.tsx b/src/components/FilterGroup.tsx
@@ -1,8 +1,11 @@
 import { useSearchUtilities } from '@yext/search-headless-react';
 import { PropsWithChildren, useMemo, useState } from 'react';
+import { twMerge } from '../hooks/useComposedCssClasses';
 import {
   CheckboxOption,
   CollapsibleLabel,
+  CollapsibleLabelCssClasses,
+  builtInCollapsibleLabelCssClasses,
   CollapsibleSection,
   FilterOptionConfig,
   SearchInput,
@@ -17,6 +20,7 @@ import {
  * @public
  */
 export interface FilterGroupCssClasses {
+  titleLabel?: string,
   searchInput?: string,
   optionsContainer?: string,
   option?: string,
@@ -75,11 +79,17 @@ export function FilterGroup({
     };
   }, [customCssClasses]);
 
+  const collapsibleLabelCssClasses: CollapsibleLabelCssClasses = useMemo(() => {
+    return {
+      label: cssClasses.titleLabel
+    };
+  }, [cssClasses]);
+
   function renderTitle() {
     return collapsible
-      ? <CollapsibleLabel label={title} />
+      ? <CollapsibleLabel label={title} customCssClasses={collapsibleLabelCssClasses} />
       : (title &&
-        <div className='text-neutral-dark text-sm font-medium text-left mb-4'>
+        <div className={twMerge('mb-4', builtInCollapsibleLabelCssClasses.label, collapsibleLabelCssClasses.label)}>
           {title}
         </div>);
   }

diff --git a/src/components/Filters/CollapsibleLabel.tsx b/src/components/Filters/CollapsibleLabel.tsx
@@ -1,6 +1,16 @@
 import classNames from 'classnames';
 import { ChevronIcon } from '../../icons/ChevronIcon';
 import { useFilterGroupContext } from './FilterGroupContext';
+import { useComposedCssClasses } from '../../hooks/useComposedCssClasses';
+
+/**
+ * The CSS class interface for {@link CollapsibleLabelProps}.
+ *
+ * @public
+ */
+export interface CollapsibleLabelCssClasses {
+  label?: string
+}
 
 /**
  * Props for {@link Filters.CollapsibleLabel}.
@@ -9,9 +19,15 @@ import { useFilterGroupContext } from './FilterGroupContext';
  */
 export interface CollapsibleLabelProps {
   /** The label's text value which is displayed by the component. */
-  label?: string
+  label?: string,
+  /** CSS classes for customizing the component styling. */
+  customCssClasses?: CollapsibleLabelCssClasses
 }
 
+export const builtInCssClasses: Readonly<CollapsibleLabelCssClasses> = {
+  label: 'text-neutral-dark text-sm font-medium text-left',
+};
+
 /**
  * CollapsibleLabel is a button for collapsing and expanding filters within a parent
  * {@link Filters.FilterGroupProvider}.
@@ -22,15 +38,16 @@ export interface CollapsibleLabelProps {
  *
  * @public
  */
-export function CollapsibleLabel({ label }: CollapsibleLabelProps): JSX.Element {
+export function CollapsibleLabel({ label, customCssClasses }: CollapsibleLabelProps): JSX.Element {
   const { isExpanded, getToggleProps } = useFilterGroupContext();
   const iconClassName = classNames('w-3 text-gray-400', {
     'transform rotate-180': !isExpanded
   });
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
   return (
     <button className='w-full flex justify-between items-center mb-4' {...getToggleProps()}>
-      <div className='text-neutral-dark text-sm font-medium text-left'>
+      <div className={cssClasses.label}>
         {label}
       </div>
       <ChevronIcon className={iconClassName}/>

diff --git a/src/components/Filters/index.ts b/src/components/Filters/index.ts
@@ -1,5 +1,5 @@
 export { CheckboxOption, CheckboxOptionProps, CheckboxCssClasses, FilterOptionConfig } from './CheckboxOption';
-export { CollapsibleLabel, CollapsibleLabelProps } from './CollapsibleLabel';
+export { CollapsibleLabel, CollapsibleLabelProps, CollapsibleLabelCssClasses, builtInCssClasses as builtInCollapsibleLabelCssClasses } from './CollapsibleLabel';
 export { CollapsibleSection, CollapsibleSectionProps } from './CollapsibleSection';
 export { FacetsProvider, FacetsProviderProps } from './FacetsProvider';
 export { FiltersContext, useFiltersContext, FiltersContextType } from './FiltersContext';