fix: add classNames

Author: FabienMotte

packages/instantsearch-ui-components/src/components/FilterPill.tsx

@@ -3,35 +3,67 @@ import { cx } from '../lib/cx';
 
 import type { Renderer } from '../types';
 
+export type FilterPillClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root?: string | string[];
+  /**
+   * Class names to apply to the label element
+   */
+  label?: string | string[];
+  /**
+   * Class names to apply to the value element
+   */
+  value?: string | string[];
+  /**
+   * Class names to apply to the count element
+   */
+  count?: string | string[];
+};
+
 export type FilterPillProps = {
   label: string;
   value: string;
   count: number;
   isRefined: boolean;
   onClick: () => void;
-  className?: string;
+  classNames?: Partial<FilterPillClassNames>;
   key?: string;
 };
 
 export function createFilterPillComponent({
   createElement,
 }: Pick<Renderer, 'createElement'>) {
   return function FilterPill(userProps: FilterPillProps) {
-    const { label, value, count, isRefined, onClick, className } = userProps;
+    const {
+      label,
+      value,
+      count,
+      isRefined,
+      onClick,
+      classNames = {},
+    } = userProps;
 
     return (
       <button
         className={cx(
           'ais-FilterPill',
           isRefined && 'ais-FilterPill--refined',
-          className
+          classNames.root
         )}
         onClick={onClick}
         type="button"
       >
-        <span className="ais-FilterPill-label">{label}:</span>
-        <span className="ais-FilterPill-value">{value}</span>
-        <span className="ais-FilterPill-count">({count})</span>
+        <span className={cx('ais-FilterPill-label', classNames.label)}>
+          {label}:
+        </span>
+        <span className={cx('ais-FilterPill-value', classNames.value)}>
+          {value}
+        </span>
+        <span className={cx('ais-FilterPill-count', classNames.count)}>
+          ({count})
+        </span>
       </button>
     );
   };

packages/instantsearch-ui-components/src/components/SuggestedFilters.tsx

@@ -13,11 +13,26 @@ export type SuggestedFilter = {
   count: number;
 };
 
+export type SuggestedFiltersClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root?: string | string[];
+  /**
+   * Class names to apply to the header element
+   */
+  header?: string | string[];
+  /**
+   * Class names to apply to the filters list element
+   */
+  list?: string | string[];
+};
+
 export type SuggestedFiltersProps = {
   filters: SuggestedFilter[];
   onFilterClick: (attribute: string, value: string, isRefined: boolean) => void;
   indexUiState: object;
-  className?: string;
+  classNames?: Partial<SuggestedFiltersClassNames>;
 };
 
 export function createSuggestedFiltersComponent({
@@ -28,7 +43,7 @@ export function createSuggestedFiltersComponent({
   });
 
   return function SuggestedFilters(userProps: SuggestedFiltersProps) {
-    const { filters, onFilterClick, indexUiState, className } = userProps;
+    const { filters, onFilterClick, indexUiState, classNames = {} } = userProps;
 
     if (filters.length === 0) {
       return null;
@@ -44,9 +59,11 @@ export function createSuggestedFiltersComponent({
     };
 
     return (
-      <div className={cx('ais-ChatToolSuggestedFilters', className)}>
-        <div className="ais-SuggestedFilters-header">Suggested Filters</div>
-        <div className="ais-SuggestedFilters">
+      <div className={cx('ais-ChatToolSuggestedFilters', classNames.root)}>
+        <div className={cx('ais-SuggestedFilters-header', classNames.header)}>
+          Suggested Filters
+        </div>
+        <div className={cx('ais-SuggestedFilters', classNames.list)}>
           {filters.map((filter) => {
             const refined = isRefined(filter.attribute, filter.value);
             return (

packages/instantsearch-ui-components/src/components/chat/ChatHeader.tsx

@@ -47,6 +47,10 @@ export type ChatHeaderClassNames = {
    * Class names to apply to the title icon element
    */
   titleIcon?: string | string[];
+  /**
+   * Class names to apply to the actions container element
+   */
+  actions?: string | string[];
   /**
    * Class names to apply to the maximize button element
    */
@@ -159,7 +163,7 @@ export function createChatHeaderComponent({ createElement }: Renderer) {
           </span>
           {translations.title}
         </span>
-        <div className={cx('ais-ChatHeader-actions')}>
+        <div className={cx('ais-ChatHeader-actions', classNames.actions)}>
           {onClear && (
             <Button
               variant="ghost"