Skip to content

feat(Text): add support for caption-md and caption-lg #1656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 10, 2023
Merged

feat(Text): add support for caption-md and caption-lg #1656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53fd4e0
feat(Text): add support for caption-md and caption-lg
booc0mtaco Jun 7, 2023
f0772c7
fix(Tooltip): use caption-lg for tooltip text
booc0mtaco Jun 7, 2023
41e764e
docs: sync type token names for tier-2 usages
booc0mtaco Jun 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions .storybook/components/DesignTokens/Tier2/TypographyUsage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,16 @@ export class Tier2TypographyUsage extends Component {

<Section title="Body Text">
<Grid>
{renderTypeToken('body-lg', '004')}
{renderTypeToken('body-md', '005')}
{renderTypeToken('body-sm', '006')}
{renderTypeToken('body-xs', '008')}
{renderTypeToken('body-lg', '004-light')}
{renderTypeToken('body-md', '005-light')}
{renderTypeToken('body-sm', '006-light')}
{renderTypeToken('body-xs', '008-light')}
</Grid>
</Section>

<Section title="Caption">
<Grid>
{renderTypeToken('caption-lg', '006')}
{renderTypeToken('caption-lg', '006-light')}
{renderTypeToken('caption-md', '008')}
{renderTypeToken('caption-sm', '010')}
</Grid>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Text/Text.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,12 @@
.text--xs {
@mixin eds-theme-typography-body-xs;
}
.text--caption {
.text--caption, .text--caption-md {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.text-caption is preserved for compatibility at the moment. When doing a deprecation cleanup sweep, it can be removed.

@mixin eds-theme-typography-caption-md;
}
.text--caption-lg {
@mixin eds-theme-typography-caption-lg;
}
.text--overline {
@mixin eds-theme-typography-overline;
}
Expand Down
24 changes: 16 additions & 8 deletions src/components/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,16 @@ export type Size =
| 'md'
| 'lg'
| 'xs'
| 'caption'
| 'caption-md'
| 'caption-lg'
| 'overline'
| 'callout';

/**
* @deprecated Please use `caption-md` instead
*/
export type DeprecatedSize = 'caption';

export type Variant =
| 'inherit'
| 'neutral-subtle'
Expand All @@ -22,11 +28,12 @@ export type Variant =
| 'success'
| 'warning'
| 'error'
| 'white'
/**
* @deprecated Info variant is deprecated.
*/
| 'info';
| 'white';

/**
* @deprecated Info variant is deprecated.
*/
export type DeprecatedVariant = 'info';

export type Props = {
/**
Expand All @@ -35,8 +42,8 @@ export type Props = {
as?: 'p' | 'span';
children: React.ReactNode;
className?: string;
variant?: Variant;
size?: Size;
variant?: Variant | DeprecatedVariant;
size?: Size | DeprecatedSize;
tabIndex?: number;
weight?: 'bold' | 'normal' | null;
} & React.HTMLAttributes<HTMLElement>;
Expand Down Expand Up @@ -96,4 +103,5 @@ export const Text = forwardRef(
);
},
);

Text.displayName = 'Text'; // Satisfy eslint
16 changes: 3 additions & 13 deletions src/components/Tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { BADGE } from '@geometricpanda/storybook-addon-badges';
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { Tooltip } from './Tooltip';
Expand All @@ -8,10 +7,10 @@ import { Tooltip } from './Tooltip';
const diffThreshold = 0.75;
const defaultArgs = {
text: (
<span data-testid="tooltip-content">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
<b>Donec a erat eu augue consequat eleifend non vel sem.</b> Praesent
efficitur mauris ac leo semper accumsan.
<strong>Donec a erat eu augue consequat eleifend non vel sem.</strong>{' '}
Praesent efficitur mauris ac leo semper accumsan.
</span>
),
children: <div className="fpo w-3 p-1">&bull;</div>,
Expand Down Expand Up @@ -53,15 +52,6 @@ type Args = React.ComponentProps<typeof Tooltip>;

export const LightVariant: StoryObj<Args> = {};

export const DarkVariant: StoryObj<Args> = {
args: {
variant: 'dark',
},
parameters: {
badges: [BADGE.DEPRECATED],
},
};

export const LeftPlacement: StoryObj<Args> = {
args: {
align: 'left',
Expand Down
9 changes: 8 additions & 1 deletion src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { TippyProps } from '@tippyjs/react';
import Tippy from '@tippyjs/react';
import clsx from 'clsx';
import * as React from 'react';
import { Text } from '../Text/Text';
import styles from './Tooltip.module.css';

// Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
Expand Down Expand Up @@ -150,6 +151,12 @@ export const Tooltip = ({
);
}

const textContent = (
<Text as="span" data-testid="tooltip-content" size="caption-lg">
{text}
</Text>
);

return (
<Tippy
{...rest}
Expand All @@ -159,7 +166,7 @@ export const Tooltip = ({
variant === 'dark' && styles['tooltip--dark'],
className,
)}
content={text}
content={textContent}
duration={duration}
placement={align}
plugins={[hideOnEsc]}
Expand Down
Loading