From 8eb46d1ebe6e6207b44b45839bd874cafb7b77e5 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 26 Oct 2022 16:17:25 -0400 Subject: [PATCH 1/5] feat(applauncher): replace input with search input --- .../ApplicationLauncher/ApplicationLauncher.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 53fbd0a250f..8dcf9ec5b8c 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -94,7 +94,16 @@ export class ApplicationLauncher extends React.Component onSearch(value)} {...searchProps} /> +======= + onSearch(value)} + {...searchProps} + /> +>>>>>>> f04e8c2bc (feat(applauncher): replace input with search input) } > From f595385496b14d131d2c4b2b70911ced7af0d986 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 9 Nov 2022 14:26:19 -0500 Subject: [PATCH 2/5] rebase --- .../ApplicationLauncher/ApplicationLauncher.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 8dcf9ec5b8c..53fbd0a250f 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -94,16 +94,7 @@ export class ApplicationLauncher extends React.Component onSearch(value)} {...searchProps} /> -======= - onSearch(value)} - {...searchProps} - /> ->>>>>>> f04e8c2bc (feat(applauncher): replace input with search input) } > From 49e01fb04d550de678ba81180ae080ca10eab55d Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 25 Oct 2022 15:57:19 -0400 Subject: [PATCH 3/5] wip tabs border styling update --- .../react-core/src/components/Tabs/Tabs.tsx | 14 +- .../components/Tabs/__tests__/Tabs.test.tsx | 44 +- packages/react-core/src/demos/Tabs.md | 1 - .../Tabs/TabsAndTablesAutoWidthTabs.tsx | 442 ++++++++++++++++++ 4 files changed, 469 insertions(+), 32 deletions(-) create mode 100644 packages/react-core/src/demos/examples/Tabs/TabsAndTablesAutoWidthTabs.tsx diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index bd21df924b1..34ed3d8dcbe 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -61,10 +61,8 @@ export interface TabsProps extends Omit { isSecondary: false, isVertical: false, isBox: false, - hasBorderBottom: true, + hasNoBorderBottom: false, leftScrollAriaLabel: 'Scroll left', rightScrollAriaLabel: 'Scroll right', component: TabsComponent.div, @@ -375,9 +373,7 @@ export class Tabs extends React.Component { isSecondary, isVertical, isBox, - hasBorderBottom, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - hasSecondaryBorderBottom, + hasNoBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, @@ -460,7 +456,7 @@ export class Tabs extends React.Component { 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, diff --git a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx index 0166135bf04..65d8eec529f 100644 --- a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx +++ b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx @@ -357,7 +357,7 @@ test('should render box tabs of light variant', () => { test('should render tabs with no bottom border', () => { const { asFragment } = render( - + "Tab item 1"}> Tab 1 section @@ -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( - + "Tab item 1"}> Tab 1 section @@ -392,25 +392,25 @@ test('should not render tabs with secondary border bottom when not passed hasSec expect(tabsContainer).not.toHaveClass('pf-m-border-bottom'); }); -// test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => { -// render( -// -// "Tab item 1"}> -// Tab 1 section -// -// "Tab item 2"}> -// Tab 2 section -// -// "Tab item 3"}> -// Tab 3 section -// -// -// ); -// -// const tabsContainer = screen.queryByLabelText('Secondary bottom border'); -// -// expect(tabsContainer).toHaveClass('pf-m-border-bottom'); -// }); +test('should render secondary tabs with border bottom', () => { + render( + + "Tab item 1"}> + Tab 1 section + + "Tab item 2"}> + Tab 2 section + + "Tab item 3"}> + Tab 3 section + + + ); + + const tabsContainer = screen.queryByLabelText('Secondary bottom border'); + + expect(tabsContainer).toHaveClass('pf-m-border-bottom'); +}); test('should not render scroll buttons by default', () => { render( diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index 258741aaa7d..c6aeeae04be 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -383,7 +383,6 @@ TabsOpenWithSecondaryTabsDemo = () => { { + // tab properties + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = (tabIndex: number) => { + setActiveTabKey(tabIndex); + }; + + // secondary tab properties + const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState(10); + const handleSecondaryTabClick = (tabIndex: number) => { + setSecondaryActiveTabKey(tabIndex); + }; + + // drawer properties + const [isExpanded, setIsExpanded] = React.useState(false); + + // table properties + // In real usage, this data would come from some external source like an API via props. + const repositories: Repository[] = [ + { name: 'Node 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' }, + { name: 'Node 2', branches: 8, prs: 30, workspaces: 2, lastCommit: '2 days ago' }, + { name: 'Node 3', branches: 12, prs: 48, workspaces: 13, lastCommit: '30 days ago' }, + { name: 'Node 4', branches: 3, prs: 8, workspaces: 20, lastCommit: '8 days ago' }, + { name: 'Node 5', branches: 33, prs: 21, workspaces: 2, lastCommit: '26 days ago' } + ]; + + const columnNames = { + name: 'Repositories', + branches: 'Branches', + prs: 'Pull requests', + workspaces: 'Workspaces', + lastCommit: 'Last commit' + }; + + const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const setRepoSelected = (event: React.FormEvent, repo: Repository, isSelecting = true) => { + setSelectedRepoNames(prevSelected => { + const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name); + return isSelecting ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames; + }); + event.stopPropagation(); + }; + const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map(r => r.name) : []); + const allRowsSelected = selectedRepoNames.length === repositories.length; + const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); + + const [rowClicked, setRowClicked] = React.useState(null); + const isRowClicked = (repo: Repository) => rowClicked === repo.name; + + const defaultActions: IAction[] = [ + { + title: 'Some action', + onClick: event => { + event.stopPropagation(); + console.log('clicked on Some action'); + } + }, + { + title: Link action, + onClick: event => { + event.stopPropagation(); + console.log('clicked on Link action'); + } + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: event => { + event.stopPropagation(); + console.log('clicked on Third action'); + } + } + ]; + + const customActionsToggle = (props: CustomActionsToggleProps) => ( + { + props.onToggle(value); + event.stopPropagation(); + }} + /> + ); + + const toolbar = ( + + + } breakpoint="xl"> + + {}} - variant={SelectVariant.single} - aria-label="Select Input" - placeholderText="Name" - /> - - - - - - - - - - - - - - - - - {}} - toggle={ {}} />} - isOpen={false} - isPlain - dropdownItems={[]} - /> - - - - - - - - ); - - const tableComposable = ( - - - - onSelectAll(isSelecting), - isSelected: allRowsSelected - }} - /> - {columnNames.name} - {columnNames.branches} - {columnNames.prs} - {columnNames.workspaces} - {columnNames.lastCommit} - - - - {repositories.map((repo, rowIndex) => ( - { - if ((event.target as HTMLInputElement).type !== 'checkbox') { - setRowClicked(rowClicked === repo.name ? null : repo.name); - setIsExpanded(!isRowClicked(repo)); - } - }} - isHoverable - isRowSelected={repo.name === rowClicked} - > - setRepoSelected(event, repo, isSelected), - isSelected: isRepoSelected(repo) - }} - /> - - {repo.name} - - - - - {repo.branches} - - - - - - - - {repo.prs} - - - - - - - - {repo.workspaces} - - - - - - {repo.lastCommit} - - - - - ))} - - - ); - - const panelContent = ( - - - - { - setRowClicked(null); - setIsExpanded(false); - }} - /> - - - - - {rowClicked} - - - - siemur/test-space - - - - - handleSecondaryTabClick(Number(tabIndex))} - hasNoBorderBottom - inset={{ default: 'insetMd', md: 'insetSm' }} - id="tabs-tables-secondary-tabs" - > - Overview} tabContentId={`tabContent${10}`} /> - Activity} tabContentId={`tabContent${11}`} /> - Status} tabContentId={`tabContent${12}`} /> - - - - - - - - - ); - - const tabContent = ( - - - - {toolbar} - - {tableComposable} - - - - - ); - - return ( - - - - - Nodes - - - - handleTabClick(Number(tabIndex))} - usePageInsets - id="tabs-table-tabs-list" - > - Nodes} tabContentId={`tabContent${0}`} /> - Node connectors} tabContentId={`tabContent${1}`} /> - - - - - - - - - ); -};