Skip to content

fix(Toolbar): remove deprecated visiblity #8212

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
nicolethoen merged 1 commit into from
Oct 13, 2022
Merged

fix(Toolbar): remove deprecated visiblity #8212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 1 addition & 18 deletions 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 @@ -17,14 +17,6 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** @deprecated prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Alignment at various breakpoints. */
alignment?: {
default?: 'alignRight' | 'alignLeft';
Expand Down Expand Up @@ -65,29 +57,20 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
isExpanded,
toolbarId,
visibility,
visiblity,
alignment,
clearAllFilters,
showClearFiltersButton,
clearFiltersButtonText,
...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 (
<PageContext.Consumer>
{({ width, getBreakpoint }) => (
<div
className={css(
styles.toolbarContent,
formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
className
)}
Expand Down
31 changes: 2 additions & 29 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 @@ -23,14 +23,6 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** @deprecated prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Alignment at various breakpoints. */
alignment?: {
default?: 'alignRight' | 'alignLeft';
Expand Down Expand Up @@ -63,26 +55,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,

class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
render() {
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.'
);
}
const { visibility, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props;

return (
<PageContext.Consumer>
Expand All @@ -91,7 +64,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
className={css(
styles.toolbarGroup,
variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
Expand Down
19 changes: 1 addition & 18 deletions 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 @@ -39,14 +39,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** @deprecated prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Alignment at various breakpoints. */
alignment?: {
default?: 'alignRight' | 'alignLeft';
Expand Down Expand Up @@ -84,7 +76,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
className,
variant,
visibility,
visiblity,
alignment,
spacer,
widths,
Expand All @@ -97,14 +88,6 @@ 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.'
);
}

const widthStyles: any = {};
if (widths) {
Object.entries(widths || {}).map(
Expand All @@ -130,7 +113,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
| 'chipGroup'
],
isAllExpanded && styles.modifiers.expanded,
formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
className
Expand Down
19 changes: 1 addition & 18 deletions 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 @@ -22,14 +22,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** @deprecated prop misspelled */
visiblity?: {
default?: 'hidden' | 'visible';
md?: 'hidden' | 'visible';
lg?: 'hidden' | 'visible';
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Alignment at various breakpoints. */
alignment?: {
default?: 'alignRight' | 'alignLeft';
Expand Down Expand Up @@ -69,7 +61,6 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
toggleIcon,
variant,
visibility,
visiblity,
breakpoint,
alignment,
spacer,
Expand All @@ -84,14 +75,6 @@ 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 (
<PageContext.Consumer>
{({ width, getBreakpoint }) => (
Expand Down Expand Up @@ -123,7 +106,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
variant &&
styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/helpers/Popper/Popper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
}
}, [reference]);
React.useEffect(() => {
// When the popperRef is defined or the popper visiblity changes, ensure the popper element is up to date
// When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
if (popperRef) {
if ((popperRef as React.RefObject<any>).current) {
setPopperElement((popperRef as React.RefObject<any>).current);
Expand Down
5 changes: 0 additions & 5 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 @@ -497,11 +497,6 @@ export const Demos: DemoInterface[] = [
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: 0 additions & 132 deletions ...s/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/react-integration/demo-app-ts/src/components/demos/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export * from './ToolbarDemo/ToolbarDemo';
export * from './DescriptionListDemo/DescriptionListDemo';
export * from './DescriptionListDemo/DescriptionListBreakpointsDemo';
export * from './ToolbarDemo/ToolbarVisibilityDemo';
export * from './ToolbarDemo/ToolbarVisiblityDemo';
export * from './DrawerDemo/DrawerDemo';
export * from './DrawerDemo/DrawerResizeDemo';
export * from './DropdownDemo/DropdownDemo';
Expand Down