Skip to content
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

Jump to bottom

feat(Title, Text): apply penta updates #9889

Merged
merged 4 commits into from
Dec 20, 2023
Merged

feat(Title, Text): apply penta updates #9889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cf29833
feat(Title, Text): apply penta updates
kmcfaul Dec 13, 2023
33d7f7c
update snap
kmcfaul Dec 13, 2023
523c660
update Title tests with new modifiers
kmcfaul Dec 13, 2023
5febc9b
update to use styles obj for class, only apply class if icon is present
kmcfaul Dec 15, 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
2 changes: 1 addition & 1 deletion packages/react-core/src/components/List/ListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const ListItem: React.FunctionComponent<ListItemProps> = ({
}: ListItemProps) => (
<li className={css(icon && styles.listItem)} {...props}>
{icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
{children}
<span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
</li>
);
ListItem.displayName = 'ListItem';
4 changes: 3 additions & 1 deletion ...s/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
<li
class=""
>
ReactNode
<span>
ReactNode
</span>
</li>
</DocumentFragment>
`;
72 changes: 57 additions & 15 deletions packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ exports[`List icon large list 1`] = `
/>
</svg>
</span>
Apple
<span
class="pf-v5-c-list__item-text"
>
Apple
</span>
</li>
<li
class="pf-v5-c-list__item"
Expand All @@ -47,7 +51,11 @@ exports[`List icon large list 1`] = `
/>
</svg>
</span>
Banana
<span
class="pf-v5-c-list__item-text"
>
Banana
</span>
</li>
<li
class="pf-v5-c-list__item"
Expand All @@ -69,7 +77,11 @@ exports[`List icon large list 1`] = `
/>
</svg>
</span>
Orange
<span
class="pf-v5-c-list__item-text"
>
Orange
</span>
</li>
</ul>
</DocumentFragment>
Expand Down Expand Up @@ -101,7 +113,11 @@ exports[`List icon list 1`] = `
/>
</svg>
</span>
Apple
<span
class="pf-v5-c-list__item-text"
>
Apple
</span>
</li>
<li
class="pf-v5-c-list__item"
Expand All @@ -123,7 +139,11 @@ exports[`List icon list 1`] = `
/>
</svg>
</span>
Banana
<span
class="pf-v5-c-list__item-text"
>
Banana
</span>
</li>
<li
class="pf-v5-c-list__item"
Expand All @@ -145,7 +165,11 @@ exports[`List icon list 1`] = `
/>
</svg>
</span>
Orange
<span
class="pf-v5-c-list__item-text"
>
Orange
</span>
</li>
</ul>
</DocumentFragment>
Expand All @@ -162,17 +186,23 @@ exports[`List inline list 1`] = `
<li
class=""
>
First
<span>
First
</span>
</li>
<li
class=""
>
Second
<span>
Second
</span>
</li>
<li
class=""
>
Third
<span>
Third
</span>
</li>
</ul>
</ul>
Expand All @@ -188,17 +218,23 @@ exports[`List ordered list 1`] = `
<li
class=""
>
Apple
<span>
Apple
</span>
</li>
<li
class=""
>
Banana
<span>
Banana
</span>
</li>
<li
class=""
>
Orange
<span>
Orange
</span>
</li>
</ol>
</DocumentFragment>
Expand All @@ -215,17 +251,23 @@ exports[`List simple list 1`] = `
<li
class=""
>
First
<span>
First
</span>
</li>
<li
class=""
>
Second
<span>
Second
</span>
</li>
<li
class=""
>
Third
<span>
Third
</span>
</li>
</ul>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Text/examples/Text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Text components such as Text, TextList, TextListItem need to be placed within a

```

### Visited
### Link and visited link

```ts file="./TextVisited.tsx"

Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/Text/examples/TextVisited.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
export const TextVisited: React.FunctionComponent = () => (
<>
<TextContent>
<Text component={TextVariants.h3}>Visited link example</Text>
<Text component={TextVariants.h3}>Link example</Text>
<Text component={TextVariants.p}>
<Text component={TextVariants.a} isVisitedLink href="#">
Visited link
Click to visit link
</Text>
</Text>
</TextContent>
<br />
<TextContent isVisited>
<Text component={TextVariants.h3}>Visited content example</Text>
<Text component={TextVariants.h3}>Link content example</Text>
<Text component={TextVariants.p}>
<Text component={TextVariants.a} href="#">
content link 1
Expand Down
13 changes: 2 additions & 11 deletions packages/react-core/src/components/Title/Title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,6 @@ export enum TitleSizes {
'4xl' = '4xl'
}

enum headingLevelSizeMap {
h1 = '2xl',
h2 = 'xl',
h3 = 'lg',
h4 = 'md',
h5 = 'md',
h6 = 'md'
}

type Size = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';

export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'>, OUIAProps {
Expand All @@ -42,7 +33,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
className = '',
children = '',
headingLevel: HeadingLevel,
size = headingLevelSizeMap[HeadingLevel],
size,
ouiaId,
ouiaSafe = true,
...props
Expand All @@ -52,7 +43,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
<HeadingLevel
{...ouiaProps}
{...props}
className={css(styles.title, size && styles.modifiers[size as Size], className)}
className={css(styles.title, size ? styles.modifiers[size as Size] : styles.modifiers[HeadingLevel], className)}
>
{children}
</HeadingLevel>
Expand Down
28 changes: 14 additions & 14 deletions packages/react-core/src/components/Title/__tests__/Title.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ test(`Renders with the ${styles.title}`, () => {
expect(screen.getByRole('heading')).toHaveClass(styles.title);
});

test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => {
test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers.h1} by default`, () => {
render(<Title headingLevel="h1">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true });
expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers.h1}`, { exact: true });
});

test('Renders with custom class name when className prop is passed', () => {
Expand All @@ -36,34 +36,34 @@ test('Renders with custom class name when className prop is passed', () => {
expect(screen.getByRole('heading')).toHaveClass('test-class');
});

test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => {
test('Renders with class name pf-m-h1 by default when "h1" is passed as heading level', () => {
render(<Title headingLevel="h1">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
expect(screen.getByRole('heading')).toHaveClass('pf-m-h1');
});

test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => {
test('Renders with class name pf-m-h2 by default when "h2" is passed as heading level', () => {
render(<Title headingLevel="h2">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
expect(screen.getByRole('heading')).toHaveClass('pf-m-h2');
});

test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => {
test('Renders with class name pf-m-h3 by default when "h3" is passed as heading level', () => {
render(<Title headingLevel="h3">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
expect(screen.getByRole('heading')).toHaveClass('pf-m-h3');
});

test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => {
test('Renders with class name pf-m-h4 by default when "h4" is passed as heading level', () => {
render(<Title headingLevel="h4">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
expect(screen.getByRole('heading')).toHaveClass('pf-m-h4');
});

test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => {
test('Renders with class name pf-m-h5 by default when "h5" is passed as heading level', () => {
render(<Title headingLevel="h5">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
expect(screen.getByRole('heading')).toHaveClass('pf-m-h5');
});

test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => {
test('Renders with class name pf-m-h6 by default when "h6" is passed as heading level', () => {
render(<Title headingLevel="h6">Test</Title>);
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
expect(screen.getByRole('heading')).toHaveClass('pf-m-h6');
});

test('Renders with class name pf-m-md when "md" is passed as title size', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Matches the snapshot 1`] = `
<DocumentFragment>
<h1
class="pf-v5-c-title pf-m-2xl"
class="pf-v5-c-title pf-m-h1"
data-ouia-component-id="ouia-id"
data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
Expand Down
12 changes: 6 additions & 6 deletions packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ import { Title, TitleSizes } from '@patternfly/react-core';
export const TitleCustomSizes: React.FunctionComponent = () => (
<React.Fragment>
<Title headingLevel="h1" size={TitleSizes['4xl']}>
h1 as 4xl
4xl title
</Title>
<Title headingLevel="h2" size="3xl">
h2 as 3xl
3xl title
</Title>
<Title headingLevel="h3" size={TitleSizes['2xl']}>
h3 as 2xl
2xl title
</Title>
<Title headingLevel="h4" size="xl">
h4 as xl
xl title
</Title>
<Title headingLevel="h5" size={TitleSizes.lg}>
h5 as lg
lg title
</Title>
<Title headingLevel="h6" size="md">
h6 as md Title
md title
</Title>
</React.Fragment>
);
12 changes: 6 additions & 6 deletions packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { Title } from '@patternfly/react-core';

export const TitleDefaultSizes: React.FunctionComponent = () => (
<React.Fragment>
<Title headingLevel="h1">h1 defaults to 2xl</Title>
<Title headingLevel="h2">h2 defaults to xl</Title>
<Title headingLevel="h3">h3 defaults to lg</Title>
<Title headingLevel="h4">h4 defaults to md</Title>
<Title headingLevel="h5">h5 defaults to md</Title>
<Title headingLevel="h6">h6 defaults to md</Title>
<Title headingLevel="h1">H1-styled title</Title>
<Title headingLevel="h2">H2-styled title</Title>
<Title headingLevel="h3">H3-styled title</Title>
<Title headingLevel="h4">H4-styled title</Title>
<Title headingLevel="h5">H5-styled title</Title>
<Title headingLevel="h6">H6-styled title</Title>
</React.Fragment>
);
Loading