(
}, [label, ariaLabel, ariaLabelledBy]);
const { classNames, dataAttributes, style, cleanedProps } = useStyles(
- 'SearchField',
+ SearchFieldDefinition,
{
size: 'small',
placeholder: 'Search',
diff --git a/packages/ui/src/components/SearchField/definition.ts b/packages/ui/src/components/SearchField/definition.ts
new file mode 100644
index 0000000000..7de1411bb4
--- /dev/null
+++ b/packages/ui/src/components/SearchField/definition.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for SearchField
+ * @public
+ */
+export const SearchFieldDefinition = {
+ classNames: {
+ root: 'bui-SearchField',
+ clear: 'bui-SearchFieldClear',
+ inputWrapper: 'bui-SearchFieldInputWrapper',
+ input: 'bui-SearchFieldInput',
+ inputIcon: 'bui-SearchFieldInputIcon',
+ },
+ dataAttributes: {
+ startCollapsed: [true, false] as const,
+ size: ['small', 'medium'] as const,
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/SearchField/index.ts b/packages/ui/src/components/SearchField/index.ts
index 288c3fe44a..9e01b47fc1 100644
--- a/packages/ui/src/components/SearchField/index.ts
+++ b/packages/ui/src/components/SearchField/index.ts
@@ -16,3 +16,4 @@
export * from './SearchField';
export * from './types';
+export { SearchFieldDefinition } from './definition';
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index 0b133d07c5..04231d1cd9 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -19,6 +19,8 @@ import { Select as AriaSelect, Popover } from 'react-aria-components';
import clsx from 'clsx';
import { SelectProps } from './types';
import { useStyles } from '../../hooks/useStyles';
+import { SelectDefinition } from './definition';
+import { PopoverDefinition } from '../Popover/definition';
import { FieldLabel } from '../FieldLabel';
import { FieldError } from '../FieldError';
import styles from './Select.module.css';
@@ -31,12 +33,15 @@ export const Select = forwardRef<
HTMLDivElement,
SelectProps<'single' | 'multiple'>
>((props, ref) => {
- const { classNames: popoverClassNames } = useStyles('Popover');
- const { classNames, dataAttributes, cleanedProps } = useStyles('Select', {
- size: 'small',
- placeholder: 'Select an option',
- ...props,
- });
+ const { classNames: popoverClassNames } = useStyles(PopoverDefinition);
+ const { classNames, dataAttributes, cleanedProps } = useStyles(
+ SelectDefinition,
+ {
+ size: 'small',
+ placeholder: 'Select an option',
+ ...props,
+ },
+ );
const {
className,
diff --git a/packages/ui/src/components/Select/SelectContent.tsx b/packages/ui/src/components/Select/SelectContent.tsx
index 42070321a3..7f63ad2a0a 100644
--- a/packages/ui/src/components/Select/SelectContent.tsx
+++ b/packages/ui/src/components/Select/SelectContent.tsx
@@ -24,6 +24,7 @@ import { useFilter } from 'react-aria';
import { RiCloseCircleLine } from '@remixicon/react';
import clsx from 'clsx';
import { useStyles } from '../../hooks/useStyles';
+import { SelectDefinition } from './definition';
import { SelectListBox } from './SelectListBox';
import styles from './Select.module.css';
import type { Option } from './types';
@@ -40,7 +41,7 @@ export function SelectContent({
options,
}: SelectContentProps) {
const { contains } = useFilter({ sensitivity: 'base' });
- const { classNames } = useStyles('Select');
+ const { classNames } = useStyles(SelectDefinition);
if (!searchable) {
return ;
diff --git a/packages/ui/src/components/Select/SelectListBox.tsx b/packages/ui/src/components/Select/SelectListBox.tsx
index aa050ba766..3b14292729 100644
--- a/packages/ui/src/components/Select/SelectListBox.tsx
+++ b/packages/ui/src/components/Select/SelectListBox.tsx
@@ -18,6 +18,7 @@ import { ListBox, ListBoxItem, Text } from 'react-aria-components';
import { RiCheckLine } from '@remixicon/react';
import clsx from 'clsx';
import { useStyles } from '../../hooks/useStyles';
+import { SelectDefinition } from './definition';
import styles from './Select.module.css';
import type { Option } from './types';
@@ -26,7 +27,7 @@ interface SelectListBoxProps {
}
const NoResults = () => {
- const { classNames } = useStyles('Select');
+ const { classNames } = useStyles(SelectDefinition);
return (
@@ -36,7 +37,7 @@ const NoResults = () => {
};
export function SelectListBox({ options, ...props }: SelectListBoxProps) {
- const { classNames } = useStyles('Select', props);
+ const { classNames } = useStyles(SelectDefinition, props);
return (
diff --git a/packages/ui/src/components/Select/definition.ts b/packages/ui/src/components/Select/definition.ts
new file mode 100644
index 0000000000..5a085cc770
--- /dev/null
+++ b/packages/ui/src/components/Select/definition.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Select
+ * @public
+ */
+export const SelectDefinition = {
+ classNames: {
+ root: 'bui-Select',
+ popover: 'bui-SelectPopover',
+ trigger: 'bui-SelectTrigger',
+ chevron: 'bui-SelectTriggerChevron',
+ value: 'bui-SelectValue',
+ list: 'bui-SelectList',
+ item: 'bui-SelectItem',
+ itemIndicator: 'bui-SelectItemIndicator',
+ itemLabel: 'bui-SelectItemLabel',
+ searchWrapper: 'bui-SelectSearchWrapper',
+ search: 'bui-SelectSearch',
+ searchClear: 'bui-SelectSearchClear',
+ noResults: 'bui-SelectNoResults',
+ },
+ dataAttributes: {
+ size: ['small', 'medium'] as const,
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Select/index.ts b/packages/ui/src/components/Select/index.ts
index 2cddf1fe62..786cc4d03f 100644
--- a/packages/ui/src/components/Select/index.ts
+++ b/packages/ui/src/components/Select/index.ts
@@ -16,3 +16,4 @@
export * from './Select';
export * from './types';
+export { SelectDefinition } from './definition';
diff --git a/packages/ui/src/components/Skeleton/Skeleton.tsx b/packages/ui/src/components/Skeleton/Skeleton.tsx
index ca2f4ae493..c85a9b23cb 100644
--- a/packages/ui/src/components/Skeleton/Skeleton.tsx
+++ b/packages/ui/src/components/Skeleton/Skeleton.tsx
@@ -15,13 +15,14 @@
*/
import { useStyles } from '../../hooks/useStyles';
+import { SkeletonDefinition } from './definition';
import { SkeletonProps } from './types';
import styles from './Skeleton.module.css';
import clsx from 'clsx';
/** @public */
export const Skeleton = (props: SkeletonProps) => {
- const { classNames, cleanedProps } = useStyles('Skeleton', {
+ const { classNames, cleanedProps } = useStyles(SkeletonDefinition, {
width: 80,
height: 24,
rounded: false,
diff --git a/packages/ui/src/components/Skeleton/definition.ts b/packages/ui/src/components/Skeleton/definition.ts
new file mode 100644
index 0000000000..42c4d6c444
--- /dev/null
+++ b/packages/ui/src/components/Skeleton/definition.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Skeleton
+ * @public
+ */
+export const SkeletonDefinition = {
+ classNames: {
+ root: 'bui-Skeleton',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Skeleton/index.tsx b/packages/ui/src/components/Skeleton/index.tsx
index f1e76b1851..ab44364f8b 100644
--- a/packages/ui/src/components/Skeleton/index.tsx
+++ b/packages/ui/src/components/Skeleton/index.tsx
@@ -16,3 +16,4 @@
export { Skeleton } from './Skeleton';
export type { SkeletonProps } from './types';
+export { SkeletonDefinition } from './definition';
diff --git a/packages/ui/src/components/Switch/Switch.tsx b/packages/ui/src/components/Switch/Switch.tsx
index ffc1fdef05..b50db839df 100644
--- a/packages/ui/src/components/Switch/Switch.tsx
+++ b/packages/ui/src/components/Switch/Switch.tsx
@@ -18,13 +18,14 @@ import { forwardRef } from 'react';
import { Switch as AriaSwitch } from 'react-aria-components';
import type { SwitchProps } from './types';
import { useStyles } from '../../hooks/useStyles';
+import { SwitchDefinition } from './definition';
import styles from './Switch.module.css';
import clsx from 'clsx';
/** @public */
export const Switch = forwardRef(
(props, ref) => {
- const { classNames, cleanedProps } = useStyles('Switch', props);
+ const { classNames, cleanedProps } = useStyles(SwitchDefinition, props);
const { className, label, ...rest } = cleanedProps;
return (
diff --git a/packages/ui/src/components/Switch/definition.ts b/packages/ui/src/components/Switch/definition.ts
new file mode 100644
index 0000000000..c8dd004991
--- /dev/null
+++ b/packages/ui/src/components/Switch/definition.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Switch
+ * @public
+ */
+export const SwitchDefinition = {
+ classNames: {
+ root: 'bui-Switch',
+ indicator: 'bui-SwitchIndicator',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Switch/index.tsx b/packages/ui/src/components/Switch/index.tsx
index 171969809d..72c08f5cb0 100644
--- a/packages/ui/src/components/Switch/index.tsx
+++ b/packages/ui/src/components/Switch/index.tsx
@@ -16,3 +16,4 @@
export * from './Switch';
export * from './types';
+export { SwitchDefinition } from './definition';
diff --git a/packages/ui/src/components/Table/components/Cell.tsx b/packages/ui/src/components/Table/components/Cell.tsx
index ad0a92cb94..65be8482a7 100644
--- a/packages/ui/src/components/Table/components/Cell.tsx
+++ b/packages/ui/src/components/Table/components/Cell.tsx
@@ -20,12 +20,13 @@ import { Link } from '../../Link';
import { Cell as ReactAriaCell } from 'react-aria-components';
import type { CellProps } from '../types';
import { useStyles } from '../../../hooks/useStyles';
+import { TableDefinition } from '../definition';
import styles from '../Table.module.css';
/** @public */
const Cell = (props: CellProps) => {
- const { classNames, cleanedProps } = useStyles<'Table', CellProps>('Table', {
- color: 'primary',
+ const { classNames, cleanedProps } = useStyles(TableDefinition, {
+ color: 'primary' as const,
...props,
});
const { className, title, description, color, leadingIcon, href, ...rest } =
diff --git a/packages/ui/src/components/Table/components/CellProfile.tsx b/packages/ui/src/components/Table/components/CellProfile.tsx
index 3f665dec02..4abef56e01 100644
--- a/packages/ui/src/components/Table/components/CellProfile.tsx
+++ b/packages/ui/src/components/Table/components/CellProfile.tsx
@@ -20,18 +20,16 @@ import { Text } from '../../Text/Text';
import { Link } from '../../Link/Link';
import { Avatar } from '../../Avatar';
import { useStyles } from '../../../hooks/useStyles';
+import { TableDefinition } from '../definition';
import { Cell as ReactAriaCell } from 'react-aria-components';
import styles from '../Table.module.css';
/** @public */
export const CellProfile = (props: CellProfileProps) => {
- const { classNames, cleanedProps } = useStyles<'Table', CellProfileProps>(
- 'Table',
- {
- color: 'primary',
- ...props,
- },
- );
+ const { classNames, cleanedProps } = useStyles(TableDefinition, {
+ color: 'primary' as const,
+ ...props,
+ });
const { className, src, name, href, description, color, ...rest } =
cleanedProps;
diff --git a/packages/ui/src/components/Table/components/Column.tsx b/packages/ui/src/components/Table/components/Column.tsx
index 6ebd263d3f..f534da565a 100644
--- a/packages/ui/src/components/Table/components/Column.tsx
+++ b/packages/ui/src/components/Table/components/Column.tsx
@@ -16,6 +16,7 @@
import { Column as ReactAriaColumn } from 'react-aria-components';
import { useStyles } from '../../../hooks/useStyles';
+import { TableDefinition } from '../definition';
import styles from '../Table.module.css';
import clsx from 'clsx';
import { ColumnProps } from '../types';
@@ -23,10 +24,7 @@ import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
/** @public */
export const Column = (props: ColumnProps) => {
- const { classNames, cleanedProps } = useStyles<'Table', ColumnProps>(
- 'Table',
- props,
- );
+ const { classNames, cleanedProps } = useStyles(TableDefinition, props);
const { children, ...rest } = cleanedProps;
return (
diff --git a/packages/ui/src/components/Table/components/Row.tsx b/packages/ui/src/components/Table/components/Row.tsx
index 70c8330e68..106f97baff 100644
--- a/packages/ui/src/components/Table/components/Row.tsx
+++ b/packages/ui/src/components/Table/components/Row.tsx
@@ -24,6 +24,7 @@ import {
RouterProvider,
} from 'react-aria-components';
import { useStyles } from '../../../hooks/useStyles';
+import { TableDefinition } from '../definition';
import { useNavigate } from 'react-router-dom';
import { useHref } from 'react-router-dom';
import { isExternalLink } from '../../../utils/isExternalLink';
@@ -32,10 +33,7 @@ import clsx from 'clsx';
/** @public */
export function Row(props: RowProps) {
- const { classNames, cleanedProps } = useStyles<'Table', RowProps>(
- 'Table',
- props,
- );
+ const { classNames, cleanedProps } = useStyles(TableDefinition, props);
const { id, columns, children, href, ...rest } = cleanedProps;
const navigate = useNavigate();
const isExternal = isExternalLink(href);
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index a430b9cff2..ffd0ab231d 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -15,6 +15,7 @@
*/
import { useStyles } from '../../../hooks/useStyles';
+import { TableDefinition } from '../definition';
import {
Table as ReactAriaTable,
type TableProps,
@@ -24,10 +25,7 @@ import clsx from 'clsx';
/** @public */
export const Table = (props: TableProps) => {
- const { classNames, cleanedProps } = useStyles<'Table', TableProps>(
- 'Table',
- props,
- );
+ const { classNames, cleanedProps } = useStyles(TableDefinition, props);
return (
(props: TableBodyProps) => {
- const { classNames, cleanedProps } = useStyles<'Table', TableBodyProps>(
- 'Table',
- props,
- );
+ const { classNames, cleanedProps } = useStyles(TableDefinition, props);
return (
(props: TableHeaderProps) => {
let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
- const { classNames, cleanedProps } = useStyles<'Table', TableHeaderProps>(
- 'Table',
- props,
- );
+ const { classNames, cleanedProps } = useStyles(TableDefinition, props);
const { columns, children, ...rest } = cleanedProps;
return (
diff --git a/packages/ui/src/components/Table/definition.ts b/packages/ui/src/components/Table/definition.ts
new file mode 100644
index 0000000000..8ec9dfb1f0
--- /dev/null
+++ b/packages/ui/src/components/Table/definition.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Table
+ * @public
+ */
+export const TableDefinition = {
+ classNames: {
+ table: 'bui-Table',
+ header: 'bui-TableHeader',
+ body: 'bui-TableBody',
+ row: 'bui-TableRow',
+ head: 'bui-TableHead',
+ headContent: 'bui-TableHeadContent',
+ headSortButton: 'bui-TableHeadSortButton',
+ caption: 'bui-TableCaption',
+ cell: 'bui-TableCell',
+ cellContentWrapper: 'bui-TableCellContentWrapper',
+ cellContent: 'bui-TableCellContent',
+ cellIcon: 'bui-TableCellIcon',
+ cellProfileAvatar: 'bui-TableCellProfileAvatar',
+ cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',
+ cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',
+ cellProfileName: 'bui-TableCellProfileName',
+ cellProfileLink: 'bui-TableCellProfileLink',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Table/index.ts b/packages/ui/src/components/Table/index.ts
index fb4ec6147d..8d6603ee00 100644
--- a/packages/ui/src/components/Table/index.ts
+++ b/packages/ui/src/components/Table/index.ts
@@ -30,3 +30,5 @@ export type {
UseTablePagination,
UseTablePaginationConfig,
} from './hooks/types';
+
+export { TableDefinition } from './definition';
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index 293e76fdca..be9e860a0c 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -18,12 +18,13 @@ import {
CellProps as ReactAriaCellProps,
ColumnProps as AriaColumnProps,
} from 'react-aria-components';
+import type { TextColors } from '../../types';
/** @public */
export interface CellProps extends ReactAriaCellProps {
title: string;
description?: string;
- color?: 'primary' | 'secondary';
+ color?: TextColors;
leadingIcon?: React.ReactNode | null;
href?: string;
}
@@ -34,7 +35,7 @@ export interface CellProfileProps extends ReactAriaCellProps {
name?: string;
href?: string;
description?: string;
- color?: 'primary' | 'secondary';
+ color?: TextColors;
}
/** @public */
diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx
index ebd585a0c3..fd891be073 100644
--- a/packages/ui/src/components/TablePagination/TablePagination.tsx
+++ b/packages/ui/src/components/TablePagination/TablePagination.tsx
@@ -18,6 +18,7 @@ import clsx from 'clsx';
import { Text, ButtonIcon, Select } from '../..';
import type { TablePaginationProps } from './types';
import { useStyles } from '../../hooks/useStyles';
+import { TablePaginationDefinition } from './definition';
import styles from './TablePagination.module.css';
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
@@ -27,7 +28,7 @@ import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
* @public
*/
export function TablePagination(props: TablePaginationProps) {
- const { classNames, cleanedProps } = useStyles('TablePagination', {
+ const { classNames, cleanedProps } = useStyles(TablePaginationDefinition, {
showPageSizeOptions: true,
...props,
});
diff --git a/packages/ui/src/components/TablePagination/definition.ts b/packages/ui/src/components/TablePagination/definition.ts
new file mode 100644
index 0000000000..d72a706da1
--- /dev/null
+++ b/packages/ui/src/components/TablePagination/definition.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for TablePagination
+ * @public
+ */
+export const TablePaginationDefinition = {
+ classNames: {
+ root: 'bui-TablePagination',
+ left: 'bui-TablePaginationLeft',
+ right: 'bui-TablePaginationRight',
+ select: 'bui-TablePaginationSelect',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/TablePagination/index.ts b/packages/ui/src/components/TablePagination/index.ts
index 9fb26ad728..42642fb162 100644
--- a/packages/ui/src/components/TablePagination/index.ts
+++ b/packages/ui/src/components/TablePagination/index.ts
@@ -16,3 +16,4 @@
export { TablePagination } from './TablePagination';
export type { TablePaginationProps } from './types';
+export { TablePaginationDefinition } from './definition';
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index f627199b4b..5c44fae8af 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -42,6 +42,7 @@ import {
TabProps as AriaTabProps,
} from 'react-aria-components';
import { useStyles } from '../../hooks/useStyles';
+import { TabsDefinition } from './definition';
import styles from './Tabs.module.css';
import clsx from 'clsx';
@@ -84,7 +85,7 @@ const isTabActive = (
* @public
*/
export const Tabs = (props: TabsProps) => {
- const { classNames, cleanedProps } = useStyles('Tabs', props);
+ const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
const { className, children, ...rest } = cleanedProps;
const tabsRef = useRef(null);
const tabRefs = useRef>(new Map());
@@ -168,7 +169,7 @@ export const Tabs = (props: TabsProps) => {
* @public
*/
export const TabList = (props: TabListProps) => {
- const { classNames, cleanedProps } = useStyles('Tabs', props);
+ const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
const { className, children, ...rest } = cleanedProps;
const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =
useTabsContext();
@@ -219,7 +220,7 @@ export const TabList = (props: TabListProps) => {
* @public
*/
export const Tab = (props: TabProps) => {
- const { classNames, cleanedProps } = useStyles('Tabs', props);
+ const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
const {
className,
href,
@@ -249,7 +250,7 @@ export const Tab = (props: TabProps) => {
* @public
*/
export const TabPanel = (props: TabPanelProps) => {
- const { classNames, cleanedProps } = useStyles('Tabs', props);
+ const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
const { className, children, ...rest } = cleanedProps;
return (
diff --git a/packages/ui/src/components/Tabs/TabsIndicators.tsx b/packages/ui/src/components/Tabs/TabsIndicators.tsx
index 6347c5c55c..2aa4f72508 100644
--- a/packages/ui/src/components/Tabs/TabsIndicators.tsx
+++ b/packages/ui/src/components/Tabs/TabsIndicators.tsx
@@ -16,6 +16,7 @@
import { TabListStateContext } from 'react-aria-components';
import { useStyles } from '../../hooks/useStyles';
+import { TabsDefinition } from './definition';
import { useContext, useEffect, useCallback, useRef } from 'react';
import type { TabsIndicatorsProps } from './types';
import styles from './Tabs.module.css';
@@ -28,7 +29,7 @@ import clsx from 'clsx';
*/
export const TabsIndicators = (props: TabsIndicatorsProps) => {
const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;
- const { classNames } = useStyles('Tabs');
+ const { classNames } = useStyles(TabsDefinition);
const state = useContext(TabListStateContext);
const prevSelectedKey = useRef(null);
diff --git a/packages/ui/src/components/Tabs/definition.ts b/packages/ui/src/components/Tabs/definition.ts
new file mode 100644
index 0000000000..10e9247372
--- /dev/null
+++ b/packages/ui/src/components/Tabs/definition.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Tabs
+ * @public
+ */
+export const TabsDefinition = {
+ classNames: {
+ tabs: 'bui-Tabs',
+ tabList: 'bui-TabList',
+ tabListWrapper: 'bui-TabListWrapper',
+ tab: 'bui-Tab',
+ tabActive: 'bui-TabActive',
+ tabHovered: 'bui-TabHovered',
+ panel: 'bui-TabPanel',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Tabs/index.ts b/packages/ui/src/components/Tabs/index.ts
index 38a6f20ea7..009d515294 100644
--- a/packages/ui/src/components/Tabs/index.ts
+++ b/packages/ui/src/components/Tabs/index.ts
@@ -22,3 +22,4 @@ export type {
TabProps,
TabMatchStrategy,
} from './types';
+export { TabsDefinition } from './definition';
diff --git a/packages/ui/src/components/TagGroup/TagGroup.tsx b/packages/ui/src/components/TagGroup/TagGroup.tsx
index 04f3027f02..54557e5849 100644
--- a/packages/ui/src/components/TagGroup/TagGroup.tsx
+++ b/packages/ui/src/components/TagGroup/TagGroup.tsx
@@ -26,6 +26,7 @@ import type { ReactNode } from 'react';
import { RiCloseCircleLine } from '@remixicon/react';
import clsx from 'clsx';
import { useStyles } from '../../hooks/useStyles';
+import { TagGroupDefinition } from './definition';
import { isExternalLink } from '../../utils/isExternalLink';
import { useNavigate, useHref } from 'react-router-dom';
import styles from './TagGroup.module.css';
@@ -36,7 +37,7 @@ import styles from './TagGroup.module.css';
* @public
*/
export const TagGroup = (props: TagGroupProps) => {
- const { classNames, cleanedProps } = useStyles('TagGroup', props);
+ const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);
const { items, children, renderEmptyState, ...rest } = cleanedProps;
return (
@@ -61,7 +62,7 @@ export const TagGroup = (props: TagGroupProps) => {
* @public
*/
export const Tag = (props: TagProps) => {
- const { classNames, cleanedProps } = useStyles('TagGroup', {
+ const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
size: 'small',
...props,
});
diff --git a/packages/ui/src/components/TagGroup/definition.ts b/packages/ui/src/components/TagGroup/definition.ts
new file mode 100644
index 0000000000..8ad3d17805
--- /dev/null
+++ b/packages/ui/src/components/TagGroup/definition.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for TagGroup
+ * @public
+ */
+export const TagGroupDefinition = {
+ classNames: {
+ group: 'bui-TagGroup',
+ list: 'bui-TagList',
+ tag: 'bui-Tag',
+ tagIcon: 'bui-TagIcon',
+ tagRemoveButton: 'bui-TagRemoveButton',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/TagGroup/index.ts b/packages/ui/src/components/TagGroup/index.ts
index b7434ce574..7c58cf69fc 100644
--- a/packages/ui/src/components/TagGroup/index.ts
+++ b/packages/ui/src/components/TagGroup/index.ts
@@ -16,3 +16,4 @@
export { TagGroup, Tag } from './TagGroup';
export type { TagGroupProps, TagProps } from './types';
+export { TagGroupDefinition } from './definition';
diff --git a/packages/ui/src/components/Text/Text.tsx b/packages/ui/src/components/Text/Text.tsx
index 5b09d10663..857ae3ef0e 100644
--- a/packages/ui/src/components/Text/Text.tsx
+++ b/packages/ui/src/components/Text/Text.tsx
@@ -20,6 +20,7 @@ import type { ElementType } from 'react';
import type { TextProps } from './types';
import { useStyles } from '../../hooks/useStyles';
import styles from './Text.module.css';
+import { TextDefinition } from './definition';
function TextComponent(
props: TextProps,
@@ -27,12 +28,15 @@ function TextComponent(
) {
const Component = props.as || 'span';
- const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {
- variant: 'body-medium',
- weight: 'regular',
- color: 'primary',
- ...props,
- });
+ const { classNames, dataAttributes, cleanedProps } = useStyles(
+ TextDefinition,
+ {
+ variant: 'body-medium',
+ weight: 'regular',
+ color: 'primary',
+ ...props,
+ },
+ );
const { className, truncate, ...restProps } = cleanedProps;
diff --git a/packages/ui/src/components/Text/definition.ts b/packages/ui/src/components/Text/definition.ts
new file mode 100644
index 0000000000..dbbfd6b72a
--- /dev/null
+++ b/packages/ui/src/components/Text/definition.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Text
+ * @public
+ */
+export const TextDefinition = {
+ classNames: {
+ root: 'bui-Text',
+ },
+ dataAttributes: {
+ variant: ['subtitle', 'body', 'caption', 'label'] as const,
+ weight: ['regular', 'bold'] as const,
+ color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,
+ truncate: [true, false] as const,
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Text/index.ts b/packages/ui/src/components/Text/index.ts
index 423288a8a4..df6ac23eb4 100644
--- a/packages/ui/src/components/Text/index.ts
+++ b/packages/ui/src/components/Text/index.ts
@@ -16,3 +16,4 @@
export * from './Text';
export * from './types';
+export { TextDefinition } from './definition';
diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx
index 632f5e9f86..24c038fdb8 100644
--- a/packages/ui/src/components/TextField/TextField.tsx
+++ b/packages/ui/src/components/TextField/TextField.tsx
@@ -21,6 +21,7 @@ import { FieldLabel } from '../FieldLabel';
import { FieldError } from '../FieldError';
import type { TextFieldProps } from './types';
import { useStyles } from '../../hooks/useStyles';
+import { TextFieldDefinition } from './definition';
import styles from './TextField.module.css';
/** @public */
@@ -41,7 +42,7 @@ export const TextField = forwardRef(
}, [label, ariaLabel, ariaLabelledBy]);
const { classNames, dataAttributes, style, cleanedProps } = useStyles(
- 'TextField',
+ TextFieldDefinition,
{
size: 'small',
...props,
diff --git a/packages/ui/src/components/TextField/definition.ts b/packages/ui/src/components/TextField/definition.ts
new file mode 100644
index 0000000000..c1cab8095d
--- /dev/null
+++ b/packages/ui/src/components/TextField/definition.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for TextField
+ * @public
+ */
+export const TextFieldDefinition = {
+ classNames: {
+ root: 'bui-TextField',
+ inputWrapper: 'bui-InputWrapper',
+ input: 'bui-Input',
+ inputIcon: 'bui-InputIcon',
+ inputAction: 'bui-InputAction',
+ },
+ dataAttributes: {
+ invalid: [true, false] as const,
+ disabled: [true, false] as const,
+ size: ['small', 'medium'] as const,
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/TextField/index.ts b/packages/ui/src/components/TextField/index.ts
index 95a838fb46..a9d061047d 100644
--- a/packages/ui/src/components/TextField/index.ts
+++ b/packages/ui/src/components/TextField/index.ts
@@ -16,3 +16,4 @@
export * from './TextField';
export * from './types';
+export { TextFieldDefinition } from './definition';
diff --git a/packages/ui/src/components/Tooltip/Tooltip.tsx b/packages/ui/src/components/Tooltip/Tooltip.tsx
index fc8b25547b..9099f1eef2 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/components/Tooltip/Tooltip.tsx
@@ -24,6 +24,7 @@ import {
import clsx from 'clsx';
import { TooltipProps } from './types';
import { useStyles } from '../../hooks/useStyles';
+import { TooltipDefinition } from './definition';
import styles from './Tooltip.module.css';
/** @public */
@@ -36,7 +37,7 @@ export const TooltipTrigger = (props: TooltipTriggerComponentProps) => {
/** @public */
export const Tooltip = forwardRef(
(props, ref) => {
- const { classNames, cleanedProps } = useStyles('Tooltip', props);
+ const { classNames, cleanedProps } = useStyles(TooltipDefinition, props);
const { className, children, ...rest } = cleanedProps;
return (
diff --git a/packages/ui/src/components/Tooltip/definition.ts b/packages/ui/src/components/Tooltip/definition.ts
new file mode 100644
index 0000000000..a5b3d61ea8
--- /dev/null
+++ b/packages/ui/src/components/Tooltip/definition.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for Tooltip
+ * @public
+ */
+export const TooltipDefinition = {
+ classNames: {
+ tooltip: 'bui-Tooltip',
+ arrow: 'bui-TooltipArrow',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Tooltip/index.ts b/packages/ui/src/components/Tooltip/index.ts
index 613631091b..43bd385c65 100644
--- a/packages/ui/src/components/Tooltip/index.ts
+++ b/packages/ui/src/components/Tooltip/index.ts
@@ -16,3 +16,4 @@
export { TooltipTrigger, Tooltip } from './Tooltip';
export type { TooltipProps } from './types';
+export { TooltipDefinition } from './definition';
diff --git a/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx
index 305f8fc424..cfc796ef9e 100644
--- a/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -15,6 +15,7 @@
*/
import { useStyles } from '../../hooks/useStyles';
+import { VisuallyHiddenDefinition } from './definition';
import { VisuallyHiddenProps } from './types';
import styles from './VisuallyHidden.module.css';
import clsx from 'clsx';
@@ -29,7 +30,10 @@ import clsx from 'clsx';
* @public
*/
export const VisuallyHidden = (props: VisuallyHiddenProps) => {
- const { classNames, cleanedProps } = useStyles('VisuallyHidden', props);
+ const { classNames, cleanedProps } = useStyles(
+ VisuallyHiddenDefinition,
+ props,
+ );
const { className, ...rest } = cleanedProps;
return (
diff --git a/packages/ui/src/components/VisuallyHidden/definition.ts b/packages/ui/src/components/VisuallyHidden/definition.ts
new file mode 100644
index 0000000000..5be52f89ec
--- /dev/null
+++ b/packages/ui/src/components/VisuallyHidden/definition.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 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 { ComponentDefinition } from '../../types';
+
+/**
+ * Component definition for VisuallyHidden
+ * @public
+ */
+export const VisuallyHiddenDefinition = {
+ classNames: {
+ root: 'bui-VisuallyHidden',
+ },
+} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/VisuallyHidden/index.ts b/packages/ui/src/components/VisuallyHidden/index.ts
index 6946ec00e5..c3668df403 100644
--- a/packages/ui/src/components/VisuallyHidden/index.ts
+++ b/packages/ui/src/components/VisuallyHidden/index.ts
@@ -16,3 +16,4 @@
export { VisuallyHidden } from './VisuallyHidden';
export type { VisuallyHiddenProps } from './types';
+export { VisuallyHiddenDefinition } from './definition';
diff --git a/packages/ui/src/definitions.ts b/packages/ui/src/definitions.ts
new file mode 100644
index 0000000000..a0dc412697
--- /dev/null
+++ b/packages/ui/src/definitions.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 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.
+ */
+
+/**
+ * Component definitions barrel export
+ * @packageDocumentation
+ */
+
+export { AccordionDefinition } from './components/Accordion/definition';
+export { AvatarDefinition } from './components/Avatar/definition';
+export { BoxDefinition } from './components/Box/definition';
+export { ButtonDefinition } from './components/Button/definition';
+export { ButtonIconDefinition } from './components/ButtonIcon/definition';
+export { ButtonLinkDefinition } from './components/ButtonLink/definition';
+export { CardDefinition } from './components/Card/definition';
+export { CheckboxDefinition } from './components/Checkbox/definition';
+export { ContainerDefinition } from './components/Container/definition';
+export { DialogDefinition } from './components/Dialog/definition';
+export { FieldErrorDefinition } from './components/FieldError/definition';
+export { FieldLabelDefinition } from './components/FieldLabel/definition';
+export { FlexDefinition } from './components/Flex/definition';
+export {
+ GridDefinition,
+ GridItemDefinition,
+} from './components/Grid/definition';
+export { HeaderDefinition } from './components/Header/definition';
+export { HeaderPageDefinition } from './components/HeaderPage/definition';
+export { LinkDefinition } from './components/Link/definition';
+export { MenuDefinition } from './components/Menu/definition';
+export { PasswordFieldDefinition } from './components/PasswordField/definition';
+export { PopoverDefinition } from './components/Popover/definition';
+export { RadioGroupDefinition } from './components/RadioGroup/definition';
+export { SearchFieldDefinition } from './components/SearchField/definition';
+export { SelectDefinition } from './components/Select/definition';
+export { SkeletonDefinition } from './components/Skeleton/definition';
+export { SwitchDefinition } from './components/Switch/definition';
+export { TableDefinition } from './components/Table/definition';
+export { TablePaginationDefinition } from './components/TablePagination/definition';
+export { TabsDefinition } from './components/Tabs/definition';
+export { TagGroupDefinition } from './components/TagGroup/definition';
+export { TextDefinition } from './components/Text/definition';
+export { TextFieldDefinition } from './components/TextField/definition';
+export { TooltipDefinition } from './components/Tooltip/definition';
+export { VisuallyHiddenDefinition } from './components/VisuallyHidden/definition';
diff --git a/packages/ui/src/hooks/useStyles.ts b/packages/ui/src/hooks/useStyles.ts
index b141eca582..cc05f5f362 100644
--- a/packages/ui/src/hooks/useStyles.ts
+++ b/packages/ui/src/hooks/useStyles.ts
@@ -14,8 +14,7 @@
* limitations under the License.
*/
import { useBreakpoint, breakpoints } from './useBreakpoint';
-import { componentDefinitions } from '../utils/componentDefinitions';
-import type { ComponentDefinitionName, ComponentClassNames } from '../types';
+import type { ComponentDefinition } from '../types';
import { utilityClassMap } from '../utils/utilityClassMap';
/**
@@ -55,26 +54,25 @@ function resolveResponsiveValue(
/**
* React hook to get class names and data attributes for a component with responsive support
- * @param componentName - The name of the component
+ * @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 ComponentDefinitionName,
+ T extends ComponentDefinition,
P extends Record = Record,
>(
- componentName: T,
+ componentDefinition: T,
props: P = {} as P,
): {
- classNames: ComponentClassNames;
+ classNames: T['classNames'];
dataAttributes: Record;
utilityClasses: string;
style: React.CSSProperties;
cleanedProps: P;
} {
const { breakpoint } = useBreakpoint();
- const componentDefinition = componentDefinitions[componentName];
- const classNames = componentDefinition.classNames as ComponentClassNames;
+ const classNames = componentDefinition.classNames;
const utilityPropNames =
('utilityProps' in componentDefinition
? componentDefinition.utilityProps
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index baa4c3e5dc..03ae3245e3 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -59,6 +59,3 @@ export * from './types';
// Hooks
export { useBreakpoint } from './hooks/useBreakpoint';
-
-// Component Definitions
-export * from './utils/componentDefinitions';
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index db23974186..7166194091 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -14,8 +14,6 @@
* limitations under the License.
*/
-import { componentDefinitions } from './utils/componentDefinitions';
-
/** @public */
export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -175,16 +173,3 @@ export interface ComponentDefinition {
dataAttributes?: DataAttributesMap;
utilityProps?: string[];
}
-
-/**
- * Type utilities for extracting information from the component styles
- * @public
- */
-export type ComponentDefinitionName = keyof typeof componentDefinitions;
-
-/**
- * Helper type to extract class names for a component
- * @public
- */
-export type ComponentClassNames =
- (typeof componentDefinitions)[T]['classNames'];
diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts
deleted file mode 100644
index cc45dbefe1..0000000000
--- a/packages/ui/src/utils/componentDefinitions.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-/*
- * Copyright 2024 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 { ComponentDefinition } from '../types';
-
-/**
- * Component definitions for the Backstage UI library
- * @public
- */
-export const componentDefinitions = {
- Avatar: {
- classNames: {
- root: 'bui-AvatarRoot',
- image: 'bui-AvatarImage',
- fallback: 'bui-AvatarFallback',
- },
- dataAttributes: {
- size: ['small', 'medium', 'large'] as const,
- },
- },
- Box: {
- classNames: {
- root: 'bui-Box',
- },
- utilityProps: [
- 'm',
- 'mb',
- 'ml',
- 'mr',
- 'mt',
- 'mx',
- 'my',
- 'p',
- 'pb',
- 'pl',
- 'pr',
- 'pt',
- 'px',
- 'py',
- 'position',
- 'display',
- 'width',
- 'minWidth',
- 'maxWidth',
- 'height',
- 'minHeight',
- 'maxHeight',
- ],
- },
- Button: {
- classNames: {
- root: 'bui-Button',
- content: 'bui-ButtonContent',
- spinner: 'bui-ButtonSpinner',
- },
- dataAttributes: {
- size: ['small', 'medium', 'large'] as const,
- variant: ['primary', 'secondary', 'tertiary'] as const,
- loading: [true, false] as const,
- },
- },
- ButtonIcon: {
- classNames: {
- root: 'bui-ButtonIcon',
- content: 'bui-ButtonIconContent',
- spinner: 'bui-ButtonIconSpinner',
- },
- },
- ButtonLink: {
- classNames: {
- root: 'bui-ButtonLink',
- },
- },
- Card: {
- classNames: {
- root: 'bui-Card',
- header: 'bui-CardHeader',
- body: 'bui-CardBody',
- footer: 'bui-CardFooter',
- },
- },
- Checkbox: {
- classNames: {
- root: 'bui-Checkbox',
- indicator: 'bui-CheckboxIndicator',
- },
- dataAttributes: {
- selected: [true, false] as const,
- },
- },
- Container: {
- classNames: {
- root: 'bui-Container',
- },
- utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],
- },
- Dialog: {
- classNames: {
- overlay: 'bui-DialogOverlay',
- dialog: 'bui-Dialog',
- header: 'bui-DialogHeader',
- headerTitle: 'bui-DialogHeaderTitle',
- body: 'bui-DialogBody',
- footer: 'bui-DialogFooter',
- },
- },
- Accordion: {
- classNames: {
- root: 'bui-Accordion',
- trigger: 'bui-AccordionTrigger',
- triggerButton: 'bui-AccordionTriggerButton',
- triggerTitle: 'bui-AccordionTriggerTitle',
- triggerSubtitle: 'bui-AccordionTriggerSubtitle',
- triggerIcon: 'bui-AccordionTriggerIcon',
- panel: 'bui-AccordionPanel',
- group: 'bui-AccordionGroup',
- },
- },
- FieldError: {
- classNames: {
- root: 'bui-FieldError',
- },
- },
- FieldLabel: {
- classNames: {
- root: 'bui-FieldLabelWrapper',
- label: 'bui-FieldLabel',
- secondaryLabel: 'bui-FieldSecondaryLabel',
- description: 'bui-FieldDescription',
- },
- },
- Flex: {
- classNames: {
- root: 'bui-Flex',
- },
- utilityProps: [
- 'm',
- 'mb',
- 'ml',
- 'mr',
- 'mt',
- 'mx',
- 'my',
- 'p',
- 'pb',
- 'pl',
- 'pr',
- 'pt',
- 'px',
- 'py',
- 'gap',
- 'align',
- 'justify',
- 'direction',
- ],
- },
- Grid: {
- classNames: {
- root: 'bui-Grid',
- },
- utilityProps: [
- 'columns',
- 'gap',
- 'm',
- 'mb',
- 'ml',
- 'mr',
- 'mt',
- 'mx',
- 'my',
- 'p',
- 'pb',
- 'pl',
- 'pr',
- 'pt',
- 'px',
- 'py',
- ],
- },
- GridItem: {
- classNames: {
- root: 'bui-GridItem',
- },
- utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
- },
- Header: {
- classNames: {
- toolbar: 'bui-HeaderToolbar',
- toolbarWrapper: 'bui-HeaderToolbarWrapper',
- toolbarContent: 'bui-HeaderToolbarContent',
- toolbarControls: 'bui-HeaderToolbarControls',
- toolbarIcon: 'bui-HeaderToolbarIcon',
- toolbarName: 'bui-HeaderToolbarName',
- tabsWrapper: 'bui-HeaderTabsWrapper',
- },
- },
- HeaderPage: {
- classNames: {
- root: 'bui-HeaderPage',
- content: 'bui-HeaderPageContent',
- breadcrumbs: 'bui-HeaderPageBreadcrumbs',
- tabsWrapper: 'bui-HeaderPageTabsWrapper',
- controls: 'bui-HeaderPageControls',
- },
- },
- Heading: {
- classNames: {
- root: 'bui-Heading',
- },
- dataAttributes: {
- variant: ['title1', 'title2', 'title3', 'subtitle'] as const,
- color: ['primary', 'secondary', 'muted'] as const,
- truncate: [true, false] as const,
- },
- },
- Icon: {
- classNames: {
- root: 'bui-Icon',
- },
- },
- Link: {
- classNames: {
- root: 'bui-Link',
- },
- dataAttributes: {
- variant: ['subtitle', 'body', 'caption', 'label'] as const,
- weight: ['regular', 'bold'] as const,
- color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,
- truncate: [true, false] as const,
- },
- },
- List: {
- classNames: {
- root: 'bui-List',
- row: 'bui-ListRow',
- label: 'bui-ListLabel',
- },
- },
- Menu: {
- classNames: {
- root: 'bui-Menu',
- popover: 'bui-MenuPopover',
- content: 'bui-MenuContent',
- section: 'bui-MenuSection',
- sectionHeader: 'bui-MenuSectionHeader',
- item: 'bui-MenuItem',
- itemListBox: 'bui-MenuItemListBox',
- itemListBoxCheck: 'bui-MenuItemListBoxCheck',
- itemWrapper: 'bui-MenuItemWrapper',
- itemContent: 'bui-MenuItemContent',
- itemArrow: 'bui-MenuItemArrow',
- separator: 'bui-MenuSeparator',
- searchField: 'bui-MenuSearchField',
- searchFieldInput: 'bui-MenuSearchFieldInput',
- searchFieldClear: 'bui-MenuSearchFieldClear',
- emptyState: 'bui-MenuEmptyState',
- },
- },
- PasswordField: {
- classNames: {
- root: 'bui-PasswordField',
- inputWrapper: 'bui-PasswordFieldInputWrapper',
- input: 'bui-PasswordFieldInput',
- inputIcon: 'bui-PasswordFieldIcon',
- inputVisibility: 'bui-PasswordFieldVisibility',
- },
- dataAttributes: {
- size: ['small', 'medium'] as const,
- },
- },
- Popover: {
- classNames: {
- root: 'bui-Popover',
- },
- },
- RadioGroup: {
- classNames: {
- root: 'bui-RadioGroup',
- content: 'bui-RadioGroupContent',
- radio: 'bui-Radio',
- },
- },
- SearchField: {
- classNames: {
- root: 'bui-SearchField',
- clear: 'bui-SearchFieldClear',
- inputWrapper: 'bui-SearchFieldInputWrapper',
- input: 'bui-SearchFieldInput',
- inputIcon: 'bui-SearchFieldInputIcon',
- },
- dataAttributes: {
- startCollapsed: [true, false] as const,
- size: ['small', 'medium'] as const,
- },
- },
- Select: {
- classNames: {
- root: 'bui-Select',
- popover: 'bui-SelectPopover',
- trigger: 'bui-SelectTrigger',
- chevron: 'bui-SelectTriggerChevron',
- value: 'bui-SelectValue',
- list: 'bui-SelectList',
- item: 'bui-SelectItem',
- itemIndicator: 'bui-SelectItemIndicator',
- itemLabel: 'bui-SelectItemLabel',
- searchWrapper: 'bui-SelectSearchWrapper',
- search: 'bui-SelectSearch',
- searchClear: 'bui-SelectSearchClear',
- noResults: 'bui-SelectNoResults',
- },
- dataAttributes: {
- size: ['small', 'medium'] as const,
- },
- },
- Skeleton: {
- classNames: {
- root: 'bui-Skeleton',
- },
- },
- Switch: {
- classNames: {
- root: 'bui-Switch',
- indicator: 'bui-SwitchIndicator',
- },
- },
- Table: {
- classNames: {
- table: 'bui-Table',
- header: 'bui-TableHeader',
- body: 'bui-TableBody',
- row: 'bui-TableRow',
- head: 'bui-TableHead',
- headContent: 'bui-TableHeadContent',
- headSortButton: 'bui-TableHeadSortButton',
- caption: 'bui-TableCaption',
- cell: 'bui-TableCell',
- cellContentWrapper: 'bui-TableCellContentWrapper',
- cellContent: 'bui-TableCellContent',
- cellIcon: 'bui-TableCellIcon',
- cellProfileAvatar: 'bui-TableCellProfileAvatar',
- cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',
- cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',
- cellProfileName: 'bui-TableCellProfileName',
- cellProfileLink: 'bui-TableCellProfileLink',
- },
- },
- TablePagination: {
- classNames: {
- root: 'bui-TablePagination',
- left: 'bui-TablePaginationLeft',
- right: 'bui-TablePaginationRight',
- select: 'bui-TablePaginationSelect',
- },
- },
- Tabs: {
- classNames: {
- tabs: 'bui-Tabs',
- tabList: 'bui-TabList',
- tabListWrapper: 'bui-TabListWrapper',
- tab: 'bui-Tab',
- tabActive: 'bui-TabActive',
- tabHovered: 'bui-TabHovered',
- panel: 'bui-TabPanel',
- },
- },
- TagGroup: {
- classNames: {
- group: 'bui-TagGroup',
- list: 'bui-TagList',
- tag: 'bui-Tag',
- tagIcon: 'bui-TagIcon',
- tagRemoveButton: 'bui-TagRemoveButton',
- },
- },
- Text: {
- classNames: {
- root: 'bui-Text',
- },
- dataAttributes: {
- variant: ['subtitle', 'body', 'caption', 'label'] as const,
- weight: ['regular', 'bold'] as const,
- color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,
- truncate: [true, false] as const,
- },
- },
- TextField: {
- classNames: {
- root: 'bui-TextField',
- inputWrapper: 'bui-InputWrapper',
- input: 'bui-Input',
- inputIcon: 'bui-InputIcon',
- inputAction: 'bui-InputAction',
- },
- dataAttributes: {
- invalid: [true, false] as const,
- disabled: [true, false] as const,
- size: ['small', 'medium'] as const,
- },
- },
- Tooltip: {
- classNames: {
- tooltip: 'bui-Tooltip',
- arrow: 'bui-TooltipArrow',
- },
- },
- VisuallyHidden: {
- classNames: {
- root: 'bui-VisuallyHidden',
- },
- },
-} as const satisfies Record;