From b5c487a70192cbfd0c8089e15c77bf06e596af6b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Feb 2026 14:28:44 +0000 Subject: [PATCH] Update after feedbacks Signed-off-by: Charles de Dreuille --- .changeset/clean-bags-occur.md | 12 ++++++- .../components/ToggleButton/ToggleButton.tsx | 2 +- packages/ui/src/hooks/useBg.tsx | 35 +++++++++---------- packages/ui/src/hooks/useDefinition/index.ts | 1 - packages/ui/src/hooks/useDefinition/types.ts | 9 +++-- .../src/hooks/useDefinition/useDefinition.tsx | 8 +---- 6 files changed, 33 insertions(+), 34 deletions(-) diff --git a/.changeset/clean-bags-occur.md b/.changeset/clean-bags-occur.md index d7fd8c4be8..b6e1a1c329 100644 --- a/.changeset/clean-bags-occur.md +++ b/.changeset/clean-bags-occur.md @@ -66,4 +66,14 @@ Replace hook usage in custom components: + const { bg } = useBg({ mode: 'leaf' }); ``` -**Affected components:** box, button, button-icon, button-link, toggle-button, card, alert, flex, grid +Update CSS selectors targeting surface data attributes: + +```diff +- [data-surface='1'] { ... } ++ [data-bg='neutral-1'] { ... } + +- [data-on-surface='2'] { ... } ++ [data-bg='neutral-2'] { ... } +``` + +**Affected components:** Box, Button, ButtonIcon, ButtonLink, ToggleButton, Card, Alert, Flex, Grid diff --git a/packages/ui/src/components/ToggleButton/ToggleButton.tsx b/packages/ui/src/components/ToggleButton/ToggleButton.tsx index 188d1a5318..612db4945c 100644 --- a/packages/ui/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/ui/src/components/ToggleButton/ToggleButton.tsx @@ -43,7 +43,7 @@ export const ToggleButton = forwardRef( className={clsx(classNames.root, styles[classNames.root], className)} ref={ref} {...dataAttributes} - {...(typeof bg === 'string' ? { 'data-bg': bg } : {})} + {...(bg ? { 'data-bg': bg } : {})} {...rest} > {renderProps => { diff --git a/packages/ui/src/hooks/useBg.tsx b/packages/ui/src/hooks/useBg.tsx index 0204e9ae36..7a681f9b19 100644 --- a/packages/ui/src/hooks/useBg.tsx +++ b/packages/ui/src/hooks/useBg.tsx @@ -20,15 +20,17 @@ import { createVersionedValueMap, } from '@backstage/version-bridge'; import { Bg, Responsive } from '../types'; +import { useBreakpoint } from './useBreakpoint'; +import { resolveResponsiveValue } from './useDefinition/helpers'; /** @public */ export interface BgContextValue { - bg: Responsive | undefined; + bg: Bg | undefined; } /** @public */ export interface BgProviderProps { - bg: Responsive; + bg: Bg; children: ReactNode; } @@ -82,9 +84,9 @@ function incrementNeutralBg(bg: Bg | undefined): Bg | undefined { * @internal */ function resolveBgForContainer( - contextBg: Responsive | undefined, - propBg: Responsive | undefined, -): Responsive | undefined { + contextBg: Bg | undefined, + propBg: Bg | undefined, +): Bg | undefined { // Explicit bg prop takes priority if (propBg !== undefined) { return propBg; @@ -95,11 +97,6 @@ function resolveBgForContainer( return undefined; } - // If context is a responsive object, we can't auto-increment - if (typeof contextBg === 'object') { - return undefined; - } - return incrementNeutralBg(contextBg); } @@ -110,18 +107,11 @@ function resolveBgForContainer( * * @internal */ -function resolveBgForLeaf( - contextBg: Responsive | undefined, -): Responsive | undefined { +function resolveBgForLeaf(contextBg: Bg | undefined): Bg | undefined { if (contextBg === undefined) { return undefined; } - // If context is a responsive object, we can't auto-increment - if (typeof contextBg === 'object') { - return undefined; - } - return incrementNeutralBg(contextBg); } @@ -153,6 +143,7 @@ export const BgProvider = ({ bg, children }: BgProviderProps) => { * @public */ export const useBg = (options?: UseBgOptions): BgContextValue => { + const { breakpoint } = useBreakpoint(); const value = useContext(BgContext)?.atVersion(1); const context = value ?? { bg: undefined }; @@ -160,9 +151,15 @@ export const useBg = (options?: UseBgOptions): BgContextValue => { return context; } + // Resolve responsive prop value to a scalar for the current breakpoint + const resolvedPropBg = + options.bg !== undefined + ? resolveResponsiveValue(options.bg, breakpoint) + : undefined; + if (options.mode === 'leaf') { return { bg: resolveBgForLeaf(context.bg) }; } - return { bg: resolveBgForContainer(context.bg, options.bg) }; + return { bg: resolveBgForContainer(context.bg, resolvedPropBg) }; }; diff --git a/packages/ui/src/hooks/useDefinition/index.ts b/packages/ui/src/hooks/useDefinition/index.ts index 533b7f8e21..a180645975 100644 --- a/packages/ui/src/hooks/useDefinition/index.ts +++ b/packages/ui/src/hooks/useDefinition/index.ts @@ -21,5 +21,4 @@ export type { PropDefConfig, UseDefinitionOptions, UseDefinitionResult, - BgPropsConstraint, } from './types'; diff --git a/packages/ui/src/hooks/useDefinition/types.ts b/packages/ui/src/hooks/useDefinition/types.ts index 1249e8e3db..d7fe0aaf98 100644 --- a/packages/ui/src/hooks/useDefinition/types.ts +++ b/packages/ui/src/hooks/useDefinition/types.ts @@ -75,11 +75,10 @@ type ResolvedOwnProps< [K in keyof PropDefs & keyof P]: ResolvePropType; }; -type ChildrenProps< - BgMode extends 'container' | 'leaf' | undefined = undefined, -> = BgMode extends 'container' - ? { bgChildren: ReactNode; children?: never } - : { children: ReactNode; bgChildren?: never }; +type ChildrenProps = + BgMode extends 'container' + ? { bgChildren: ReactNode; children?: never } + : { children: ReactNode; bgChildren?: never }; type DataAttributeKeys = { [K in keyof PropDefs]: PropDefs[K] extends { dataAttribute: true } diff --git a/packages/ui/src/hooks/useDefinition/useDefinition.tsx b/packages/ui/src/hooks/useDefinition/useDefinition.tsx index ffa885f51e..4de6d40443 100644 --- a/packages/ui/src/hooks/useDefinition/useDefinition.tsx +++ b/packages/ui/src/hooks/useDefinition/useDefinition.tsx @@ -74,13 +74,7 @@ export function useDefinition< // Set data-bg from the resolved bg value (works for both container and leaf) if (definition.bg && resolvedBg !== undefined) { - const bgValue = - typeof resolvedBg === 'object' - ? resolveResponsiveValue(resolvedBg as any, breakpoint) - : resolvedBg; - if (bgValue !== undefined) { - dataAttributes['data-bg'] = String(bgValue); - } + dataAttributes['data-bg'] = String(resolvedBg); } const { utilityClasses, utilityStyle } = processUtilityProps>(