{customActions}
{menuItems && (
diff --git a/packages/ui/src/components/Heading/Heading.stories.tsx b/packages/ui/src/components/Heading/Heading.stories.tsx
deleted file mode 100644
index 2e608c09a3..0000000000
--- a/packages/ui/src/components/Heading/Heading.stories.tsx
+++ /dev/null
@@ -1,114 +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 { Meta, StoryObj } from '@storybook/react';
-import { Heading } from './Heading';
-import { Flex } from '../Flex';
-
-const meta = {
- title: 'Components/Heading',
- component: Heading,
- args: {
- children: 'Heading',
- },
-} satisfies Meta
;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
-
-export const Title1: Story = {
- args: {
- children: 'Look mum, no hands!',
- variant: 'title1',
- },
-};
-
-export const AllVariants: Story = {
- render: () => (
-
- Display
- Title 1
- Title 2
- Title 3
- Title 4
- Title 5
-
- ),
-};
-
-export const AllColors: Story = {
- args: {
- ...Default.args,
- },
- render: args => (
-
-
-
-
- ),
-};
-
-export const Truncate: Story = {
- args: {
- ...Title1.args,
- truncate: true,
- style: { maxWidth: '400px' },
- },
-};
-
-export const Responsive: Story = {
- args: {
- variant: {
- xs: 'title4',
- md: 'display',
- },
- },
-};
-
-export const WrappedInLink: Story = {
- args: {
- ...Default.args,
- },
- decorators: [
- Story => (
-
-
-
- ),
- ],
-};
-
-export const CustomRender: Story = {
- args: {
- ...Default.args,
- as: 'h4',
- },
-};
-
-export const Playground: Story = {
- render: () => (
-
- Display
- Title 1
- Title 2
- Title 3
- Title 4
- Title 5
-
- ),
-};
diff --git a/packages/ui/src/components/Heading/Heading.tsx b/packages/ui/src/components/Heading/Heading.tsx
deleted file mode 100644
index 4ea8bdcfe6..0000000000
--- a/packages/ui/src/components/Heading/Heading.tsx
+++ /dev/null
@@ -1,64 +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 { forwardRef } from 'react';
-import clsx from 'clsx';
-import type { ElementType } from 'react';
-import type { HeadingProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
-
-function HeadingComponent(
- {
- as,
- variant = 'title1',
- color = 'primary',
- truncate,
- className,
- style,
- ...restProps
- }: HeadingProps,
- ref: React.Ref,
-) {
- const Component = as || 'h1';
-
- const { classNames, dataAttributes } = useStyles('Heading', {
- variant,
- color,
- });
-
- return (
-
- );
-}
-
-HeadingComponent.displayName = 'Heading';
-
-/** @public */
-export const Heading = forwardRef(HeadingComponent) as {
- (
- props: HeadingProps & { ref?: React.ComponentPropsWithRef['ref'] },
- ): React.ReactElement, T>;
- displayName: string;
-};
-
-Heading.displayName = 'Heading';
diff --git a/packages/ui/src/components/Heading/index.ts b/packages/ui/src/components/Heading/index.ts
deleted file mode 100644
index ca9845b122..0000000000
--- a/packages/ui/src/components/Heading/index.ts
+++ /dev/null
@@ -1,18 +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.
- */
-
-export * from './Heading';
-export * from './types';
diff --git a/packages/ui/src/components/Heading/styles.css b/packages/ui/src/components/Heading/styles.css
deleted file mode 100644
index 15d7eea798..0000000000
--- a/packages/ui/src/components/Heading/styles.css
+++ /dev/null
@@ -1,67 +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.
- */
-
-.bui-Heading {
- font-family: var(--bui-font-regular);
- color: var(--bui-fg-primary);
- line-height: 100%;
- padding: 0;
- margin: 0;
-}
-
-.bui-Heading[data-variant='display'] {
- font-size: var(--bui-font-size-10);
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant='title1'] {
- font-size: var(--bui-font-size-9);
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant='title2'] {
- font-size: var(--bui-font-size-8);
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant='title3'] {
- font-size: var(--bui-font-size-7);
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant='title4'] {
- font-size: var(--bui-font-size-6);
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant='title5'] {
- font-size: var(--bui-font-size-5);
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-color='primary'] {
- color: var(--bui-fg-primary);
-}
-
-.bui-Heading[data-color='secondary'] {
- color: var(--bui-fg-secondary);
-}
-
-.bui-Heading[data-truncate] {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
diff --git a/packages/ui/src/components/Heading/types.ts b/packages/ui/src/components/Heading/types.ts
deleted file mode 100644
index f2317462c2..0000000000
--- a/packages/ui/src/components/Heading/types.ts
+++ /dev/null
@@ -1,47 +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 { ElementType, ComponentPropsWithRef } from 'react';
-import type { Breakpoint } from '../../types';
-
-/** @public */
-export type HeadingOwnProps = {
- as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
- variant?:
- | 'display'
- | 'title1'
- | 'title2'
- | 'title3'
- | 'title4'
- | 'title5'
- | Partial<
- Record<
- Breakpoint,
- 'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
- >
- >;
- color?:
- | 'primary'
- | 'secondary'
- | Partial>;
- truncate?: boolean;
- className?: string;
- style?: React.CSSProperties;
-};
-
-/** @public */
-export type HeadingProps = HeadingOwnProps &
- Omit, keyof HeadingOwnProps>;
diff --git a/packages/ui/src/components/Link/Link.stories.tsx b/packages/ui/src/components/Link/Link.stories.tsx
index 76bac019d4..8b5ea5e23a 100644
--- a/packages/ui/src/components/Link/Link.stories.tsx
+++ b/packages/ui/src/components/Link/Link.stories.tsx
@@ -40,7 +40,7 @@ type Story = StoryObj;
export const Default: Story = {
args: {
- href: '/home',
+ href: '/',
children: 'Sign up for Backstage',
},
};
@@ -72,133 +72,171 @@ export const AllVariants: Story = {
};
export const AllColors: Story = {
- args: {
- ...Default.args,
- },
- render: args => (
+ render: () => (
+
+
+
),
};
export const AllWeights: Story = {
- args: {
- ...Default.args,
- },
- render: args => (
+ render: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
),
};
+export const Truncate: Story = {
+ args: {
+ children:
+ "A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?",
+ href: '/',
+ truncate: true,
+ style: { width: '480px' },
+ },
+};
+
export const Responsive: Story = {
args: {
...Default.args,
diff --git a/packages/ui/src/components/Link/Link.tsx b/packages/ui/src/components/Link/Link.tsx
index 5fefdccd42..fdbc961e19 100644
--- a/packages/ui/src/components/Link/Link.tsx
+++ b/packages/ui/src/components/Link/Link.tsx
@@ -51,15 +51,18 @@ export const Link = forwardRef((props, ref) => {
variant = 'body',
weight = 'regular',
color = 'primary',
+ truncate,
href,
...restProps
} = props;
- const { classNames, dataAttributes } = useStyles('Link', {
- variant,
- weight,
- color,
- });
+ const { classNames: linkClassNames } = useStyles('Link');
+ const { classNames: textClassNames, dataAttributes: textDataAttributes } =
+ useStyles('Text', {
+ variant,
+ weight,
+ color,
+ });
const isExternal = isExternalLink(href);
@@ -68,9 +71,10 @@ export const Link = forwardRef((props, ref) => {
return (
);
@@ -81,9 +85,10 @@ export const Link = forwardRef((props, ref) => {
diff --git a/packages/ui/src/components/Link/styles.css b/packages/ui/src/components/Link/styles.css
index da06003289..76a56e2d7a 100644
--- a/packages/ui/src/components/Link/styles.css
+++ b/packages/ui/src/components/Link/styles.css
@@ -20,72 +20,13 @@
margin: 0;
cursor: pointer;
text-decoration-line: none;
+ display: inline-block;
&:hover {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: min(2px, max(1px, 0.05em));
text-underline-offset: calc(0.025em + 2px);
- text-decoration-color: color-mix(
- in srgb,
- var(--bui-fg-link-hover) 30%,
- transparent
- );
+ text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}
}
-
-.bui-Link[data-variant='title-large'] {
- font-size: var(--bui-font-size-8);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='title-medium'] {
- font-size: var(--bui-font-size-7);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='title-small'] {
- font-size: var(--bui-font-size-6);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='title-x-small'] {
- font-size: var(--bui-font-size-5);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='body-large'] {
- font-size: var(--bui-font-size-4);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='body-medium'] {
- font-size: var(--bui-font-size-3);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='body-small'] {
- font-size: var(--bui-font-size-2);
- line-height: 140%;
-}
-
-.bui-Link[data-variant='body-x-small'] {
- font-size: var(--bui-font-size-1);
- line-height: 140%;
-}
-
-.bui-Link[data-weight='regular'] {
- font-weight: var(--bui-font-weight-regular);
-}
-
-.bui-Link[data-weight='bold'] {
- font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Link[data-color='primary'] {
- color: var(--bui-fg-primary);
-}
-
-.bui-Link[data-color='secondary'] {
- color: var(--bui-fg-secondary);
-}
diff --git a/packages/ui/src/components/Link/types.ts b/packages/ui/src/components/Link/types.ts
index 4f8cc99149..33c33b26c0 100644
--- a/packages/ui/src/components/Link/types.ts
+++ b/packages/ui/src/components/Link/types.ts
@@ -14,36 +14,22 @@
* limitations under the License.
*/
-import type { Breakpoint } from '../../types';
+import type {
+ Breakpoint,
+ TextColors,
+ TextColorStatus,
+ TextVariants,
+ TextWeights,
+} from '../../types';
import type { LinkProps as AriaLinkProps } from 'react-aria-components';
/** @public */
export interface LinkProps extends AriaLinkProps {
- variant?:
- | 'title-large'
- | 'title-medium'
- | 'title-small'
- | 'title-x-small'
- | 'body-large'
- | 'body-medium'
- | 'body-small'
- | 'body-x-small'
- | Partial<
- Record<
- Breakpoint,
- | 'title-large'
- | 'title-medium'
- | 'title-small'
- | 'title-x-small'
- | 'body-large'
- | 'body-medium'
- | 'body-small'
- | 'body-x-small'
- >
- >;
- weight?: 'regular' | 'bold' | Partial>;
+ variant?: TextVariants | Partial>;
+ weight?: TextWeights | Partial>;
color?:
- | 'primary'
- | 'secondary'
- | Partial>;
+ | TextColors
+ | TextColorStatus
+ | Partial>;
+ truncate?: boolean;
}
diff --git a/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx b/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx
index b7cd8c9580..e27a37977f 100644
--- a/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx
+++ b/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx
@@ -34,7 +34,7 @@ const TableCellLink = forwardRef(
>
{title && {title}}
{description && (
-
+
{description}
)}
diff --git a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx b/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx
index 7392baec68..bb2371bd6d 100644
--- a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx
+++ b/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx
@@ -54,7 +54,7 @@ const TableCellProfile = forwardRef(
{name && to ? (
{name}
) : (
- {name}
+ {name}
)}
);
diff --git a/packages/ui/src/components/Table/TableCellText/TableCellText.tsx b/packages/ui/src/components/Table/TableCellText/TableCellText.tsx
index d707de18c7..ee8db20ada 100644
--- a/packages/ui/src/components/Table/TableCellText/TableCellText.tsx
+++ b/packages/ui/src/components/Table/TableCellText/TableCellText.tsx
@@ -31,9 +31,9 @@ const TableCellText = forwardRef