paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Delete useStyles hook and legacy type definitions

Browse Source 
All components have been migrated to useDefinition. Remove the now-unused
useStyles hook and its associated types (ComponentDefinition, ClassNamesMap,
DataAttributeValues, DataAttributesMap) from the public API.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-02-27 14:48:14 +01:00
parent 3f2c27a1e4
commit d8dbab6d17
3 changed files with 1 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/report.api.md
-19
View File
@@ -774,9 +774,6 @@ export interface CheckboxProps
extends Omit<CheckboxProps_2, 'children' | 'className'>,
CheckboxOwnProps {}
// @public
export type ClassNamesMap = Record<string, string>;
// @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<HTMLDivElement>
@@ -932,12 +919,6 @@ export interface CursorResponse<T> {
totalCount?: number;
}
// @public
export type DataAttributesMap = Record<string, DataAttributeValues>;
// @public
export type DataAttributeValues = readonly (string | number | boolean)[];
// @public (undocumented)
export const Dialog: ForwardRefExoticComponent<
DialogProps & RefAttributes<HTMLDivElement>
packages/ui/src/hooks/useStyles.ts
-111
View File
@@ -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<string, any> = Record<string, any>,
>(
componentDefinition: T,
props: P = {} as P,
): {
classNames: T['classNames'];
dataAttributes: Record<string, string>;
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<string, string> = {};
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<string>(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,
};
}
packages/ui/src/types.ts
+1 -28
View File
@@ -153,36 +153,9 @@ export interface UtilityProps extends SpaceProps {
rowSpan?: Responsive<Columns | 'full'>;
}
/**
* Base type for the component styles structure
* @public
*/
export type ClassNamesMap = Record<string, string>;
/**
* 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<string, DataAttributeValues>;
/**
* 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').