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

fix(Pagination): Styling discrepancy with HTML version by Venefilyn · Pull Request #2904 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

fix(Pagination): Styling discrepancy with HTML version #2904

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
tlabaj merged 3 commits into from
Sep 26, 2019
Conversation 19 Commits 3 Checks 0 Files changed
Merged

fix(Pagination): Styling discrepancy with HTML version #2904

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
e640ff5
Rebase with upstream
Venefilyn Sep 23, 2019
4a2fc0e
fix(Pagination): Updated aria-label and removed old labelling
Venefilyn Sep 25, 2019
ebff13a
test(Pagination): Fix snapshot
Venefilyn Sep 25, 2019
File filter

Filter by extension

Filter by extension .snap  (1) .ts  (1) .tsx  (5) 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
      • index.ts
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Dropdown/index.ts
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 @@
export * from './Dropdown';
export * from './DropdownMenu';
export * from './DropdownWithContext';
export * from './dropdownConstants';
export * from './DropdownGroup';
export * from './DropdownItem';
Expand Down
2 changes: 1 addition & 1 deletion packages/patternfly-4/react-core/src/components/Pagination/Navigation.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
Expand Up @@ -174,7 +174,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
onChange={(event) => this.onChange(event, lastPage)}
/>
<span aria-hidden="true">
of {pluralize(lastPage, pagesTitle)}
of {pagesTitle ? pluralize(lastPage, pagesTitle) : lastPage}
</span>
</div>
)}
Expand Down
27 changes: 16 additions & 11 deletions packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.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
Expand Up @@ -11,6 +11,8 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
itemsTitle?: string;
/** The text to be displayed on the Options Toggle */
optionsToggle?: string;
/** The Title of the Pagination Options Menu */
itemsPerPageTitle?: string;
/** The first index of the items being paginated */
firstIndex?: number;
/** The last index of the items being paginated */
Expand Down Expand Up @@ -38,6 +40,7 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
itemsTitle = 'items',
optionsToggle = 'Select',
itemsPerPageTitle = 'Items per page',
firstIndex = 0,
lastIndex = 0,
itemCount = 0,
Expand All @@ -53,24 +56,26 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
return (
<div className={css(styles.optionsMenuToggle, isDisabled && styles.modifiers.disabled, styles.modifiers.plain, styles.modifiers.text)} >
{showToggle && (
<DropdownToggle
onEnter={onEnter}
aria-label={optionsToggle}
onToggle={onToggle}
isDisabled={isDisabled || itemCount <= 0}
isOpen={isOpen}
id={`${widgetId}-toggle`}
className={styles.optionsMenuToggleButton}
parentRef={parentRef}
>
<React.Fragment>
<span className={css(styles.optionsMenuToggleText)}>
{typeof ToggleTemplate === 'string' ? (
fillTemplate(ToggleTemplate, { firstIndex, lastIndex, itemCount, itemsTitle })
) : (
<ToggleTemplate firstIndex={firstIndex} lastIndex={lastIndex} itemCount={itemCount} itemsTitle={itemsTitle}/>
)}
</span>
</DropdownToggle>
<DropdownToggle
onEnter={onEnter}
aria-label={optionsToggle}
onToggle={onToggle}
isDisabled={isDisabled || itemCount <= 0}
isOpen={isOpen}
id={`${widgetId}-toggle`}
className={styles.optionsMenuToggleButton}
parentRef={parentRef}
>
</DropdownToggle>
</React.Fragment>
)}
</div>);
};
10 changes: 6 additions & 4 deletions packages/patternfly-4/react-core/src/components/Pagination/Pagination.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
Expand Up @@ -109,15 +109,15 @@ const Pagination: React.FunctionComponent<PaginationProps & InjectedOuiaProps> =
isCompact = false,
perPage = defaultPerPageOptions[0].value,
titles = {
items: 'items',
page: 'page',
items: '',
page: '',
itemsPerPage: 'Items per page',
perPageSuffix: 'per page',
toFirstPage: 'Go to first page',
toPreviousPage: 'Go to previous page',
toLastPage: 'Go to last page',
toNextPage: 'Go to next page',
optionsToggle: 'Select',
optionsToggle: 'Items per page',
currPage: 'Current page',
paginationTitle: 'Pagination'
},
Expand Down Expand Up @@ -172,7 +172,9 @@ const Pagination: React.FunctionComponent<PaginationProps & InjectedOuiaProps> =
{...props}
>
{variant === PaginationVariant.top && (
<div className={css(styles.paginationTotalItems)}>{`${itemCount} ${titles.items}`}</div>
<div className={css(styles.paginationTotalItems)}>
<ToggleTemplate firstIndex={firstIndex} lastIndex={lastIndex} itemCount={itemCount} itemsTitle={titles.items}/>
</div>
)}
<PaginationOptionsMenu
itemsPerPageTitle={titles.itemsPerPage}
Expand Down
38 changes: 23 additions & 15 deletions packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.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
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
import paginationStyles from '@patternfly/react-styles/css/components/Pagination/pagination';
import { css } from '@patternfly/react-styles';
import { Dropdown, DropdownItem, DropdownDirection } from '../Dropdown';
import { Dropdown, DropdownItem, DropdownDirection, DropdownWithContext, DropdownContext } from '../Dropdown';
import { CheckIcon } from '@patternfly/react-icons';
import { OptionsToggle } from './OptionsToggle';
import { ToggleTemplateProps } from './ToggleTemplate';
Expand Down Expand Up @@ -63,10 +63,10 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
itemsTitle: 'items',
toggleTemplate: ({firstIndex, lastIndex, itemCount, itemsTitle}: ToggleTemplateProps) => (
<React.Fragment>
<strong>
<b>
{firstIndex} - {lastIndex}
</strong>{' '}
of<strong>{itemCount}</strong> {itemsTitle}
</b>{' '}
of<b>{itemCount}</b> {itemsTitle}
</React.Fragment>
),
onPerPageSelect: () => null as any
Expand Down Expand Up @@ -97,7 +97,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
key={value}
component="button"
data-action={`per-page-${value}`}
className={css(styles.optionsMenuMenuItem, perPage === value && 'pf-m-selected')}
className={css(perPage === value && 'pf-m-selected')}
onClick={(event) => onPerPageSelect(event, value)}
>
{title}
Expand All @@ -112,24 +112,32 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
}

render() {
const { className, widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
const { widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
const { isOpen } = this.state;

return (
<div
className={css(styles.optionsMenu, className)}
ref={this.parentRef}
<DropdownContext.Provider
value={{
id: widgetId,
onSelect: this.onSelect,
toggleIconClass: styles.optionsMenuToggleIcon,
toggleTextClass: styles.optionsMenuToggleText,
menuClass: styles.optionsMenuMenu,
itemClass: styles.optionsMenuMenuItem,
toggleClass: " ",
baseClass: styles.optionsMenu,
disabledClass: styles.modifiers.disabled,
menuComponent: 'ul',
baseComponent: 'div'
}}
>
<span id={`${widgetId}-label`} hidden>
{itemsPerPageTitle}:
</span>
<Dropdown
<DropdownWithContext
direction={dropDirection}
onSelect={this.onSelect}
isOpen={isOpen}
toggle={
<OptionsToggle
optionsToggle={optionsToggle}
itemsPerPageTitle={itemsPerPageTitle}
showToggle={perPageOptions && perPageOptions.length > 0}
onToggle={this.onToggle}
isOpen={isOpen}
Expand All @@ -146,7 +154,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
dropdownItems={this.renderItems()}
isPlain
/>
</div>
</DropdownContext.Provider>
);
}
}
6 changes: 3 additions & 3 deletions packages/patternfly-4/react-core/src/components/Pagination/ToggleTemplate.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
Expand Up @@ -19,10 +19,10 @@ export const ToggleTemplate = ({
}: ToggleTemplateProps) => {
return (
<React.Fragment>
<strong>
<b>
{firstIndex} - {lastIndex}
</strong>{' '}
of <strong>{itemCount}</strong> {itemsTitle}
</b>{' '}
of <b>{itemCount}</b> {itemsTitle}
</React.Fragment>
);
};
Loading
Back | FazBrowse Home | New Git URL