@@ -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;
diff --git a/plugins/api-docs/report-alpha.api.md b/plugins/api-docs/report-alpha.api.md
index 43c45c1a1d..7d134dcb6d 100644
--- a/plugins/api-docs/report-alpha.api.md
+++ b/plugins/api-docs/report-alpha.api.md
@@ -12,11 +12,11 @@ import { EntityCardType } from '@backstage/plugin-catalog-react/alpha';
import { EntityPredicate } from '@backstage/plugin-catalog-react/alpha';
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { ExtensionInput } from '@backstage/frontend-plugin-api';
import { ExternalRouteRef } from '@backstage/frontend-plugin-api';
import { IconComponent } from '@backstage/core-plugin-api';
import { JSX as JSX_2 } from 'react';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
import { TranslationRef } from '@backstage/frontend-plugin-api';
@@ -63,7 +63,7 @@ const _default: OverridableFrontendPlugin<
registerApi: ExternalRouteRef;
},
{
- 'api:api-docs/config': ExtensionDefinition<{
+ 'api:api-docs/config': OverridableExtensionDefinition<{
kind: 'api';
name: 'config';
config: {};
@@ -78,7 +78,7 @@ const _default: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'entity-card:api-docs/consumed-apis': ExtensionDefinition<{
+ 'entity-card:api-docs/consumed-apis': OverridableExtensionDefinition<{
kind: 'entity-card';
name: 'consumed-apis';
config: {
@@ -119,7 +119,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'entity-card:api-docs/consuming-components': ExtensionDefinition<{
+ 'entity-card:api-docs/consuming-components': OverridableExtensionDefinition<{
kind: 'entity-card';
name: 'consuming-components';
config: {
@@ -160,7 +160,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'entity-card:api-docs/definition': ExtensionDefinition<{
+ 'entity-card:api-docs/definition': OverridableExtensionDefinition<{
kind: 'entity-card';
name: 'definition';
config: {
@@ -201,7 +201,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'entity-card:api-docs/has-apis': ExtensionDefinition<{
+ 'entity-card:api-docs/has-apis': OverridableExtensionDefinition<{
kind: 'entity-card';
name: 'has-apis';
config: {
@@ -242,7 +242,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'entity-card:api-docs/provided-apis': ExtensionDefinition<{
+ 'entity-card:api-docs/provided-apis': OverridableExtensionDefinition<{
kind: 'entity-card';
name: 'provided-apis';
config: {
@@ -283,7 +283,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'entity-card:api-docs/providing-components': ExtensionDefinition<{
+ 'entity-card:api-docs/providing-components': OverridableExtensionDefinition<{
kind: 'entity-card';
name: 'providing-components';
config: {
@@ -324,7 +324,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'entity-content:api-docs/apis': ExtensionDefinition<{
+ 'entity-content:api-docs/apis': OverridableExtensionDefinition<{
kind: 'entity-content';
name: 'apis';
config: {
@@ -384,7 +384,7 @@ const _default: OverridableFrontendPlugin<
filter?: string | EntityPredicate | ((entity: Entity) => boolean);
};
}>;
- 'entity-content:api-docs/definition': ExtensionDefinition<{
+ 'entity-content:api-docs/definition': OverridableExtensionDefinition<{
kind: 'entity-content';
name: 'definition';
config: {
@@ -444,7 +444,7 @@ const _default: OverridableFrontendPlugin<
filter?: string | EntityPredicate | ((entity: Entity) => boolean);
};
}>;
- 'nav-item:api-docs': ExtensionDefinition<{
+ 'nav-item:api-docs': OverridableExtensionDefinition<{
kind: 'nav-item';
name: undefined;
config: {};
@@ -465,7 +465,7 @@ const _default: OverridableFrontendPlugin<
routeRef: RouteRef;
};
}>;
- 'page:api-docs': ExtensionDefinition<{
+ 'page:api-docs': OverridableExtensionDefinition<{
config: {
initiallySelectedFilter: 'all' | 'owned' | 'starred' | undefined;
} & {
diff --git a/plugins/app-visualizer/report.api.md b/plugins/app-visualizer/report.api.md
index 1283df5486..f3b7e6ae61 100644
--- a/plugins/app-visualizer/report.api.md
+++ b/plugins/app-visualizer/report.api.md
@@ -5,9 +5,9 @@
```ts
import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { IconComponent } from '@backstage/core-plugin-api';
import { JSX as JSX_2 } from 'react';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
@@ -16,7 +16,7 @@ const visualizerPlugin: OverridableFrontendPlugin<
{},
{},
{
- 'nav-item:app-visualizer': ExtensionDefinition<{
+ 'nav-item:app-visualizer': OverridableExtensionDefinition<{
kind: 'nav-item';
name: undefined;
config: {};
@@ -37,7 +37,7 @@ const visualizerPlugin: OverridableFrontendPlugin<
routeRef: RouteRef;
};
}>;
- 'page:app-visualizer': ExtensionDefinition<{
+ 'page:app-visualizer': OverridableExtensionDefinition<{
kind: 'page';
name: undefined;
config: {
diff --git a/plugins/app/report.api.md b/plugins/app/report.api.md
index 595cc9bc19..bd8c05bfe4 100644
--- a/plugins/app/report.api.md
+++ b/plugins/app/report.api.md
@@ -12,12 +12,12 @@ import { ComponentType } from 'react';
import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { ExtensionInput } from '@backstage/frontend-plugin-api';
import { IconComponent } from '@backstage/core-plugin-api';
import { IconComponent as IconComponent_2 } from '@backstage/frontend-plugin-api';
import { JSX as JSX_2 } from 'react';
import { NavContentComponent } from '@backstage/frontend-plugin-api';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { ReactNode } from 'react';
import { RouteRef } from '@backstage/frontend-plugin-api';
@@ -31,7 +31,7 @@ const appPlugin: OverridableFrontendPlugin<
{},
{},
{
- app: ExtensionDefinition<{
+ app: OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -48,7 +48,7 @@ const appPlugin: OverridableFrontendPlugin<
kind: undefined;
name: undefined;
}>;
- 'app/layout': ExtensionDefinition<{
+ 'app/layout': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -72,7 +72,7 @@ const appPlugin: OverridableFrontendPlugin<
kind: undefined;
name: 'layout';
}>;
- 'app/nav': ExtensionDefinition<{
+ 'app/nav': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -108,7 +108,7 @@ const appPlugin: OverridableFrontendPlugin<
kind: undefined;
name: 'nav';
}>;
- 'app/root': ExtensionDefinition<{
+ 'app/root': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -165,7 +165,7 @@ const appPlugin: OverridableFrontendPlugin<
kind: undefined;
name: 'root';
}>;
- 'app/routes': ExtensionDefinition<{
+ 'app/routes': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -190,7 +190,7 @@ const appPlugin: OverridableFrontendPlugin<
kind: undefined;
name: 'routes';
}>;
- 'api:app/alert': ExtensionDefinition<{
+ 'api:app/alert': OverridableExtensionDefinition<{
kind: 'api';
name: 'alert';
config: {};
@@ -205,7 +205,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/analytics': ExtensionDefinition<{
+ 'api:app/analytics': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -232,7 +232,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/app-language': ExtensionDefinition<{
+ 'api:app/app-language': OverridableExtensionDefinition<{
kind: 'api';
name: 'app-language';
config: {};
@@ -247,7 +247,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/app-theme': ExtensionDefinition<{
+ 'api:app/app-theme': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -270,7 +270,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/atlassian-auth': ExtensionDefinition<{
+ 'api:app/atlassian-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'atlassian-auth';
config: {};
@@ -285,7 +285,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/bitbucket-auth': ExtensionDefinition<{
+ 'api:app/bitbucket-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'bitbucket-auth';
config: {};
@@ -300,7 +300,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/bitbucket-server-auth': ExtensionDefinition<{
+ 'api:app/bitbucket-server-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'bitbucket-server-auth';
config: {};
@@ -315,7 +315,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/components': ExtensionDefinition<{
+ 'api:app/components': OverridableExtensionDefinition<{
kind: 'api';
name: 'components';
config: {};
@@ -330,7 +330,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/dialog': ExtensionDefinition<{
+ 'api:app/dialog': OverridableExtensionDefinition<{
kind: 'api';
name: 'dialog';
config: {};
@@ -345,7 +345,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/discovery': ExtensionDefinition<{
+ 'api:app/discovery': OverridableExtensionDefinition<{
kind: 'api';
name: 'discovery';
config: {};
@@ -360,7 +360,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/error': ExtensionDefinition<{
+ 'api:app/error': OverridableExtensionDefinition<{
kind: 'api';
name: 'error';
config: {};
@@ -375,7 +375,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/feature-flags': ExtensionDefinition<{
+ 'api:app/feature-flags': OverridableExtensionDefinition<{
kind: 'api';
name: 'feature-flags';
config: {};
@@ -390,7 +390,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/fetch': ExtensionDefinition<{
+ 'api:app/fetch': OverridableExtensionDefinition<{
kind: 'api';
name: 'fetch';
config: {};
@@ -405,7 +405,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/github-auth': ExtensionDefinition<{
+ 'api:app/github-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'github-auth';
config: {};
@@ -420,7 +420,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/gitlab-auth': ExtensionDefinition<{
+ 'api:app/gitlab-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'gitlab-auth';
config: {};
@@ -435,7 +435,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/google-auth': ExtensionDefinition<{
+ 'api:app/google-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'google-auth';
config: {};
@@ -450,7 +450,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/icons': ExtensionDefinition<{
+ 'api:app/icons': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -479,7 +479,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/microsoft-auth': ExtensionDefinition<{
+ 'api:app/microsoft-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'microsoft-auth';
config: {};
@@ -494,7 +494,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/oauth-request': ExtensionDefinition<{
+ 'api:app/oauth-request': OverridableExtensionDefinition<{
kind: 'api';
name: 'oauth-request';
config: {};
@@ -509,7 +509,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/okta-auth': ExtensionDefinition<{
+ 'api:app/okta-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'okta-auth';
config: {};
@@ -524,7 +524,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/onelogin-auth': ExtensionDefinition<{
+ 'api:app/onelogin-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'onelogin-auth';
config: {};
@@ -539,7 +539,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/openshift-auth': ExtensionDefinition<{
+ 'api:app/openshift-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'openshift-auth';
config: {};
@@ -554,7 +554,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/permission': ExtensionDefinition<{
+ 'api:app/permission': OverridableExtensionDefinition<{
kind: 'api';
name: 'permission';
config: {};
@@ -569,7 +569,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/scm-auth': ExtensionDefinition<{
+ 'api:app/scm-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'scm-auth';
config: {};
@@ -584,7 +584,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/scm-integrations': ExtensionDefinition<{
+ 'api:app/scm-integrations': OverridableExtensionDefinition<{
kind: 'api';
name: 'scm-integrations';
config: {};
@@ -599,7 +599,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/storage': ExtensionDefinition<{
+ 'api:app/storage': OverridableExtensionDefinition<{
kind: 'api';
name: 'storage';
config: {};
@@ -614,7 +614,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/swappable-components': ExtensionDefinition<{
+ 'api:app/swappable-components': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -646,7 +646,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/translations': ExtensionDefinition<{
+ 'api:app/translations': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -680,7 +680,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'api:app/vmware-cloud-auth': ExtensionDefinition<{
+ 'api:app/vmware-cloud-auth': OverridableExtensionDefinition<{
kind: 'api';
name: 'vmware-cloud-auth';
config: {};
@@ -695,7 +695,7 @@ const appPlugin: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'app-root-element:app/alert-display': ExtensionDefinition<{
+ 'app-root-element:app/alert-display': OverridableExtensionDefinition<{
config: {
transientTimeoutMs: number;
anchorOrigin: {
@@ -728,7 +728,7 @@ const appPlugin: OverridableFrontendPlugin<
element: JSX.Element;
};
}>;
- 'app-root-element:app/dialog-display': ExtensionDefinition<{
+ 'app-root-element:app/dialog-display': OverridableExtensionDefinition<{
config: {};
configInput: {};
output: ExtensionDataRef;
@@ -747,7 +747,7 @@ const appPlugin: OverridableFrontendPlugin<
element: JSX.Element;
};
}>;
- 'app-root-element:app/oauth-request-dialog': ExtensionDefinition<{
+ 'app-root-element:app/oauth-request-dialog': OverridableExtensionDefinition<{
kind: 'app-root-element';
name: 'oauth-request-dialog';
config: {};
@@ -758,7 +758,7 @@ const appPlugin: OverridableFrontendPlugin<
element: JSX.Element;
};
}>;
- 'component:app/core-error-display': ExtensionDefinition<{
+ 'component:app/core-error-display': OverridableExtensionDefinition<{
kind: 'component';
name: 'core-error-display';
config: {};
@@ -814,7 +814,7 @@ const appPlugin: OverridableFrontendPlugin<
: never;
}>;
}>;
- 'component:app/core-not-found-error-page': ExtensionDefinition<{
+ 'component:app/core-not-found-error-page': OverridableExtensionDefinition<{
kind: 'component';
name: 'core-not-found-error-page';
config: {};
@@ -870,7 +870,7 @@ const appPlugin: OverridableFrontendPlugin<
: never;
}>;
}>;
- 'component:app/core-progress': ExtensionDefinition<{
+ 'component:app/core-progress': OverridableExtensionDefinition<{
kind: 'component';
name: 'core-progress';
config: {};
@@ -926,7 +926,7 @@ const appPlugin: OverridableFrontendPlugin<
: never;
}>;
}>;
- 'sign-in-page:app': ExtensionDefinition<{
+ 'sign-in-page:app': OverridableExtensionDefinition<{
kind: 'sign-in-page';
name: undefined;
config: {};
@@ -941,7 +941,7 @@ const appPlugin: OverridableFrontendPlugin<
loader: () => Promise>;
};
}>;
- 'theme:app/dark': ExtensionDefinition<{
+ 'theme:app/dark': OverridableExtensionDefinition<{
kind: 'theme';
name: 'dark';
config: {};
@@ -952,7 +952,7 @@ const appPlugin: OverridableFrontendPlugin<
theme: AppTheme;
};
}>;
- 'theme:app/light': ExtensionDefinition<{
+ 'theme:app/light': OverridableExtensionDefinition<{
kind: 'theme';
name: 'light';
config: {};
diff --git a/plugins/auth/report.api.md b/plugins/auth/report.api.md
index 4c7d2d4a11..1d346a9ce4 100644
--- a/plugins/auth/report.api.md
+++ b/plugins/auth/report.api.md
@@ -5,8 +5,8 @@
```ts
import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { JSX as JSX_2 } from 'react';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
@@ -17,7 +17,7 @@ const _default: OverridableFrontendPlugin<
},
{},
{
- 'page:auth': ExtensionDefinition<{
+ 'page:auth': OverridableExtensionDefinition<{
kind: 'page';
name: undefined;
config: {
diff --git a/plugins/catalog-graph/report-alpha.api.md b/plugins/catalog-graph/report-alpha.api.md
index 0d06beacc4..285b8b3119 100644
--- a/plugins/catalog-graph/report-alpha.api.md
+++ b/plugins/catalog-graph/report-alpha.api.md
@@ -11,10 +11,10 @@ import { EntityCardType } from '@backstage/plugin-catalog-react/alpha';
import { EntityPredicate } from '@backstage/plugin-catalog-react/alpha';
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { ExtensionInput } from '@backstage/frontend-plugin-api';
import { ExternalRouteRef } from '@backstage/frontend-plugin-api';
import { JSX as JSX_2 } from 'react';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
import { TranslationRef } from '@backstage/frontend-plugin-api';
@@ -60,7 +60,7 @@ const _default: OverridableFrontendPlugin<
}>;
},
{
- 'api:catalog-graph': ExtensionDefinition<{
+ 'api:catalog-graph': OverridableExtensionDefinition<{
kind: 'api';
name: undefined;
config: {};
@@ -75,7 +75,7 @@ const _default: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'entity-card:catalog-graph/relations': ExtensionDefinition<{
+ 'entity-card:catalog-graph/relations': OverridableExtensionDefinition<{
config: {
kinds: string[] | undefined;
relations: string[] | undefined;
@@ -148,7 +148,7 @@ const _default: OverridableFrontendPlugin<
type?: EntityCardType;
};
}>;
- 'page:catalog-graph': ExtensionDefinition<{
+ 'page:catalog-graph': OverridableExtensionDefinition<{
config: {
selectedKinds: string[] | undefined;
selectedRelations: string[] | undefined;
diff --git a/plugins/catalog-import/package.json b/plugins/catalog-import/package.json
index e3a646d895..cffe9a230d 100644
--- a/plugins/catalog-import/package.json
+++ b/plugins/catalog-import/package.json
@@ -66,6 +66,7 @@
"@backstage/integration-react": "workspace:^",
"@backstage/plugin-catalog-common": "workspace:^",
"@backstage/plugin-catalog-react": "workspace:^",
+ "@backstage/plugin-permission-react": "workspace:^",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.61",
diff --git a/plugins/catalog-import/report-alpha.api.md b/plugins/catalog-import/report-alpha.api.md
index 051e38cd19..5dfa90388a 100644
--- a/plugins/catalog-import/report-alpha.api.md
+++ b/plugins/catalog-import/report-alpha.api.md
@@ -8,8 +8,8 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
import { ApiFactory } from '@backstage/core-plugin-api';
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { JSX as JSX_2 } from 'react';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
import { TranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -94,7 +94,7 @@ const _default: OverridableFrontendPlugin<
},
{},
{
- 'api:catalog-import': ExtensionDefinition<{
+ 'api:catalog-import': OverridableExtensionDefinition<{
kind: 'api';
name: undefined;
config: {};
@@ -109,7 +109,7 @@ const _default: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'page:catalog-import': ExtensionDefinition<{
+ 'page:catalog-import': OverridableExtensionDefinition<{
kind: 'page';
name: undefined;
config: {
diff --git a/plugins/catalog-import/src/alpha.tsx b/plugins/catalog-import/src/alpha.tsx
index ab9d06ef19..2d9e5deaba 100644
--- a/plugins/catalog-import/src/alpha.tsx
+++ b/plugins/catalog-import/src/alpha.tsx
@@ -35,6 +35,8 @@ import {
import { CatalogImportClient, catalogImportApiRef } from './api';
import { rootRouteRef } from './plugin';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
export * from './translation';
@@ -46,7 +48,11 @@ const catalogImportPage = PageBlueprint.make({
routeRef: convertLegacyRouteRef(rootRouteRef),
loader: () =>
import('./components/ImportPage').then(m =>
- compatWrapper(),
+ compatWrapper(
+
+
+ ,
+ ),
),
},
});
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
index 8ef1707bb1..f7090f330b 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
@@ -498,6 +498,29 @@ describe('', () => {
});
});
+ it('applies frontend-only filters without refetching', async () => {
+ const { result } = renderHook(() => useEntityList(), {
+ wrapper: createWrapper({ pagination }),
+ });
+
+ await waitFor(() => {
+ expect(result.current.backendEntities.length).toBe(2);
+ expect(result.current.filters.kind?.value).toBe('component');
+ });
+
+ act(() =>
+ result.current.updateFilters({
+ user: EntityUserFilter.all(),
+ }),
+ );
+
+ await waitFor(() => {
+ expect(result.current.filters.user?.value).toBe('all');
+ expect(result.current.entities.length).toBe(2);
+ });
+ expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(1);
+ });
+
it('resolves query param filter values', async () => {
const query = qs.stringify({
filters: { kind: 'component', type: 'service' },
@@ -801,6 +824,29 @@ describe(``, () => {
});
});
+ it('applies frontend-only filters without refetching', async () => {
+ const { result } = renderHook(() => useEntityList(), {
+ wrapper: createWrapper({ pagination }),
+ });
+
+ await waitFor(() => {
+ expect(result.current.backendEntities.length).toBe(2);
+ expect(result.current.filters.kind?.value).toBe('component');
+ });
+
+ act(() =>
+ result.current.updateFilters({
+ user: EntityUserFilter.all(),
+ }),
+ );
+
+ await waitFor(() => {
+ expect(result.current.filters.user?.value).toBe('all');
+ expect(result.current.entities.length).toBe(2);
+ });
+ expect(mockCatalogApi.queryEntities).toHaveBeenCalledTimes(1);
+ });
+
it('resolves query param filter values', async () => {
const query = qs.stringify({
filters: { kind: 'component', type: 'service' },
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
index 319740e70e..8c4927ad0a 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
@@ -249,11 +249,11 @@ export const EntityListProvider = (
? { ...requestedFilters, owners: undefined }
: requestedFilters;
const compacted = compact(Object.values(adjustedFilters));
+ const entityFilter = reduceEntityFilters(compacted);
if (paginationMode !== 'none') {
if (cursor) {
if (cursor !== outputState.appliedCursor) {
- const entityFilter = reduceEntityFilters(compacted);
const response = await catalogApi.queryEntities({
cursor,
limit,
@@ -267,58 +267,42 @@ export const EntityListProvider = (
totalItems: response.totalItems,
};
}
- } else {
- const entityFilter = reduceEntityFilters(compacted);
- const backendFilter = reduceCatalogFilters(compacted);
- const previousBackendFilter = reduceCatalogFilters(
- compact(Object.values(outputState.appliedFilters)),
- );
-
- if (
- (paginationMode === 'offset' &&
- (outputState.limit !== limit || outputState.offset !== offset)) ||
- !isEqual(previousBackendFilter, backendFilter)
- ) {
- const response = await catalogApi.queryEntities({
- ...backendFilter,
- limit,
- offset,
- });
- return {
- appliedFilters: requestedFilters,
- backendEntities: response.items,
- entities: response.items.filter(entityFilter),
- pageInfo: response.pageInfo,
- totalItems: response.totalItems,
- limit,
- offset,
- };
- }
+ const entities = outputState.backendEntities.filter(entityFilter);
+ return {
+ appliedFilters: requestedFilters,
+ appliedCursor: outputState.appliedCursor,
+ backendEntities: outputState.backendEntities,
+ entities,
+ pageInfo: outputState.pageInfo,
+ totalItems: outputState.totalItems,
+ limit: outputState.limit,
+ offset: outputState.offset,
+ };
}
- } else {
- const entityFilter = reduceEntityFilters(compacted);
- const backendFilter = reduceBackendCatalogFilters(compacted);
- const { orderFields } = reduceCatalogFilters(compacted);
- const previousBackendFilter = reduceBackendCatalogFilters(
+
+ const backendFilter = reduceCatalogFilters(compacted);
+ const previousBackendFilter = reduceCatalogFilters(
compact(Object.values(outputState.appliedFilters)),
);
- // TODO(mtlewis): currently entities will never be requested unless
- // there's at least one filter, we should allow an initial request
- // to happen with no filters.
- if (!isEqual(previousBackendFilter, backendFilter)) {
- // TODO(timbonicus): should limit fields here, but would need filter
- // fields + table columns
- const response = await catalogApi.getEntities({
- filter: backendFilter,
- order: orderFields,
+ if (
+ (paginationMode === 'offset' &&
+ (outputState.limit !== limit || outputState.offset !== offset)) ||
+ !isEqual(previousBackendFilter, backendFilter)
+ ) {
+ const response = await catalogApi.queryEntities({
+ ...backendFilter,
+ limit,
+ offset,
});
- const entities = response.items.filter(entityFilter);
return {
appliedFilters: requestedFilters,
backendEntities: response.items,
- entities,
- totalItems: entities.length,
+ entities: response.items.filter(entityFilter),
+ pageInfo: response.pageInfo,
+ totalItems: response.totalItems,
+ limit,
+ offset,
};
}
const entities = outputState.backendEntities.filter(entityFilter);
@@ -326,10 +310,44 @@ export const EntityListProvider = (
appliedFilters: requestedFilters,
backendEntities: outputState.backendEntities,
entities,
+ pageInfo: outputState.pageInfo,
+ totalItems: outputState.totalItems,
+ limit: outputState.limit,
+ offset: outputState.offset,
+ };
+ }
+
+ const backendFilter = reduceBackendCatalogFilters(compacted);
+ const { orderFields } = reduceCatalogFilters(compacted);
+ const previousBackendFilter = reduceBackendCatalogFilters(
+ compact(Object.values(outputState.appliedFilters)),
+ );
+
+ // TODO(mtlewis): currently entities will never be requested unless
+ // there's at least one filter, we should allow an initial request
+ // to happen with no filters.
+ if (!isEqual(previousBackendFilter, backendFilter)) {
+ // TODO(timbonicus): should limit fields here, but would need filter
+ // fields + table columns
+ const response = await catalogApi.getEntities({
+ filter: backendFilter,
+ order: orderFields,
+ });
+ const entities = response.items.filter(entityFilter);
+ return {
+ appliedFilters: requestedFilters,
+ backendEntities: response.items,
+ entities,
totalItems: entities.length,
};
}
- return undefined;
+ const entities = outputState.backendEntities.filter(entityFilter);
+ return {
+ appliedFilters: requestedFilters,
+ backendEntities: outputState.backendEntities,
+ entities,
+ totalItems: entities.length,
+ };
},
[
catalogApi,
diff --git a/plugins/catalog-unprocessed-entities/report-alpha.api.md b/plugins/catalog-unprocessed-entities/report-alpha.api.md
index 17d28ee165..5518f6d273 100644
--- a/plugins/catalog-unprocessed-entities/report-alpha.api.md
+++ b/plugins/catalog-unprocessed-entities/report-alpha.api.md
@@ -8,9 +8,9 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
import { ApiFactory } from '@backstage/frontend-plugin-api';
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
-import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { IconComponent } from '@backstage/core-plugin-api';
import { JSX as JSX_2 } from 'react';
+import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
import { RouteRef } from '@backstage/frontend-plugin-api';
@@ -21,7 +21,7 @@ const _default: OverridableFrontendPlugin<
},
{},
{
- 'api:catalog-unprocessed-entities': ExtensionDefinition<{
+ 'api:catalog-unprocessed-entities': OverridableExtensionDefinition<{
kind: 'api';
name: undefined;
config: {};
@@ -36,7 +36,7 @@ const _default: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams