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

chore(tabs): change border bottom API #8517

Merged
merged 5 commits into from
Jan 12, 2023
Merged

chore(tabs): change border bottom API #8517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8eb46d1
feat(applauncher): replace input with search input
jenny-s51 Oct 26, 2022
f595385
rebase
jenny-s51 Nov 9, 2022
49e01fb
wip tabs border styling update
jenny-s51 Oct 25, 2022
65b25e5
fix jest tests
jenny-s51 Jan 9, 2023
00ee70f
Delete TabsAndTablesAutoWidthTabs.tsx
jenny-s51 Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 5 additions & 9 deletions packages/react-core/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
isBox?: boolean;
/** Enables vertical tab styling */
isVertical?: boolean;
/** Enables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. */
hasBorderBottom?: boolean;
/** Enables border bottom styling for secondary tabs */
hasSecondaryBorderBottom?: boolean;
/** Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true. */
hasNoBorderBottom?: boolean;
/** Aria-label for the left scroll button */
leftScrollAriaLabel?: string;
/** Aria-label for the right scroll button */
Expand Down Expand Up @@ -177,7 +175,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
isSecondary: false,
isVertical: false,
isBox: false,
hasBorderBottom: true,
hasNoBorderBottom: false,
leftScrollAriaLabel: 'Scroll left',
rightScrollAriaLabel: 'Scroll right',
component: TabsComponent.div,
Expand Down Expand Up @@ -375,9 +373,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
isSecondary,
isVertical,
isBox,
hasBorderBottom,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
hasSecondaryBorderBottom,
hasNoBorderBottom,
leftScrollAriaLabel,
rightScrollAriaLabel,
'aria-label': ariaLabel,
Expand Down Expand Up @@ -460,7 +456,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
isBox && styles.modifiers.box,
showScrollButtons && styles.modifiers.scrollable,
usePageInsets && styles.modifiers.pageInsets,
!hasBorderBottom && styles.modifiers.noBorderBottom,
hasNoBorderBottom && styles.modifiers.noBorderBottom,
formatBreakpointMods(inset, styles),
variantStyle[variant],
hasOverflowTab && styles.modifiers.overflow,
Expand Down
46 changes: 23 additions & 23 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 @@ -357,7 +357,7 @@ test('should render box tabs of light variant', () => {

test('should render tabs with no bottom border', () => {
const { asFragment } = render(
<Tabs id="noBottomBorderTabs" hasBorderBottom={false}>
<Tabs id="noBottomBorderTabs" hasNoBorderBottom>
<Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
Tab 1 section
</Tab>
Expand All @@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => {
expect(asFragment()).toMatchSnapshot();
});

test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => {
render(
<Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">
<Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
<Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
Tab 1 section
</Tab>
Expand All @@ -389,28 +389,28 @@ test('should not render tabs with secondary border bottom when not passed hasSec

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

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

// test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => {
// render(
// <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border" hasSecondaryBorderBottom>
// <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
// Tab 1 section
// </Tab>
// <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
// Tab 2 section
// </Tab>
// <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
// Tab 3 section
// </Tab>
// </Tabs>
// );
//
// const tabsContainer = screen.queryByLabelText('Secondary bottom border');
//
// expect(tabsContainer).toHaveClass('pf-m-border-bottom');
// });
test('should render secondary tabs with border bottom', () => {
render(
<Tabs isSecondary id="bottomBorderTabs" aria-label="Secondary bottom border">
<Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
Tab 1 section
</Tab>
<Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
Tab 2 section
</Tab>
<Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
Tab 3 section
</Tab>
</Tabs>
);

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

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

test('should not render scroll buttons by default', () => {
render(
Expand Down
1 change: 0 additions & 1 deletion packages/react-core/src/demos/Tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,6 @@ TabsOpenWithSecondaryTabsDemo = () => {
<TabContentBody>
<Tabs
isSecondary
hasSecondaryBorderBottom
activeKey={activeTabKeySecondary}
onSelect={handleTabClickSecondary}
usePageInsets
Expand Down