diff --git a/UNRELEASED.md b/UNRELEASED.md index 82143d47d66..b3c23fba472 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -21,6 +21,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Fixed the `DataTable` sort direction not reversing on second sort of the initially sorted column ([#918](https://github.com/Shopify/polaris-react/pull/918)) (thanks [@tabrez96](https://github.com/tabrez96) for the [issue report](https://github.com/Shopify/polaris-react/issues/873)) - Allow `null` being passed to `value` in `TextField` ([#964](https://github.com/Shopify/polaris-react/pull/964)) (thanks [@mbaumbach](https://github.com/mbaumbach) for the [original issue](https://github.com/Shopify/polaris-react/issues/959)) - Changed the default value for `showHidden` prop on `ResourcePicker` for backward compatibility with legacy EASDK ([#981](https://github.com/Shopify/polaris-react/pull/981)) +- Adjusted top and bottom padding to the header, footer and sections in `Card` to add space between action buttons in the header and footer and the card sections. ([#962](https://github.com/Shopify/polaris-react/pull/962)) ### Documentation diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 49bf0368d81..91cabb1c4ed 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -17,10 +17,11 @@ } .Header { - padding: spacing() spacing() 0; + padding: spacing() spacing() rem(12px) spacing(); @include page-content-when-not-fully-condensed { - padding: spacing(loose) spacing(loose) 0; + padding-right: spacing(loose); + padding-left: spacing(loose); } } @@ -28,7 +29,7 @@ padding: spacing(); @include page-content-when-not-fully-condensed { - padding: spacing(loose); + padding: spacing() spacing(loose); } + .Section { @@ -42,6 +43,7 @@ .Section-subdued { background-color: color('sky', 'lighter'); + border-top: border-width() solid color('sky'); } .SectionHeader { @@ -61,9 +63,14 @@ .Footer { display: flex; justify-content: flex-end; - padding: 0 spacing() spacing(); + padding: rem(12px) spacing() spacing() spacing(); @include page-content-when-not-fully-condensed { - padding: 0 spacing(loose) spacing(loose); + padding-right: spacing(loose); + padding-left: spacing(loose); + } + + .Section-subdued + & { + border-top: border-width() solid color('sky'); } }