From 81750cfc346e0c8835dc5df896b8b199eb585a2d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 24 Jun 2025 08:47:41 +0100 Subject: [PATCH] Fix class names Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 11 +++-- .../components/SearchField/SearchField.tsx | 40 ++++++++++++----- .../src/components/TextField/TextField.tsx | 6 +-- .../canon/src/hooks/useResponsiveValue.ts | 43 ------------------- .../canon/src/utils/componentDefinitions.ts | 11 +++-- 5 files changed, 47 insertions(+), 64 deletions(-) delete mode 100644 packages/canon/src/hooks/useResponsiveValue.ts diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 9e69fb226a..d444c136cd 100644 --- a/packages/canon/report.api.md +++ b/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]; diff --git a/packages/canon/src/components/SearchField/SearchField.tsx b/packages/canon/src/components/SearchField/SearchField.tsx index 5b25b6fb99..7af3e92de4 100644 --- a/packages/canon/src/components/SearchField/SearchField.tsx +++ b/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( } }, [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( return ( ( secondaryLabel={secondaryLabelText} description={description} /> -
+
{icon !== false && ( - + ); }, diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx index 43d9bffc9b..067835a51c 100644 --- a/packages/canon/src/components/TextField/TextField.tsx +++ b/packages/canon/src/components/TextField/TextField.tsx @@ -48,7 +48,6 @@ export const TextField = forwardRef( } }, [label, ariaLabel, ariaLabelledBy]); - // Get the responsive value for the variant const { classNames, dataAttributes } = useStyles('TextField', { size, }); @@ -72,12 +71,12 @@ export const TextField = forwardRef( description={description} />
{icon && ( )} diff --git a/packages/canon/src/hooks/useResponsiveValue.ts b/packages/canon/src/hooks/useResponsiveValue.ts deleted file mode 100644 index 206306566f..0000000000 --- a/packages/canon/src/hooks/useResponsiveValue.ts +++ /dev/null @@ -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>; - -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; -}; diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts index 581c8b66b4..ce24c4cd8c 100644 --- a/packages/canon/src/utils/componentDefinitions.ts +++ b/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,