Skip to content

fix(Toolbar*): change spelling of visiblity prop #4560

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
jschuler merged 2 commits into from
Aug 3, 2020
Merged

fix(Toolbar*): change spelling of visiblity prop #4560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1de1a4f
Revert "Revert "fix(Toolbar*): change spelling of visiblity prop (#45…
zanewoodfin Jul 17, 2020
8da5358
docs(Toolbar*): add Toolbar visibility demos
zanewoodfin Aug 3, 2020
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
19 changes: 18 additions & 1 deletion packages/react-core/src/components/Toolbar/ToolbarContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
/** Classes applied to root element of the data toolbar content row */
className?: string;
/** Visibility at various breakpoints. */
visibility?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Deprecated: prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
Expand Down Expand Up @@ -55,6 +63,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
children,
isExpanded,
toolbarId,
visibility,
visiblity,
alignment,
clearAllFilters,
Expand All @@ -63,11 +72,19 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
...props
} = this.props;

if (visiblity !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'The ToolbarContent visiblity prop has been deprecated. ' +
'Please use the correctly spelled visibility prop instead.'
);
}

return (
<div
className={css(
styles.toolbarContent,
formatBreakpointMods(visiblity, styles),
formatBreakpointMods(visibility || visiblity, styles),
formatBreakpointMods(alignment, styles),
className
)}
Expand Down
32 changes: 30 additions & 2 deletions packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
/** A type modifier which modifies spacing specifically depending on the type of group */
variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group';
/** Visibility at various breakpoints. */
visibility?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Deprecated: prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
Expand Down Expand Up @@ -54,13 +62,33 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,

class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
render() {
const { visiblity, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props;
const {
visibility,
visiblity,
alignment,
spacer,
spaceItems,
className,
variant,
children,
innerRef,
...props
} = this.props;

if (visiblity !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'The ToolbarGroup visiblity prop has been deprecated. ' +
'Please use the correctly spelled visibility prop instead.'
);
}

return (
<div
className={css(
styles.toolbarGroup,
variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
formatBreakpointMods(visiblity, styles),
formatBreakpointMods(visibility || visiblity, styles),
formatBreakpointMods(alignment, styles),
formatBreakpointMods(spacer, styles),
formatBreakpointMods(spaceItems, styles),
Expand Down
19 changes: 18 additions & 1 deletion packages/react-core/src/components/Toolbar/ToolbarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
| 'chip-group'
| 'separator';
/** Visibility at various breakpoints. */
visibility?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Deprecated: prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
Expand Down Expand Up @@ -61,6 +69,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
className,
variant,
visibility,
visiblity,
alignment,
spacer,
Expand All @@ -72,6 +81,14 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
}

if (visiblity !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'The ToolbarItem visiblity prop has been deprecated. ' +
'Please use the correctly spelled visibility prop instead.'
);
}

return (
<div
className={css(
Expand All @@ -80,7 +97,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
styles.modifiers[
toCamel(variant) as 'bulkSelect' | 'overflowMenu' | 'pagination' | 'searchFilter' | 'label' | 'chipGroup'
],
formatBreakpointMods(visiblity, styles),
formatBreakpointMods(visibility || visiblity, styles),
formatBreakpointMods(alignment, styles),
formatBreakpointMods(spacer, styles),
className
Expand Down
19 changes: 18 additions & 1 deletion packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
/** Controls when filters are shown and when the toggle button is hidden. */
breakpoint: 'md' | 'lg' | 'xl' | '2xl';
/** Visibility at various breakpoints. */
visibility?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Deprecated: prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
Expand Down Expand Up @@ -60,6 +68,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
const {
toggleIcon,
variant,
visibility,
visiblity,
breakpoint,
alignment,
Expand All @@ -75,6 +84,14 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
console.error('ToolbarToggleGroup will not be visible without a breakpoint or toggleIcon.');
}

if (visiblity !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'The ToolbarToggleGroup visiblity prop has been deprecated. ' +
'Please use the correctly spelled visibility prop instead.'
);
}

return (
<ToolbarContext.Consumer>
{({ isExpanded, toggleIsExpanded }) => (
Expand Down Expand Up @@ -102,7 +119,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
| 'showOnXl'
| 'showOn_2xl'
],
formatBreakpointMods(visiblity, styles),
formatBreakpointMods(visibility || visiblity, styles),
formatBreakpointMods(alignment, styles),
formatBreakpointMods(spacer, styles),
formatBreakpointMods(spaceItems, styles),
Expand Down
10 changes: 10 additions & 0 deletions packages/react-integration/demo-app-ts/src/Demos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,16 @@ export const Demos: DemoInterface[] = [
name: 'Toolbar Demo',
componentType: Examples.ToolbarDemo
},
{
id: 'toolbar-visibility-demo',
name: 'Toolbar Visibility Demo',
componentType: Examples.ToolbarVisibilityDemo
},
{
id: 'toolbar-visiblity-demo',
name: 'Toolbar Visiblity Demo (Deprecated)',
componentType: Examples.ToolbarVisiblityDemo
},
{
id: 'tooltip-demo',
name: 'Tooltip Demo',
Expand Down
132 changes: 132 additions & 0 deletions .../react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisibilityDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from 'react';
import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
import FilterIcon from '@patternfly/react-icons/dist/js/icons/filter-icon';

export class ToolbarVisibilityDemo extends React.Component {
static displayName = 'ToolbarVisibilityDemo';

render() {
const toolbarContents = (
<React.Fragment>
<ToolbarContent visibility={{ default: 'visible', md: 'hidden' }}>ToolbarContent visibility sm</ToolbarContent>
<ToolbarContent visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
ToolbarContent visibility md
</ToolbarContent>
<ToolbarContent visibility={{ default: 'hidden', lg: 'visible', xl: 'hidden' }}>
ToolbarContent visibility lg
</ToolbarContent>
<ToolbarContent visibility={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }}>
ToolbarContent visibility xl
</ToolbarContent>
<ToolbarContent visibility={{ default: 'hidden', '2xl': 'visible' }}>
ToolbarContent visibility 2xl
</ToolbarContent>
</React.Fragment>
);

const toolbarGroups = (
<React.Fragment>
<ToolbarGroup visibility={{ default: 'visible', md: 'hidden' }}>ToolbarGroup visibility sm</ToolbarGroup>
<ToolbarGroup visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
ToolbarGroup visibility md
</ToolbarGroup>
<ToolbarGroup visibility={{ default: 'hidden', lg: 'visible', xl: 'hidden' }}>
ToolbarGroup visibility lg
</ToolbarGroup>
<ToolbarGroup visibility={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }}>
ToolbarGroup visibility xl
</ToolbarGroup>
<ToolbarGroup visibility={{ default: 'hidden', '2xl': 'visible' }}>ToolbarGroup visibility 2xl</ToolbarGroup>
</React.Fragment>
);

const toolbarItems = (
<React.Fragment>
<ToolbarItem visibility={{ default: 'visible', md: 'hidden' }}>ToolbarItem visibility sm</ToolbarItem>
<ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
ToolbarItem visibility md
</ToolbarItem>
<ToolbarItem visibility={{ default: 'hidden', lg: 'visible', xl: 'hidden' }}>
ToolbarItem visibility lg
</ToolbarItem>
<ToolbarItem visibility={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }}>
ToolbarItem visibility xl
</ToolbarItem>
<ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>ToolbarItem visibility 2xl</ToolbarItem>
</React.Fragment>
);

const toolbarToggleGroups = (
<React.Fragment>
<Toolbar>
<ToolbarContent>
<ToolbarToggleGroup
toggleIcon={<FilterIcon />}
breakpoint="md"
visibility={{ default: 'visible', md: 'hidden' }}
>
ToolbarToggleGroup visibility sm
</ToolbarToggleGroup>
</ToolbarContent>
</Toolbar>
<Toolbar>
<ToolbarContent>
<ToolbarToggleGroup
toggleIcon={<FilterIcon />}
breakpoint="lg"
visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}
>
ToolbarToggleGroup visibility md
</ToolbarToggleGroup>
</ToolbarContent>
</Toolbar>
<Toolbar>
<ToolbarContent>
<ToolbarToggleGroup
toggleIcon={<FilterIcon />}
breakpoint="xl"
visibility={{ default: 'hidden', lg: 'visible', xl: 'hidden' }}
>
ToolbarToggleGroup visibility lg
</ToolbarToggleGroup>
</ToolbarContent>
</Toolbar>
<Toolbar>
<ToolbarContent>
<ToolbarToggleGroup
toggleIcon={<FilterIcon />}
breakpoint="2xl"
visibility={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }}
>
ToolbarToggleGroup visibility xl
</ToolbarToggleGroup>
</ToolbarContent>
</Toolbar>
<Toolbar>
<ToolbarContent>
<ToolbarToggleGroup
toggleIcon={<FilterIcon />}
breakpoint="md"
visibility={{ default: 'hidden', '2xl': 'visible' }}
>
ToolbarToggleGroup visibility 2xl
</ToolbarToggleGroup>
</ToolbarContent>
</Toolbar>
</React.Fragment>
);

return (
<div id="toolbar-visibility-demo">
<Toolbar>{toolbarContents}</Toolbar>
<Toolbar>
<ToolbarContent>{toolbarGroups}</ToolbarContent>
</Toolbar>
<Toolbar>
<ToolbarContent>{toolbarItems}</ToolbarContent>
</Toolbar>
{toolbarToggleGroups}
</div>
);
}
}
Loading