FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(Tabs): Implement overflow styles for secondary tabs by jessiehuff · Pull Request #2512 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

feat(Tabs): Implement overflow styles for secondary tabs #2512

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
redallen merged 4 commits into from
Jul 17, 2019
Conversation 8 Commits 4 Checks 0 Files changed
Merged

feat(Tabs): Implement overflow styles for secondary tabs #2512

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
ba18f01
Add secondary overflow example
jessiehuff Jul 12, 2019
a114af7
Add secondary modifier to buttons
jessiehuff Jul 16, 2019
d80aa62
Fix sentence case
jessiehuff Jul 16, 2019
ff377de
Update snapshots
jessiehuff Jul 16, 2019
File filter

Filter by extension

Filter by extension .md  (1) .snap  (1) .tsx  (1) All 3 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
    • Tabs.md
    • Tabs.tsx
      • Tabs.test.tsx.snap
69 changes: 67 additions & 2 deletions packages/patternfly-4/react-core/src/components/Tabs/Tabs.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ class SimpleTabs extends React.Component {
}
```

## Scroll buttons tabs
## Scroll buttons primary tabs
```js
import React from 'react';
import { Tabs, Tab, TabsVariant, TabContent } from '@patternfly/react-core';

class ScrollButtonsTabs extends React.Component {
class ScrollButtonsPrimaryTabs extends React.Component {
constructor(props) {
super(props);
this.state = {
Expand Down Expand Up @@ -166,6 +166,71 @@ class SecondaryTabs extends React.Component {
}
```

## Scroll buttons secondary tabs
```js
import React from 'react';
import { Tabs, Tab, TabsVariant, TabContent } from '@patternfly/react-core';

class ScrollButtonsSecondaryTabs extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTabKey: 0
};

// Toggle currently active tab
this.handleTabClick = (event, tabIndex) => {
this.setState({
activeTabKey: tabIndex
});
};
}

render() {
return (
<Tabs activeKey={this.state.activeTabKey} isSecondary onSelect={this.handleTabClick}>
<Tab eventKey={0} title="Tab item 1">
Tab 1 section
</Tab>
<Tab eventKey={1} title="Tab item 2">
Tab 2 section
</Tab>
<Tab eventKey={2} title="Tab item 3">
Tab 3 section
</Tab>
<Tab eventKey={3} title="Tab item 4">
Tab 4 section
</Tab>
<Tab eventKey={4} title="Tab item 5">
Tab 5 section
</Tab>
<Tab eventKey={5} title="Tab item 6">
Tab 6 section
</Tab>
<Tab eventKey={6} title="Tab item 7">
Tab 7 section
</Tab>
<Tab eventKey={7} title="Tab item 8">
Tab 8 section
</Tab>
<Tab eventKey={8} title="Tab item 9">
Tab 9 section
</Tab>
<Tab eventKey={9} title="Tab item 10">
Tab 10 section
</Tab>
<Tab eventKey={10} title="Tab item 11">
Tab 11 section
</Tab>
<Tab eventKey={11} title="Tab item 12">
Tab 12 section
</Tab>
</Tabs>
);
}
}
```

## Filled buttons tabs
```js
import React from 'react';
Expand Down
11 changes: 4 additions & 7 deletions packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
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 { Omit } from '../../helpers/typeUtils';
import { AngleLeftIcon, AngleRightIcon } from '@patternfly/react-icons';
Expand Down Expand Up @@ -64,7 +65,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
isFilled: false,
isSecondary: false,
leftScrollAriaLabel: 'Scroll left',
rightScrollAriaLabel: 'Scroll Right',
rightScrollAriaLabel: 'Scroll right',
variant: TabsVariant.div
};

Expand Down Expand Up @@ -204,15 +205,13 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
)}
{...props}
>
{!isSecondary && (
<button
className={css(styles.tabsScrollButton)}
className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
aria-label={leftScrollAriaLabel}
onClick={this.scrollLeft}
>
<AngleLeftIcon />
</button>
)}
<ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons}>
{React.Children.map(children, (child: any, index) => (
<li
Expand All @@ -239,15 +238,13 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
</li>
))}
</ul>
{!isSecondary && (
<button
Comment thread
jessiehuff marked this conversation as resolved.
className={css(styles.tabsScrollButton)}
className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
aria-label={rightScrollAriaLabel}
Comment thread
jessiehuff marked this conversation as resolved.
onClick={this.scrollRight}
>
<AngleRightIcon />
</button>
)}
</Component>
{React.Children.map(children, (child: any, index) =>
!child.props.children ? null : (
Expand Down
24 changes: 12 additions & 12 deletions packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
isSecondary={false}
leftScrollAriaLabel="Scroll left"
onSelect={[Function]}
rightScrollAriaLabel="Scroll Right"
rightScrollAriaLabel="Scroll right"
variant="div"
>
<div
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -341,7 +341,7 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
isSecondary={false}
leftScrollAriaLabel="Scroll left"
onSelect={[Function]}
rightScrollAriaLabel="Scroll Right"
rightScrollAriaLabel="Scroll right"
variant="div"
>
<div
Expand Down Expand Up @@ -509,7 +509,7 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -673,7 +673,7 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
isSecondary={false}
leftScrollAriaLabel="Scroll left"
onSelect={[Function]}
rightScrollAriaLabel="Scroll Right"
rightScrollAriaLabel="Scroll right"
variant="div"
>
<div
Expand Down Expand Up @@ -841,7 +841,7 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -1069,7 +1069,7 @@ exports[`should render accessible tabs 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -1198,7 +1198,7 @@ exports[`should render filled tabs 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -1324,7 +1324,7 @@ exports[`should render secondary tabs 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand All @@ -1351,7 +1351,7 @@ exports[`should render secondary tabs 1`] = `
isSecondary={false}
leftScrollAriaLabel="Scroll left"
onSelect={[Function]}
rightScrollAriaLabel="Scroll Right"
rightScrollAriaLabel="Scroll right"
variant="div"
>
<ForwardRef
Expand Down Expand Up @@ -1481,7 +1481,7 @@ exports[`should render simple tabs 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -1607,7 +1607,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
</li>
</ul>
<button
aria-label="Scroll Right"
aria-label="Scroll right"
className="pf-c-tabs__scroll-button"
onClick={[Function]}
>
Expand Down
Back | FazBrowse Home | New Git URL