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(Tabs): consumed Penta updates #10044

Merged
merged 3 commits into from
Jan 31, 2024
Merged

feat(Tabs): consumed Penta updates #10044

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
14997d6
feat(Tabs): consumed Penta updates
thatblindgeye Jan 25, 2024
0c51f8d
Updated unit tests
thatblindgeye Jan 25, 2024
fbd162d
Updated integration tests
thatblindgeye Jan 25, 2024
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/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"tslib": "^2.5.0"
},
"devDependencies": {
"@patternfly/patternfly": "6.0.0-alpha.66",
"@patternfly/patternfly": "6.0.0-alpha.69",
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-replace": "^5.0.2",
Expand Down
53 changes: 28 additions & 25 deletions packages/react-core/src/components/Tabs/TabContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
ouiaSafe?: boolean;
}

// TODO: Update with issue #9909
// const variantStyle = {
// default: ''
// };
const variantStyle = {
default: '',
secondary: styles.modifiers.secondary
};

const TabContentBase: React.FunctionComponent<TabContentProps> = ({
id,
Expand All @@ -56,27 +56,30 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({

return (
<TabsContextConsumer>
{({ variant }: TabsContextProps) => (
<section
ref={innerRef}
hidden={children ? null : child.props.eventKey !== activeKey}
// TODO: Update "variant" with issue #9909
className={
children
? css(styles.tabContent, className, variant)
: css(styles.tabContent, child.props.className, variant)
}
id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
aria-label={ariaLabel}
aria-labelledby={labelledBy}
role="tabpanel"
tabIndex={0}
{...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
{...props}
>
{children || child.props.children}
</section>
)}
{({ variant }: TabsContextProps) => {
const variantClass = variantStyle[variant];

return (
<section
ref={innerRef}
hidden={children ? null : child.props.eventKey !== activeKey}
className={
children
? css(styles.tabContent, className, variantClass)
: css(styles.tabContent, child.props.className, variantClass)
}
id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
aria-label={ariaLabel}
aria-labelledby={labelledBy}
role="tabpanel"
tabIndex={0}
{...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
{...props}
>
{children || child.props.children}
</section>
);
}}
</TabsContextConsumer>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Tabs/TabTitleIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const TabTitleIcon: React.FunctionComponent<TabTitleIconProps> = ({
className = '',
...props
}: TabTitleIconProps) => (
<span className={css(styles.tabsItemIcon, className)} {...props}>
<span className={css(`${styles.tabs}__item-icon`, className)} {...props}>
{children}
</span>
);
Expand Down
60 changes: 30 additions & 30 deletions packages/react-core/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
import { css } from '@patternfly/react-styles';
import { PickOptional } from '../../helpers/typeUtils';
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
Expand Down Expand Up @@ -38,7 +37,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
/** Additional classes added to the tabs */
className?: string;
/** Tabs background color variant */
variant?: 'default';
variant?: 'default' | 'secondary';
/** The index of the active tab */
activeKey?: number | string;
/** The index of the default active tab. Set this for uncontrolled Tabs */
Expand All @@ -55,8 +54,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
id?: string;
/** Enables the filled tab list layout */
isFilled?: boolean;
/** Enables secondary tab styling */
isSecondary?: boolean;
/** Enables subtab tab styling */
isSubtab?: boolean;
/** Enables box styling to the tab component */
isBox?: boolean;
/** Enables vertical tab styling */
Expand Down Expand Up @@ -119,7 +118,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle

const variantStyle = {
default: '',
light300: styles.modifiers.colorSchemeLight_300
secondary: styles.modifiers.secondary
};

interface TabsState {
Expand Down Expand Up @@ -177,7 +176,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
activeKey: 0,
onSelect: () => undefined as any,
isFilled: false,
isSecondary: false,
isSubtab: false,
isVertical: false,
isBox: false,
hasNoBorderBottom: false,
Expand Down Expand Up @@ -247,7 +246,6 @@ class Tabs extends React.Component<TabsProps, TabsState> {
if (container && !this.props.isVertical && !isOverflowHorizontal) {
// get first element and check if it is in view
const overflowOnLeft = !isElementInView(container, container.firstChild as HTMLElement, false);

// get last element and check if it is in view
const overflowOnRight = !isElementInView(container, container.lastChild as HTMLElement, false);

Expand Down Expand Up @@ -392,7 +390,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
defaultActiveKey,
id,
isFilled,
isSecondary,
isSubtab,
isVertical,
isBox,
hasNoBorderBottom,
Expand Down Expand Up @@ -473,7 +471,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
className={css(
styles.tabs,
isFilled && styles.modifiers.fill,
isSecondary && styles.modifiers.secondary,
isSubtab && styles.modifiers.subtab,
isVertical && styles.modifiers.vertical,
isVertical && expandable && formatBreakpointMods(expandable, styles),
isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
Expand Down Expand Up @@ -518,33 +516,35 @@ class Tabs extends React.Component<TabsProps, TabsState> {
</GenerateId>
)}
{renderScrollButtons && (
<button
type="button"
className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
aria-label={backScrollAriaLabel || leftScrollAriaLabel}
onClick={this.scrollBack}
disabled={disableBackScrollButton}
aria-hidden={disableBackScrollButton}
ref={this.leftScrollButtonRef}
>
<AngleLeftIcon />
</button>
<div className={css(styles.tabsScrollButton)}>
<Button
aria-label={backScrollAriaLabel || leftScrollAriaLabel}
onClick={this.scrollBack}
isDisabled={disableBackScrollButton}
aria-hidden={disableBackScrollButton}
ref={this.leftScrollButtonRef}
variant="plain"
>
<AngleLeftIcon />
</Button>
</div>
)}
<ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
{isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
{hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
</ul>
{renderScrollButtons && (
<button
type="button"
className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
onClick={this.scrollForward}
disabled={disableForwardScrollButton}
aria-hidden={disableForwardScrollButton}
>
<AngleRightIcon />
</button>
<div className={css(styles.tabsScrollButton)}>
<Button
aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
onClick={this.scrollForward}
isDisabled={disableForwardScrollButton}
aria-hidden={disableForwardScrollButton}
variant="plain"
>
<AngleRightIcon />
</Button>
</div>
)}
{onAdd !== undefined && (
<span className={css(styles.tabsAdd)}>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Tabs/TabsContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';

export interface TabsContextProps {
variant: 'default' | 'light300';
variant: 'default' | 'secondary';
mountOnEnter: boolean;
unmountOnExit: boolean;
localActiveKey: string | number;
Expand Down
2 changes: 1 addition & 1 deletion ...react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
<DocumentFragment>
<section
aria-label="string"
class="pf-v5-c-tab-content string default"
class="pf-v5-c-tab-content string"
data-ouia-component-type="PF5/TabContent"
data-ouia-safe="true"
id="string"
Expand Down
32 changes: 16 additions & 16 deletions packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,19 +251,19 @@ test('should render filled tabs', () => {
expect(asFragment()).toMatchSnapshot();
});

test('should render secondary tabs', () => {
test('should render subtabs', () => {
const { asFragment } = render(
<Tabs id="primarieTabs">
<Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
<Tabs isSecondary id="secondaryTabs">
<Tab id="secondary tab1" eventKey={10} title={<TabTitleText>"Secondary Tab item 1"</TabTitleText>}>
Secondary Tab 1 section
<Tabs isSubtab id="subtabs">
<Tab id="subtab1" eventKey={10} title={<TabTitleText>"Subtab item 1"</TabTitleText>}>
Subtab 1 section
</Tab>
<Tab id="secondary tab2" eventKey={11} title={<TabTitleText>"Secondary Tab item 2"</TabTitleText>}>
Secondary Tab 2 section
<Tab id="subtab2" eventKey={11} title={<TabTitleText>"Subtab item 2"</TabTitleText>}>
Subtab 2 section
</Tab>
<Tab id="secondary tab3" eventKey={12} title={<TabTitleText>"Secondary Tab item 3"</TabTitleText>}>
Secondary Tab 3 section
<Tab id="subtab3" eventKey={12} title={<TabTitleText>"Subtab item 3"</TabTitleText>}>
Subtab 3 section
</Tab>
</Tabs>
</Tab>
Expand Down Expand Up @@ -338,9 +338,9 @@ test('should render tabs with separate content', () => {
expect(asFragment()).toMatchSnapshot();
});

test('should render box tabs of light variant', () => {
test('should render box tabs of secondary variant', () => {
const { asFragment } = render(
<Tabs id="boxLightVariantTabs" isBox variant="light300">
<Tabs id="boxSecondaryVariantTabs" isBox variant="secondary">
<Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
Tab 1 section
</Tab>
Expand Down Expand Up @@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => {
expect(asFragment()).toMatchSnapshot();
});

test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => {
test('should render subtabs with no bottom border when passed hasNoBorderBottom', () => {
render(
<Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
<Tabs isSubtab hasNoBorderBottom id="noBottomBorderTabs" aria-label="Subtab bottom border">
<Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
Tab 1 section
</Tab>
Expand All @@ -387,14 +387,14 @@ test('should render secondary tabs with no bottom border when passed hasNoBorder
</Tabs>
);

const tabsContainer = screen.queryByLabelText('Secondary bottom border');
const tabsContainer = screen.queryByLabelText('Subtab bottom border');

expect(tabsContainer).toHaveClass('pf-m-no-border-bottom');
});

test('should render secondary tabs with border bottom', () => {
test('should render subtabs with border bottom', () => {
render(
<Tabs isSecondary id="bottomBorderTabs" aria-label="Secondary bottom border">
<Tabs isSubtab id="bottomBorderTabs" aria-label="Subtab bottom border">
<Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
Tab 1 section
</Tab>
Expand All @@ -407,7 +407,7 @@ test('should render secondary tabs with border bottom', () => {
</Tabs>
);

const tabsContainer = screen.queryByLabelText('Secondary bottom border');
const tabsContainer = screen.queryByLabelText('Subtab bottom border');

expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom');
});
Expand Down
Loading
Loading