Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix recommended card Gutenberg CSS conflict (https://github.com/woocommerce/woocommerce-admin/pull/7409) 

* Add style fix

* Add fix for card footer as well

* Changelog

* Replace fix with removing CardBody

* Cleanups

* Remove CardBody import reference

* Remove CardHeader size and change size in Card, CSS cleanup
This commit is contained in:
Ilyas Foo 2021-07-27 02:34:08 +08:00 committed by GitHub
parent d44e53f879
commit 069537100e
4 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-admin/changelogs/fix-7394-recommended-card-gutenberg-conflict Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: Fix
Fix recommended card Gutenberg CSS conflict #7409

8
plugins/woocommerce-admin/client/embedded-body-layout/style.scss
View File

@ -1,5 +1,13 @@
.woocommerce-embedded-layout__primary {
padding: 0 20px;
.components-card__header {
box-sizing: border-box;
}
.components-card__footer {
box-sizing: border-box;
}
}
@media (max-width: #{ ($break-medium) }) {
.woocommerce-embedded-layout__primary {

6
plugins/woocommerce-admin/client/payments/payment-recommendations.scss
View File

@ -26,10 +26,6 @@
text-align: center;
}
.components-card__body {
padding: 0;
}
.woocommerce-pill {
margin-left: 4px;
padding: 2px 8px;
@ -43,8 +39,6 @@
}
.components-card__footer {
padding: $gap $gap-large;
.gridicon {
margin-left: $gap-smallest;
}

16
plugins/woocommerce-admin/client/payments/payment-recommendations.tsx
View File

@ -4,13 +4,7 @@
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import {
Card,
CardBody,
CardHeader,
CardFooter,
Button,
} from '@wordpress/components';
import { Card, CardHeader, CardFooter, Button } from '@wordpress/components';
import { useEffect, useRef, useState } from '@wordpress/element';
import { EllipsisMenu, List, Pill } from '@woocommerce/components';
import { Text } from '@woocommerce/experimental';
@ -177,8 +171,8 @@ const PaymentRecommendations: React.FC = () => {
);
return (
<Card size="large" className="woocommerce-recommended-payments-card">
<CardHeader size="medium">
<Card size="medium" className="woocommerce-recommended-payments-card">
<CardHeader>
<div className="woocommerce-recommended-payments-card__header">
<Text
variant="title.small"
@ -221,9 +215,7 @@ const PaymentRecommendations: React.FC = () => {
/>
</div>
</CardHeader>
<CardBody>
<List items={ pluginsList } />
</CardBody>
<List items={ pluginsList } />
<CardFooter>
<Button href={ SEE_MORE_LINK } target="_blank" isTertiary>
{ __( 'See more options', 'woocommerce-admin' ) }