diff --git a/.changeset/huge-taxis-grab.md b/.changeset/huge-taxis-grab.md new file mode 100644 index 0000000000..a021fcb82c --- /dev/null +++ b/.changeset/huge-taxis-grab.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component. diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css index 64396d36fa..3dd407f0e8 100644 --- a/packages/ui/src/components/Table/Table.module.css +++ b/packages/ui/src/components/Table/Table.module.css @@ -126,39 +126,4 @@ gap: var(--bui-space-2); align-items: center; } - - .bui-TableCellProfileAvatar { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - border-radius: 100%; - user-select: none; - font-weight: 500; - color: var(--bui-fg-primary); - background-color: var(--bui-bg-surface-2); - font-size: 1rem; - line-height: 1; - overflow: hidden; - height: 1.25rem; - width: 1.25rem; - } - - .bui-TableCellProfileAvatarImage { - object-fit: cover; - height: 100%; - width: 100%; - } - - .bui-TableCellProfileAvatarFallback { - align-items: center; - display: flex; - justify-content: center; - height: 100%; - width: 100%; - font-size: var(--bui-font-size-2); - font-weight: var(--bui-font-weight-regular); - box-shadow: inset 0 0 0 1px var(--bui-border); - border-radius: var(--bui-radius-full); - } } diff --git a/packages/ui/src/components/Table/components/CellProfile.tsx b/packages/ui/src/components/Table/components/CellProfile.tsx index 89ca54056a..3f665dec02 100644 --- a/packages/ui/src/components/Table/components/CellProfile.tsx +++ b/packages/ui/src/components/Table/components/CellProfile.tsx @@ -18,7 +18,7 @@ import clsx from 'clsx'; import { CellProfileProps } from '../types'; import { Text } from '../../Text/Text'; import { Link } from '../../Link/Link'; -import { Avatar } from '@base-ui-components/react/avatar'; +import { Avatar } from '../../Avatar'; import { useStyles } from '../../../hooks/useStyles'; import { Cell as ReactAriaCell } from 'react-aria-components'; import styles from '../Table.module.css'; @@ -46,39 +46,9 @@ export const CellProfile = (props: CellProfileProps) => { styles[classNames.cellContentWrapper], )} > -