Skip to content

Conversation

@FCalabria
Copy link
Contributor

@FCalabria FCalabria commented Jul 11, 2022

WHY are these changes introduced?

Fixes #6405
Fixes #4156
Fixes #5598

(it's the same bug, it is duplicated)

WHAT is this pull request doing?

It copies the mechanism on ResourceList to keep the bulk actions visible on all screen sizes.

Previous

Fixed

Does not affect bigger screens

@github-actions
Copy link
Contributor

github-actions bot commented Jul 11, 2022

size-limit report 📦

Path Size
polaris-react-cjs 197.59 KB (+0.02% 🔺)
polaris-react-esm 132.76 KB (+0.02% 🔺)
polaris-react-esnext 187.83 KB (+0.02% 🔺)
polaris-react-css 41.71 KB (0%)

Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

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

Tophatted on iPhone in Safari and Chrome and changes work great, thanks for jumping in to fix this @FCalabria!!

'@shopify/polaris': patch
---

Fix bulk actions not visible on IndexTable on small screens
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
Fix bulk actions not visible on IndexTable on small screens
Fixed `IndexTable` bulk action visibility on small screens

Comment on lines 255 to 258
const newSmallScreen = isSmallScreen();
if (smallScreen !== newSmallScreen) {
setSmallScreen(newSmallScreen);
}
Copy link
Member

Choose a reason for hiding this comment

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

I think we can remove the conditional here because states only get updated if the value passed to the setter method is not the same as the current value.

Suggested change
const newSmallScreen = isSmallScreen();
if (smallScreen !== newSmallScreen) {
setSmallScreen(newSmallScreen);
}
setSmallScreen(isSmallScreen());

@FCalabria FCalabria merged commit ae0bb76 into main Jul 12, 2022
@FCalabria FCalabria deleted the fix-index-table-actions branch July 12, 2022 08:40
@github-actions github-actions bot mentioned this pull request Jul 12, 2022
AndrewMusgrave added a commit that referenced this pull request Oct 19, 2022
### WHY are these changes introduced?

There was a [change](#6583) that
updated how index table behaves on small screens. However, the variable
setting small screen state is not correctly updated on resize causing
the not to be incorrect when moving from large -> small or small ->
large.

### WHAT is this pull request doing?

Updating the value on resize

### How to 🎩

Load `indextable--small-screen-with-all-of-its-elements` on a large
screen then resize to small.

[Spin
link](https://admin.web.am-test-it-ba.andrew-musgrave.us.spin.dev/store/shop1/orders?inContextTimeframe=none)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants