Fix class names

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/report.api.md

@@ -421,6 +421,12 @@ export const componentDefinitions: {
       readonly thumb: 'canon-ScrollAreaThumb';
     };
   };
+  readonly SearchField: {
+    readonly classNames: {
+      readonly root: 'canon-SearchField';
+      readonly clear: 'canon-InputClear';
+    };
+  };
   readonly Select: {
     readonly classNames: {
       readonly root: 'canon-Select';
@@ -493,9 +499,8 @@ export const componentDefinitions: {
   readonly TextField: {
     readonly classNames: {
       readonly root: 'canon-TextField';
-      readonly inputWrapper: 'canon-TextFieldInputWrapper';
-      readonly icon: 'canon-TextFieldIcon';
-      readonly input: 'canon-TextFieldInput';
+      readonly input: 'canon-Input';
+      readonly inputIcon: 'canon-InputIcon';
     };
     readonly dataAttributes: {
       readonly invalid: readonly [true, false];

packages/canon/src/components/SearchField/SearchField.tsx

@@ -18,13 +18,13 @@ import { forwardRef, useEffect } from 'react';
 import {
   Input,
   SearchField as AriaSearchField,
-  FieldError,
   Button,
 } from 'react-aria-components';
-import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel';
+import { FieldError } from '../FieldError';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
+import { useStyles } from '../../hooks/useStyles';
 
 import type { SearchFieldProps } from './types';
 
@@ -53,8 +53,16 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
 
-    // Get the responsive value for the variant
-    const responsiveSize = useResponsiveValue(size);
+    const { classNames: textFieldClassNames, dataAttributes } = useStyles(
+      'TextField',
+      {
+        size,
+      },
+    );
+
+    const { classNames: searchFieldClassNames } = useStyles('SearchField', {
+      size,
+    });
 
     // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
     const secondaryLabelText =
@@ -62,8 +70,12 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
 
     return (
       <AriaSearchField
-        className={clsx('canon-TextField', 'canon-SearchField', className)}
-        data-size={responsiveSize}
+        className={clsx(
+          textFieldClassNames.root,
+          searchFieldClassNames.root,
+          className,
+        )}
+        {...dataAttributes}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         {...rest}
@@ -74,11 +86,14 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           secondaryLabel={secondaryLabelText}
           description={description}
         />
-        <div className="canon-Input" data-size={responsiveSize}>
+        <div
+          className={textFieldClassNames.input}
+          data-size={dataAttributes['data-size']}
+        >
           {icon !== false && (
             <div
-              className="canon-InputIcon"
-              data-size={responsiveSize}
+              className={textFieldClassNames.inputIcon}
+              data-size={dataAttributes['data-size']}
               aria-hidden="true"
             >
               {icon || <RiSearch2Line />}
@@ -88,11 +103,14 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
             {...(icon !== false && { 'data-icon': true })}
             placeholder={placeholder}
           />
-          <Button className="canon-InputClear" data-size={responsiveSize}>
+          <Button
+            className={searchFieldClassNames.clear}
+            data-size={dataAttributes['data-size']}
+          >
             <RiCloseCircleLine />
           </Button>
         </div>
-        <FieldError className="canon-TextFieldError" />
+        <FieldError />
       </AriaSearchField>
     );
   },

packages/canon/src/components/TextField/TextField.tsx

@@ -48,7 +48,6 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
 
-    // Get the responsive value for the variant
     const { classNames, dataAttributes } = useStyles('TextField', {
       size,
     });
@@ -72,12 +71,12 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           description={description}
         />
         <div
-          className={classNames.inputWrapper}
+          className={classNames.input}
           data-size={dataAttributes['data-size']}
         >
           {icon && (
             <div
-              className={classNames.icon}
+              className={classNames.inputIcon}
               data-size={dataAttributes['data-size']}
               aria-hidden="true"
             >
@@ -85,7 +84,6 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
             </div>
           )}
           <Input
-            className={classNames.input}
             {...(icon && { 'data-icon': true })}
             placeholder={placeholder}
           />

packages/canon/src/hooks/useResponsiveValue.ts

@@ -1,43 +0,0 @@
-/*
- * Copyright 2025 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 type { Breakpoint } from '../types';
-import { useBreakpoint, breakpoints } from './useBreakpoint';
-
-type ResponsiveValue = string | Partial<Record<Breakpoint, string>>;
-
-export const useResponsiveValue = (value: ResponsiveValue) => {
-  const { breakpoint } = useBreakpoint();
-
-  if (typeof value === 'object') {
-    const index = breakpoints.findIndex(b => b.id === breakpoint);
-
-    for (let i = index; i >= 0; i--) {
-      if (value[breakpoints[i].id]) {
-        return value[breakpoints[i].id] as string;
-      }
-    }
-
-    // If no value is found for the current or smaller breakpoints, check from the smallest
-    for (let i = 0; i < breakpoints.length; i++) {
-      if (value[breakpoints[i].id]) {
-        return value[breakpoints[i].id] as string;
-      }
-    }
-  }
-
-  return value;
-};

packages/canon/src/utils/componentDefinitions.ts

@@ -154,6 +154,12 @@ export const componentDefinitions = {
       thumb: 'canon-ScrollAreaThumb',
     },
   },
+  SearchField: {
+    classNames: {
+      root: 'canon-SearchField',
+      clear: 'canon-InputClear',
+    },
+  },
   Select: {
     classNames: {
       root: 'canon-Select',
@@ -220,9 +226,8 @@ export const componentDefinitions = {
   TextField: {
     classNames: {
       root: 'canon-TextField',
-      inputWrapper: 'canon-TextFieldInputWrapper',
-      icon: 'canon-TextFieldIcon',
-      input: 'canon-TextFieldInput',
+      input: 'canon-Input',
+      inputIcon: 'canon-InputIcon',
     },
     dataAttributes: {
       invalid: [true, false] as const,