From 95702abc2bb917d00b23db688f15b917777f49bd Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Fri, 27 Feb 2026 15:28:21 +0100 Subject: [PATCH] Add changesets for useDefinition migration and cleanup Signed-off-by: Johan Persson --- .changeset/calm-vans-play.md | 7 +++++++ .changeset/heavy-baths-mix.md | 7 +++++++ .changeset/lucky-baboons-follow.md | 15 +++++++++++++++ .changeset/major-jeans-repair.md | 7 ------- .../src/components/VisuallyHidden/definition.ts | 7 +++---- 5 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 .changeset/calm-vans-play.md create mode 100644 .changeset/heavy-baths-mix.md create mode 100644 .changeset/lucky-baboons-follow.md delete mode 100644 .changeset/major-jeans-repair.md diff --git a/.changeset/calm-vans-play.md b/.changeset/calm-vans-play.md new file mode 100644 index 0000000000..0b7571da7b --- /dev/null +++ b/.changeset/calm-vans-play.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Migrated all components from `useStyles` to `useDefinition` hook. Exported `OwnProps` types for each component, enabling better type composition for consumers. + +**Affected components:** Avatar, Checkbox, Container, Dialog, FieldError, FieldLabel, Flex, FullPage, Grid, HeaderPage, Link, Menu, PasswordField, PluginHeader, Popover, RadioGroup, SearchField, Select, Skeleton, Switch, Table, TablePagination, Tabs, TagGroup, Text, TextField, ToggleButton, ToggleButtonGroup, Tooltip, VisuallyHidden diff --git a/.changeset/heavy-baths-mix.md b/.changeset/heavy-baths-mix.md new file mode 100644 index 0000000000..8f5409e317 --- /dev/null +++ b/.changeset/heavy-baths-mix.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed Link variant default from `'body'` to `'body-medium'` to match actual CSS selectors. The previous default did not correspond to a valid variant value. + +**Affected components:** Link diff --git a/.changeset/lucky-baboons-follow.md b/.changeset/lucky-baboons-follow.md new file mode 100644 index 0000000000..0a9453b764 --- /dev/null +++ b/.changeset/lucky-baboons-follow.md @@ -0,0 +1,15 @@ +--- +'@backstage/ui': minor +--- + +**BREAKING**: Removed deprecated types `ComponentDefinition`, `ClassNamesMap`, `DataAttributeValues`, and `DataAttributesMap` from the public API. These were internal styling infrastructure types that have been replaced by the `defineComponent` system. + +**Migration:** + +Remove any direct usage of these types. Component definitions now use `defineComponent()` and their shapes are not part of the public API contract. + +```diff +- import type { ComponentDefinition, ClassNamesMap } from '@backstage/ui'; +``` + +If you were reading `definition.dataAttributes`, use `definition.propDefs` instead — props with `dataAttribute: true` in `propDefs` are the equivalent. diff --git a/.changeset/major-jeans-repair.md b/.changeset/major-jeans-repair.md deleted file mode 100644 index 365ddf856f..0000000000 --- a/.changeset/major-jeans-repair.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@backstage/ui': patch ---- - -Migrated Avatar, Checkbox, Container, FieldError, FieldLabel, Link, and Skeleton components from `useStyles` to `useDefinition` hook. Exported `OwnProps` types for each migrated component. Fixed Link variant default from `'body'` to `'body-medium'` to match actual CSS selectors. - -**Affected components:** Avatar, Checkbox, Container, FieldError, FieldLabel, Link, Skeleton diff --git a/packages/ui/src/components/VisuallyHidden/definition.ts b/packages/ui/src/components/VisuallyHidden/definition.ts index b7f5a3d767..c7aaf0a6da 100644 --- a/packages/ui/src/components/VisuallyHidden/definition.ts +++ b/packages/ui/src/components/VisuallyHidden/definition.ts @@ -22,8 +22,8 @@ import styles from './VisuallyHidden.module.css'; * Component definition for VisuallyHidden * @public */ -export const VisuallyHiddenDefinition = defineComponent()( - { +export const VisuallyHiddenDefinition = + defineComponent()({ styles, classNames: { root: 'bui-VisuallyHidden', @@ -31,5 +31,4 @@ export const VisuallyHiddenDefinition = defineComponent( propDefs: { className: {}, }, - }, -); + });