Skip to content
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

CardBody: change default value of isScrollable to false #33490

Merged
merged 3 commits into from
Jul 16, 2021
Merged

CardBody: change default value of isScrollable to false #33490

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
a075659
CardBody: change default value of `isScrollable` to `false`
ciampo Jul 16, 2021
de2b288
Update flyout snapshot tests
ciampo Jul 16, 2021
3139491
Add changelog deprecation entry
ciampo Jul 16, 2021
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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

- `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in `Button` have been deprecated. Use `variant` instead ([#31713](https://github.com/WordPress/gutenberg/pull/31713)).
- `isElevated` prop in `Card` has been deprecated. Use `elevation` instead ([#32566](https://github.com/WordPress/gutenberg/pull/32566)).
- `isScrollable` prop in `CardBody` default value changed from `true` to `false` ([#33490](https://github.com/WordPress/gutenberg/pull/33490))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noting that if we publish WordPress packages to npm from Guteberg 11.1 this week we will have to move up this entry and put into its own section.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there also going to be a new release of the components package (e.g. 14.2.0)?

Copy link
Member

@gziolo gziolo Jul 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we didn't have it for a while but now that WordPress 5.8 should be out tomorrow, there is no blocker anymore.


### Internal

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-body/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Note: This component is connected to [`Card`'s Context](/packages/components/src
Determines if the component is scrollable.

- Required: No
- Default: `true`
- Default: `false`

### `isShady`: `boolean`

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-body/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { useCx } from '../../utils/hooks/use-cx';
export function useCardBody( props ) {
const {
className,
isScrollable = true,
isScrollable = false,
isShady = false,
size = 'medium',
...otherProps
Expand Down
90 changes: 14 additions & 76 deletions packages/components/src/card/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ Snapshot Diff:
@@ -1,8 +1,8 @@
<div>
<div
- class="components-scrollable components-card__body components-card-body css-q3qn5w-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+ class="components-scrollable components-card__body components-card-body css-172aszr-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium-shady em57xhy0"
- class="components-card__body components-card-body css-1fyyxcx-View-Body-borderRadius-medium em57xhy0"
+ class="components-card__body components-card-body css-whouzc-View-Body-borderRadius-medium-shady em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand Down Expand Up @@ -104,8 +104,8 @@ Snapshot Diff:
Header
</div>
<div
- class="components-scrollable components-card__body components-card-body css-q3qn5w-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+ class="components-scrollable components-card__body components-card-body css-1507ng6-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-large em57xhy0"
- class="components-card__body components-card-body css-1fyyxcx-View-Body-borderRadius-medium em57xhy0"
+ class="components-card__body components-card-body css-35zzqj-View-Body-borderRadius-large em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand All @@ -132,8 +132,8 @@ Snapshot Diff:
Header
</div>
<div
- class="components-scrollable components-card__body components-card-body css-1507ng6-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-large em57xhy0"
+ class="components-scrollable components-card__body components-card-body css-q3qn5w-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
- class="components-card__body components-card-body css-35zzqj-View-Body-borderRadius-large em57xhy0"
+ class="components-card__body components-card-body css-1fyyxcx-View-Body-borderRadius-medium em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand Down Expand Up @@ -174,8 +174,8 @@ Snapshot Diff:
Header
</div>
<div
- class="components-scrollable components-card__body components-card-body css-1507ng6-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-large em57xhy0"
+ class="components-scrollable components-card__body components-card-body css-1vtoa4y-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-small em57xhy0"
- class="components-card__body components-card-body css-35zzqj-View-Body-borderRadius-large em57xhy0"
+ class="components-card__body components-card-body css-1bp82cr-View-Body-borderRadius-small em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand Down Expand Up @@ -251,42 +251,11 @@ Object {
}

.emotion-6 {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
height: auto;
max-height: 100%;
padding: calc(4px * 4) calc(4px * 6);
}

@media only screen and ( min-device-width: 40em ) {
.emotion-6::-webkit-scrollbar {
height: 12px;
width: 12px;
}

.emotion-6::-webkit-scrollbar-track {
background-color: transparent;
}

.emotion-6::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
}

.emotion-6::-webkit-scrollbar-thumb {
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.2);
border: 2px solid rgba( 0, 0, 0, 0 );
border-radius: 7px;
}

.emotion-6:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
}
}

.emotion-6:first-of-type {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
Expand Down Expand Up @@ -412,14 +381,14 @@ Object {
Card Header
</div>
<div
class="components-scrollable components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-6 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Card Body 1
</div>
<div
class="components-scrollable components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-6 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand All @@ -433,7 +402,7 @@ Object {
role="separator"
/>
<div
class="components-scrollable components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-6 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand Down Expand Up @@ -529,42 +498,11 @@ Object {
}

.emotion-6 {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
height: auto;
max-height: 100%;
padding: calc(4px * 4) calc(4px * 6);
}

@media only screen and ( min-device-width: 40em ) {
.emotion-6::-webkit-scrollbar {
height: 12px;
width: 12px;
}

.emotion-6::-webkit-scrollbar-track {
background-color: transparent;
}

.emotion-6::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
}

.emotion-6::-webkit-scrollbar-thumb {
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.2);
border: 2px solid rgba( 0, 0, 0, 0 );
border-radius: 7px;
}

.emotion-6:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
}
}

.emotion-6:first-of-type {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
Expand Down Expand Up @@ -689,14 +627,14 @@ Object {
Card Header
</div>
<div
class="components-scrollable components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-6 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Card Body 1
</div>
<div
class="components-scrollable components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-6 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand All @@ -710,7 +648,7 @@ Object {
role="separator"
/>
<div
class="components-scrollable components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-6 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand Down
6 changes: 2 additions & 4 deletions packages/components/src/card/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,11 +182,9 @@ describe( 'Card', () => {

it( 'should allow scrolling content with the scrollable prop is true', () => {
const { container: containerScrollable } = render(
<CardBody>Body</CardBody>
);
const { container } = render(
<CardBody isScrollable={ false }>Body</CardBody>
<CardBody isScrollable={ true }>Body</CardBody>
);
const { container } = render( <CardBody>Body</CardBody> );
expect( container ).toMatchDiffSnapshot( containerScrollable );
} );
} );
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export type BodyProps = BaseSubComponentProps & {
/**
* Determines if the component is scrollable.
*
* @default true
* @default false
*/
isScrollable?: boolean;
};
Expand Down
35 changes: 2 additions & 33 deletions packages/components/src/flyout/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,42 +19,11 @@ exports[`props should render correctly 1`] = `
}

.emotion-5 {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
height: auto;
max-height: 100%;
padding: calc(4px * 4) calc(4px * 6);
}

@media only screen and ( min-device-width: 40em ) {
.emotion-5::-webkit-scrollbar {
height: 12px;
width: 12px;
}

.emotion-5::-webkit-scrollbar-track {
background-color: transparent;
}

.emotion-5::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
}

.emotion-5::-webkit-scrollbar-thumb {
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.2);
border: 2px solid rgba( 0, 0, 0, 0 );
border-radius: 7px;
}

.emotion-5:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
}
}

.emotion-5:first-of-type {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
Expand Down Expand Up @@ -119,7 +88,7 @@ exports[`props should render correctly 1`] = `
tabindex="-1"
/>
<div
class="components-scrollable components-card__body components-card-body emotion-5 emotion-2"
class="components-card__body components-card-body emotion-5 emotion-2"
data-wp-c16t="true"
data-wp-component="CardBody"
>
Expand Down Expand Up @@ -190,7 +159,7 @@ Snapshot Diff:
tabindex="-1"
/>
+ <div
+ class="components-scrollable components-card__body components-card-body css-q3qn5w-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+ class="components-card__body components-card-body css-1fyyxcx-View-Body-borderRadius-medium em57xhy0"
+ data-wp-c16t="true"
+ data-wp-component="CardBody"
+ >
Expand Down