Skip to content

Conversation

chloerice
Copy link
Member

@chloerice chloerice commented Mar 1, 2023

WHY are these changes introduced?

Fixes #8047

WHAT is this pull request doing?

This PR fixes a few small CSS bugs that shipped with the BulkActions redesign:

  • Fixed header of IndexTable with bulkActions not having border radius in select mode
  • Fixed header of selectable ResourceList not having border radius
  • Fixed selectable ResourceList with no bulkActions having extra bottom padding in select mode
  • Fixed last ResourceItem in a selectable ResourceList with bulkActions having a border radius when in select mode
Before After
Screenshot 2023-03-01 at 1 27 00 PM Screenshot 2023-03-06 at 12 22 36 PM
Screenshot 2023-03-01 at 1 27 30 PM Screenshot 2023-03-01 at 1 35 24 PM
Screenshot 2023-03-01 at 1 27 53 PM Screenshot 2023-03-01 at 1 37 59 PM
Screenshot 2023-03-01 at 1 28 12 PM Screenshot 2023-03-01 at 1 36 12 PM

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

@chloerice chloerice force-pushed the fix-resource-list branch from b4e0a64 to e3f55b9 Compare March 1, 2023 18:08
chloerice and others added 2 commits March 1, 2023 13:11
@chloerice chloerice force-pushed the fix-resource-list branch from b86c7f7 to 23c848c Compare March 1, 2023 18:26
@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2023

size-limit report 📦

Path Size
polaris-react-cjs 221.02 KB (+0.02% 🔺)
polaris-react-esm 140.53 KB (+0.03% 🔺)
polaris-react-esnext 196.63 KB (+0.03% 🔺)
polaris-react-css 42.6 KB (+0.03% 🔺)

@chloerice chloerice added the Bug Something is broken and not working as intended in the system. label Mar 5, 2023
@chloerice chloerice marked this pull request as ready for review March 5, 2023 23:11
@chloerice chloerice requested a review from aveline March 6, 2023 15:26
@chloerice chloerice changed the title Fix resource list [ResourceList][IndexTable] Fix border-radius and padding bugs Mar 6, 2023
@chloerice chloerice requested a review from aaronccasanova March 6, 2023 16:37
@chloerice chloerice merged commit 7ecc8a9 into main Mar 6, 2023
@chloerice chloerice deleted the fix-resource-list branch March 6, 2023 17:24
laurkim pushed a commit that referenced this pull request Mar 6, 2023
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.15.0

### Minor Changes

- [#8229](#8229)
[`e21fd8d79`](e21fd8d)
Thanks [@aveline](https://github.com/aveline)! - Created migration to
rename `Card` to `LegacyCard`

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/stylelint-polaris@8.0.1

## @shopify/polaris@10.33.0

### Minor Changes

- [#8514](#8514)
[`78d686db5`](78d686d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Add additional
changes for migrating `legacy` custom properties from `v10` to `v11`


- [#8512](#8512)
[`b77c1fe51`](b77c1fe)
Thanks [@fatimasajadi](https://github.com/fatimasajadi)! - Add
onMouseEnter prop to the each item on the ActionList component


- [#8530](#8530)
[`bec50d4d8`](bec50d4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Removed alignment
defaults from Inline and AlphaStack


- [#8448](#8448)
[`590e495fd`](590e495)
Thanks [@alex-page](https://github.com/alex-page)! - [Text] adds
optional numeric font variant to render characters with a monospace
apperance and consistent height and width


- [#8130](#8130)
[`6c0dda128`](6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [#8556](#8556)
[`de3a925a7`](de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [#8498](#8498)
[`624751155`](6247511)
Thanks [@lgriffee](https://github.com/lgriffee)! - Migrated `legacy`
custom properties from `v10` to `v11`

### Patch Changes

- [#8534](#8534)
[`eeb8a4fc5`](eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [#8540](#8540)
[`70c166290`](70c1662)
Thanks [@Ipriyankrajai](https://github.com/Ipriyankrajai)! - Fixed
`ActionList` item `suffix` having extra padding when wrapped


- [#8523](#8523)
[`f644ad671`](f644ad6)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed deprecation
warning on Card


- [#8531](#8531)
[`7ecc8a9a6`](7ecc8a9)
Thanks [@chloerice](https://github.com/chloerice)! - - Fixed header of
`IndexTable` with `bulkActions` not having border radius
- Fixed header of `selectable` `ResourceList` not having border radius
- Fixed `selectable` `ResourceList` with no `bulkActions` having extra
bottom padding in select mode
- Fixed last `ResourceItem` in a `selectable` `ResourceList` with
`bulkActions` having a border radius when in select mode
- Updated dependencies
\[[`6c0dda128`](6c0dda1),
[`886da4fc3`](886da4f)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

## @shopify/polaris-tokens@6.7.0

### Minor Changes

- [#8130](#8130)
[`6c0dda128`](6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`

## @shopify/polaris-cli@0.1.14

### Patch Changes

- Updated dependencies
\[[`e21fd8d79`](e21fd8d)]:
    -   @shopify/polaris-migrator@0.15.0

## @shopify/polaris-icons@6.11.3

### Patch Changes

- [#8505](#8505)
[`886da4fc3`](886da4f)
Thanks [@lfroms](https://github.com/lfroms)! - Converted percentage
fill-opacity to float in two icons for better compatibility

## @shopify/stylelint-polaris@8.0.1

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0

## polaris.shopify.com@0.38.0

### Minor Changes

- [#8129](#8129)
[`6d3843755`](6d38437)
Thanks [@jesstelford](https://github.com/jesstelford)! - Patterns
documentation is now written in Markdown to match all other site
content.


- [#8130](#8130)
[`6c0dda128`](6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [#8559](#8559)
[`668afa51c`](668afa5)
Thanks [@jjgali](https://github.com/jjgali)! - Update voice and tone of
Trustworthy experience value.

### Patch Changes

- [#8534](#8534)
[`eeb8a4fc5`](eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [#8519](#8519)
[`f411cf0b6`](f411cf0)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added missing
redirect, updated content


- [#8553](#8553)
[`d2672648a`](d267264)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix legacy
patterns wrongly being categorised as deprecated. These are now
correctly labeled "legacy"


- [#8556](#8556)
[`de3a925a7`](de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [#8493](#8493)
[`a6fb3fbb7`](a6fb3fb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Moved props.json
to cache and automate generation


- [#8528](#8528)
[`191ff96df`](191ff96)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed grid
alignment on component group page

- Updated dependencies
\[[`eeb8a4fc5`](eeb8a4f),
[`78d686db5`](78d686d),
[`70c166290`](70c1662),
[`b77c1fe51`](b77c1fe),
[`bec50d4d8`](bec50d4),
[`f644ad671`](f644ad6),
[`590e495fd`](590e495),
[`6c0dda128`](6c0dda1),
[`de3a925a7`](de3a925),
[`886da4fc3`](886da4f),
[`7ecc8a9a6`](7ecc8a9),
[`624751155`](6247511)]:
    -   @shopify/polaris@10.33.0
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
…y#8531)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes Shopify#8047 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

This PR fixes a few small CSS bugs that shipped with the `BulkActions`
redesign:
- Fixed header of `IndexTable` with `bulkActions` not having border
radius in select mode
- Fixed header of `selectable` `ResourceList` not having border radius
- Fixed `selectable` `ResourceList` with no `bulkActions` having extra
bottom padding in select mode
- Fixed last `ResourceItem` in a `selectable` `ResourceList` with
`bulkActions` having a border radius when in select mode

| Before| After |
|--------|--------|
| <img width="543" alt="Screenshot 2023-03-01 at 1 27 00 PM"
src="https://user-images.githubusercontent.com/18447883/222232072-341f8c9b-e8f3-422e-b9cf-179eef065355.png">
|<img width="544" alt="Screenshot 2023-03-06 at 12 22 36 PM"
src="https://user-images.githubusercontent.com/18447883/223184433-d1f3c5eb-05fc-4722-a824-8420e14fd0b7.png">|
|<img width="541" alt="Screenshot 2023-03-01 at 1 27 30 PM"
src="https://user-images.githubusercontent.com/18447883/222233182-427ca6db-4683-4366-9285-721b8f923627.png">|<img
width="540" alt="Screenshot 2023-03-01 at 1 35 24 PM"
src="https://user-images.githubusercontent.com/18447883/222233527-d2835bac-eed2-40ef-afc1-e35d2455fb65.png">|
|<img width="540" alt="Screenshot 2023-03-01 at 1 27 53 PM"
src="https://user-images.githubusercontent.com/18447883/222233256-985405c7-d936-4280-9d0b-8a9c88e42b50.png">|
<img width="537" alt="Screenshot 2023-03-01 at 1 37 59 PM"
src="https://user-images.githubusercontent.com/18447883/222234057-93baaa56-9c7e-4bda-ace6-bc1194a7b6db.png">|
|<img width="544" alt="Screenshot 2023-03-01 at 1 28 12 PM"
src="https://user-images.githubusercontent.com/18447883/222233320-329a4017-4316-49ba-b11f-eb4553323281.png">|
<img width="538" alt="Screenshot 2023-03-01 at 1 36 12 PM"
src="https://user-images.githubusercontent.com/18447883/222233698-4c845ca1-75a8-44a4-a243-e105fc42b291.png">|

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Lo Kim <lo.kim@shopify.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.15.0

### Minor Changes

- [Shopify#8229](Shopify#8229)
[`e21fd8d79`](Shopify@e21fd8d)
Thanks [@aveline](https://github.com/aveline)! - Created migration to
rename `Card` to `LegacyCard`

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](Shopify@6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/stylelint-polaris@8.0.1

## @shopify/polaris@10.33.0

### Minor Changes

- [Shopify#8514](Shopify#8514)
[`78d686db5`](Shopify@78d686d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Add additional
changes for migrating `legacy` custom properties from `v10` to `v11`


- [Shopify#8512](Shopify#8512)
[`b77c1fe51`](Shopify@b77c1fe)
Thanks [@fatimasajadi](https://github.com/fatimasajadi)! - Add
onMouseEnter prop to the each item on the ActionList component


- [Shopify#8530](Shopify#8530)
[`bec50d4d8`](Shopify@bec50d4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Removed alignment
defaults from Inline and AlphaStack


- [Shopify#8448](Shopify#8448)
[`590e495fd`](Shopify@590e495)
Thanks [@alex-page](https://github.com/alex-page)! - [Text] adds
optional numeric font variant to render characters with a monospace
apperance and consistent height and width


- [Shopify#8130](Shopify#8130)
[`6c0dda128`](Shopify@6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [Shopify#8556](Shopify#8556)
[`de3a925a7`](Shopify@de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [Shopify#8498](Shopify#8498)
[`624751155`](Shopify@6247511)
Thanks [@lgriffee](https://github.com/lgriffee)! - Migrated `legacy`
custom properties from `v10` to `v11`

### Patch Changes

- [Shopify#8534](Shopify#8534)
[`eeb8a4fc5`](Shopify@eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [Shopify#8540](Shopify#8540)
[`70c166290`](Shopify@70c1662)
Thanks [@Ipriyankrajai](https://github.com/Ipriyankrajai)! - Fixed
`ActionList` item `suffix` having extra padding when wrapped


- [Shopify#8523](Shopify#8523)
[`f644ad671`](Shopify@f644ad6)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed deprecation
warning on Card


- [Shopify#8531](Shopify#8531)
[`7ecc8a9a6`](Shopify@7ecc8a9)
Thanks [@chloerice](https://github.com/chloerice)! - - Fixed header of
`IndexTable` with `bulkActions` not having border radius
- Fixed header of `selectable` `ResourceList` not having border radius
- Fixed `selectable` `ResourceList` with no `bulkActions` having extra
bottom padding in select mode
- Fixed last `ResourceItem` in a `selectable` `ResourceList` with
`bulkActions` having a border radius when in select mode
- Updated dependencies
\[[`6c0dda128`](Shopify@6c0dda1),
[`886da4fc3`](Shopify@886da4f)]:
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

## @shopify/polaris-tokens@6.7.0

### Minor Changes

- [Shopify#8130](Shopify#8130)
[`6c0dda128`](Shopify@6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`

## @shopify/polaris-cli@0.1.14

### Patch Changes

- Updated dependencies
\[[`e21fd8d79`](Shopify@e21fd8d)]:
    -   @shopify/polaris-migrator@0.15.0

## @shopify/polaris-icons@6.11.3

### Patch Changes

- [Shopify#8505](Shopify#8505)
[`886da4fc3`](Shopify@886da4f)
Thanks [@lfroms](https://github.com/lfroms)! - Converted percentage
fill-opacity to float in two icons for better compatibility

## @shopify/stylelint-polaris@8.0.1

### Patch Changes

- Updated dependencies
\[[`6c0dda128`](Shopify@6c0dda1)]:
    -   @shopify/polaris-tokens@6.7.0

## polaris.shopify.com@0.38.0

### Minor Changes

- [Shopify#8129](Shopify#8129)
[`6d3843755`](Shopify@6d38437)
Thanks [@jesstelford](https://github.com/jesstelford)! - Patterns
documentation is now written in Markdown to match all other site
content.


- [Shopify#8130](Shopify#8130)
[`6c0dda128`](Shopify@6c0dda1)
Thanks [@mrcthms](https://github.com/mrcthms)! - - Added a `suffix` prop
to `Tooltip`
- Improved the UX of `Tooltip` by refining open and close animations and
adding an arrow pointing to the center of the `activator`
- Added the `EmpemeralPresenceManager` to manage the presence of
non-blocking overlays, like `Tooltip` and `Toast`


- [Shopify#8559](Shopify#8559)
[`668afa51c`](Shopify@668afa5)
Thanks [@jjgali](https://github.com/jjgali)! - Update voice and tone of
Trustworthy experience value.

### Patch Changes

- [Shopify#8534](Shopify#8534)
[`eeb8a4fc5`](Shopify@eeb8a4f)
Thanks [@laurkim](https://github.com/laurkim)! - Migrated usage of
`Stack` to `LegacyStack`


- [Shopify#8519](Shopify#8519)
[`f411cf0b6`](Shopify@f411cf0)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added missing
redirect, updated content


- [Shopify#8553](Shopify#8553)
[`d2672648a`](Shopify@d267264)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix legacy
patterns wrongly being categorised as deprecated. These are now
correctly labeled "legacy"


- [Shopify#8556](Shopify#8556)
[`de3a925a7`](Shopify@de3a925)
Thanks [@laurkim](https://github.com/laurkim)! - Deprecated `Stack` and
`Stack.Item` and updated documentation on style guide


- [Shopify#8493](Shopify#8493)
[`a6fb3fbb7`](Shopify@a6fb3fb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Moved props.json
to cache and automate generation


- [Shopify#8528](Shopify#8528)
[`191ff96df`](Shopify@191ff96)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed grid
alignment on component group page

- Updated dependencies
\[[`eeb8a4fc5`](Shopify@eeb8a4f),
[`78d686db5`](Shopify@78d686d),
[`70c166290`](Shopify@70c1662),
[`b77c1fe51`](Shopify@b77c1fe),
[`bec50d4d8`](Shopify@bec50d4),
[`f644ad671`](Shopify@f644ad6),
[`590e495fd`](Shopify@590e495),
[`6c0dda128`](Shopify@6c0dda1),
[`de3a925a7`](Shopify@de3a925),
[`886da4fc3`](Shopify@886da4f),
[`7ecc8a9a6`](Shopify@7ecc8a9),
[`624751155`](Shopify@6247511)]:
    -   @shopify/polaris@10.33.0
    -   @shopify/polaris-tokens@6.7.0
    -   @shopify/polaris-icons@6.11.3

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Bug Something is broken and not working as intended in the system.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Resource list with selection and no bulk actions bottom padding issue

2 participants