diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 237fd655cd..0533128712 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -774,9 +774,6 @@ export interface CheckboxProps extends Omit, CheckboxOwnProps {} -// @public -export type ClassNamesMap = Record; - // @public (undocumented) export const Column: (props: ColumnProps) => JSX_2.Element; @@ -833,16 +830,6 @@ export type Columns = | '12' | 'auto'; -// @public -export interface ComponentDefinition { - // (undocumented) - classNames: ClassNamesMap; - // (undocumented) - dataAttributes?: DataAttributesMap; - // (undocumented) - utilityProps?: string[]; -} - // @public (undocumented) export const Container: ForwardRefExoticComponent< ContainerProps & RefAttributes @@ -932,12 +919,6 @@ export interface CursorResponse { totalCount?: number; } -// @public -export type DataAttributesMap = Record; - -// @public -export type DataAttributeValues = readonly (string | number | boolean)[]; - // @public (undocumented) export const Dialog: ForwardRefExoticComponent< DialogProps & RefAttributes diff --git a/packages/ui/src/hooks/useStyles.ts b/packages/ui/src/hooks/useStyles.ts deleted file mode 100644 index 7bb25be651..0000000000 --- a/packages/ui/src/hooks/useStyles.ts +++ /dev/null @@ -1,111 +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 { useBreakpoint } from './useBreakpoint'; -import type { ComponentDefinition } from '../types'; -import { - resolveResponsiveValue, - processUtilityProps, -} from './useDefinition/helpers'; - -/** - * React hook to get class names and data attributes for a component with responsive support - * @param componentDefinition - The component's definition object - * @param props - All component props - * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps - */ -export function useStyles< - T extends ComponentDefinition, - P extends Record = Record, ->( - componentDefinition: T, - props: P = {} as P, -): { - classNames: T['classNames']; - dataAttributes: Record; - utilityClasses: string; - style: React.CSSProperties; - cleanedProps: P; -} { - const { breakpoint } = useBreakpoint(); - const classNames = componentDefinition.classNames; - const utilityPropNames = - ('utilityProps' in componentDefinition - ? componentDefinition.utilityProps - : []) || []; - - // Extract data attribute names from component definition - const dataAttributeNames = - 'dataAttributes' in componentDefinition - ? Object.keys(componentDefinition.dataAttributes || {}) - : []; - - // Extract existing style from props - const incomingStyle = props.style || {}; - - // Generate data attributes from component definition - const dataAttributes: Record = {}; - for (const key of dataAttributeNames) { - const value = props[key]; - if (value !== undefined && value !== null) { - // Handle boolean and number values directly - if (typeof value === 'boolean' || typeof value === 'number') { - dataAttributes[`data-${key}`] = String(value); - } else { - const resolvedValue = resolveResponsiveValue(value, breakpoint); - if (resolvedValue !== undefined) { - dataAttributes[`data-${key}`] = resolvedValue; - } - } - } - } - - // Generate utility classes and custom styles from component's allowed utility props - const { utilityClasses, utilityStyle: generatedStyle } = processUtilityProps( - props, - utilityPropNames, - ); - - // Create cleaned props by excluding only utility props - // All other props (including data attributes, style, children, etc.) remain - const utilityPropsSet = new Set(utilityPropNames); - - const cleanedPropsBase = Object.keys(props).reduce((acc, key) => { - if (!utilityPropsSet.has(key)) { - acc[key] = props[key]; - } - return acc; - }, {} as any); - - // Merge incoming style with generated styles (incoming styles take precedence) - const mergedStyle = { - ...generatedStyle, - ...incomingStyle, - }; - - // Add merged style to cleanedProps - const cleanedProps = { - ...cleanedPropsBase, - style: mergedStyle, - } as P; - - return { - classNames, - dataAttributes, - utilityClasses, - style: mergedStyle, - cleanedProps, - }; -} diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index af87bfb20b..7a302e1694 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -153,36 +153,9 @@ export interface UtilityProps extends SpaceProps { rowSpan?: Responsive; } -/** - * Base type for the component styles structure - * @public - */ -export type ClassNamesMap = Record; - -/** - * Base type for the component styles structure - * @public - */ -export type DataAttributeValues = readonly (string | number | boolean)[]; - -/** - * Base type for the component styles structure - * @public - */ -export type DataAttributesMap = Record; - -/** - * Base type for the component styles structure - * @public - */ -export interface ComponentDefinition { - classNames: ClassNamesMap; - dataAttributes?: DataAttributesMap; - utilityProps?: string[]; -} - /** * Resolved background level stored in context and applied as `data-bg` on DOM elements. + * Background type for the neutral bg system. * * Supports neutral levels ('neutral-1' through 'neutral-3') and * intent backgrounds ('danger', 'warning', 'success').