Skip to content

[IndexTable] Add hasZebraStriping optional prop #8595

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

Jump to bottom
Merged
merged 1 commit into from
Mar 14, 2023
Merged

[IndexTable] Add hasZebraStriping optional prop #8595

merged 1 commit into from
Mar 14, 2023

Conversation

@KateWood
Copy link
Contributor

@KateWood KateWood commented Mar 8, 2023 •
edited
Loading

WHY are these changes introduced?

Closes #8592

The Pixels Index Redesign for Customer Events uses IndexTable and zebra striping is desired.

I used the same color variable as the zebra striping in DataTable.

WHAT is this pull request doing?

Adds hasZebraStriping optional prop on IndexTable.

screenshot of ZebraStriping in storybook

🎩 checklist

@KateWood KateWood requested a review from blboyle March 8, 2023 16:37
@KateWood KateWood force-pushed the katewood/8592/adds-zebra-striping-to-index-table branch from 1e68c14 to b8d18d7 Compare March 8, 2023 16:42
@KateWood KateWood requested review from chloerice and mrcthms and removed request for chloerice March 8, 2023 16:43
@blboyle
Copy link
Contributor

blboyle commented Mar 8, 2023 •
edited
Loading

Hey @KateWood! One of the things that we ran into when adding zebra striping to the DataTable was whether we would always start with the grey and whether that would start on the header or the first row.

I mentioned this just to make sure that it's something you've thought about.

update: #5365 (comment)

You can see what I mean when looking at the "after" screenshot for the zebra striping section. The goal in our case was to allow the footer and header to stay consistent.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2023 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 221.3 KB (+0.02% 🔺)
polaris-react-esm 140.81 KB (+0.04% 🔺)
polaris-react-esnext 197.68 KB (+0.08% 🔺)
polaris-react-css 43.17 KB (+0.2% 🔺)

@KateWood
Copy link
Contributor Author

KateWood commented Mar 8, 2023

Hey @KateWood! One of the things that we ran into when adding zebra striping to the DataTable was whether we would always start with the grey and whether that would start on the header or the first row.

I mentioned this just to make sure that it's something you've thought about.

update: #5365 (comment)

You can see what I mean when looking at the "after" screenshot for the zebra striping section. The goal in our case was to allow the footer and header to stay consistent.

Hi @blboyle ! IndexTable doesn't have a footer, so I think that doesn't apply here.

@blboyle
Copy link
Contributor

blboyle commented Mar 8, 2023 •
edited
Loading

@KateWood okay cool 👍🏻

It's looking good! Excited to see this shipped!

When testing, I notice a few things:

For these 3, I would say it's up to you as to whether that's how you want to go.

  1. When the condensed prop is added, there is no zebra striping

  2. Hovering over the row does not give the gray feedback for the rows that have the striping

  3. When interacting with lastColumnSticky the borders only appear on the gray rows.

(open for screenshot)

alt

  1. The gray is also over-writing the status colouring which I think should be addressed
(open for screenshot)

alt

@KateWood KateWood force-pushed the katewood/8592/adds-zebra-striping-to-index-table branch 4 times, most recently from 7f14b30 to 90c1ca2 Compare March 14, 2023 18:41
@KateWood
Copy link
Contributor Author

KateWood commented Mar 14, 2023

@blboyle fixed! here's a video of those cases: https://screenshot.click/14-42-wqzd0-ruymv.mp4

blboyle
blboyle approved these changes Mar 14, 2023
View reviewed changes
Copy link
Contributor

@blboyle blboyle left a comment

Choose a reason for hiding this comment

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

Looks great! Thanks for making those updates.

@KateWood KateWood force-pushed the katewood/8592/adds-zebra-striping-to-index-table branch 4 times, most recently from 55431c9 to 85d2717 Compare March 14, 2023 21:07
adds hasZebraStriping optional prop to IndexTable
a5dc0d3 
adds ZebraStriping to IndexTable in storybook

changeset

make zebra striping work on condensed table

fixes hover styling

multiple zebra stories for different cases
@KateWood KateWood force-pushed the katewood/8592/adds-zebra-striping-to-index-table branch from 85d2717 to a5dc0d3 Compare March 14, 2023 21:07
@KateWood KateWood merged commit 437a3bb into main Mar 14, 2023
@KateWood KateWood deleted the katewood/8592/adds-zebra-striping-to-index-table branch March 14, 2023 21:58
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Mar 14, 2023
Merged
alex-page pushed a commit that referenced this pull request Mar 16, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8612)
8542ddc 
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/stylelint-polaris@9.0.0

### Major Changes

- [#8657](#8657)
[`764f17d86`](764f17d)
Thanks [@alex-page](https://github.com/alex-page)! - Turn on
reportNeedlessDisables for all comments

## @shopify/polaris-migrator@0.16.0

### Minor Changes

- [#8272](#8272)
[`cccd69848`](cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- Updated dependencies
\[[`764f17d86`](764f17d)]:
    -   @shopify/stylelint-polaris@9.0.0

## @shopify/polaris@10.36.0

### Minor Changes

- [#8555](#8555)
[`696473b82`](696473b)
Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a
forward `ref` to permit programmatic scrolling for `Scrollable`
(example: `scrollRef.current?.scrollTo(0)`)


- [#8650](#8650)
[`078cf9aea`](078cf9a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
breadcrumbs prop on SkeletonPage, added backAction prop with story


- [#8586](#8586)
[`83bde8690`](83bde86)
Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the
stepper arrows for inputs of type "number" and revealing them on hover
and focus the default `TextField` behaviour to mimic the default browser
experience


- [#8288](#8288)
[`d27a361c2`](d27a361)
Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of
keyboard component and add optional size prop


- [#8600](#8600)
[`515a62f3b`](515a62f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset
class from not applying to ordered lists


- [#8655](#8655)
[`fb373c3e1`](fb373c3)
Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded
navigation section to remove unwanted space during collapse/expand

### Patch Changes

- [#8595](#8595)
[`437a3bbf1`](437a3bb)
Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra
striping to `IndexTable`
([#8595](#8595))


- [#8626](#8626)
[`ff70ab3d1`](ff70ab3)
Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius
on active/pressed navigation items


- [#8644](#8644)
[`62b712362`](62b7123)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary
stylelint-disable comments


- [#8651](#8651)
[`446ba341c`](446ba34)
Thanks [@aveline](https://github.com/aveline)! - Updated default stack
order custom property


- [#8659](#8659)
[`3e7e0837d`](3e7e083)
Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after
stylelint rule changes that are breaking the rules


- [#8606](#8606)
[`230786ace`](230786a)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
shared scss functions and move low usage or low value functions into
components


- [#8629](#8629)
[`6ee523a5f`](6ee523a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation
duration and box-shadow for the `Tooltip`

## @shopify/polaris-cli@0.1.17

### Patch Changes

- Updated dependencies
\[[`cccd69848`](cccd698)]:
    -   @shopify/polaris-migrator@0.16.0

## polaris.shopify.com@0.39.0

### Minor Changes

- [#8604](#8604)
[`65a678d29`](65a678d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow`
token page


- [#8615](#8615)
[`4aacd1983`](4aacd19)
Thanks [@yurm04](https://github.com/yurm04)! - Added search event that
sets the default google parameters in addition to custom


- [#8613](#8613)
[`1a36ed60c`](1a36ed6)
Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement'
category to search event


- [#8272](#8272)
[`cccd69848`](cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- [#8621](#8621)
[`dca759b0b`](dca759b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code>
renderer on Patterns pages to support code blocks without meta


- [#8622](#8622)
[`613f637c9`](613f637)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor
layout bugs in app-settings-layout pattern code example


- [#8379](#8379)
[`c8207636c`](c820763)
Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated
documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`,
`Bleed`, `Columns`, and `Inline`


- [#8614](#8614)
[`3526fc2fc`](3526fc2)
Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to
`Text`, `AlphaCard`, and `AlphaStack`


- [#8616](#8616)
[`74f0bc42a`](74f0bc4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page
layout


- [#8602](#8602)
[`575b351d5`](575b351)
Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking
using google analytics

- Updated dependencies
\[[`696473b82`](696473b),
[`437a3bbf1`](437a3bb),
[`078cf9aea`](078cf9a),
[`83bde8690`](83bde86),
[`ff70ab3d1`](ff70ab3),
[`62b712362`](62b7123),
[`446ba341c`](446ba34),
[`d27a361c2`](d27a361),
[`3e7e0837d`](3e7e083),
[`230786ace`](230786a),
[`6ee523a5f`](6ee523a),
[`515a62f3b`](515a62f),
[`fb373c3e1`](fb373c3)]:
    -   @shopify/polaris@10.36.0

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
@KateWood @juzser
[IndexTable] Add hasZebraStriping optional prop (Shopify#8595)
7c57731 
<!--
  ☝️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?

Closes Shopify#8592

The Pixels Index Redesign for Customer Events uses IndexTable and zebra
striping is desired.

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

I used the same color variable as the zebra striping in
[DataTable](https://github.com/Shopify/polaris/pull/5365/files#diff-afd7e6258c31974d33a41a0be5cae45bd14466b2e68b17725e11d884ba2647ec).

### WHAT is this pull request doing?

Adds `hasZebraStriping` optional prop on IndexTable.

<img width="950" alt="screenshot of ZebraStriping in storybook"
src="https://user-images.githubusercontent.com/12080891/223773325-30d763c7-4f87-4727-b007-07e3586a3eb8.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>
-->

### 🎩 checklist

- [x] 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)
- [x] 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
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8612)
706563f 
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/stylelint-polaris@9.0.0

### Major Changes

- [Shopify#8657](Shopify#8657)
[`764f17d86`](Shopify@764f17d)
Thanks [@alex-page](https://github.com/alex-page)! - Turn on
reportNeedlessDisables for all comments

## @shopify/polaris-migrator@0.16.0

### Minor Changes

- [Shopify#8272](Shopify#8272)
[`cccd69848`](Shopify@cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- Updated dependencies
\[[`764f17d86`](Shopify@764f17d)]:
    -   @shopify/stylelint-polaris@9.0.0

## @shopify/polaris@10.36.0

### Minor Changes

- [Shopify#8555](Shopify#8555)
[`696473b82`](Shopify@696473b)
Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a
forward `ref` to permit programmatic scrolling for `Scrollable`
(example: `scrollRef.current?.scrollTo(0)`)


- [Shopify#8650](Shopify#8650)
[`078cf9aea`](Shopify@078cf9a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
breadcrumbs prop on SkeletonPage, added backAction prop with story


- [Shopify#8586](Shopify#8586)
[`83bde8690`](Shopify@83bde86)
Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the
stepper arrows for inputs of type "number" and revealing them on hover
and focus the default `TextField` behaviour to mimic the default browser
experience


- [Shopify#8288](Shopify#8288)
[`d27a361c2`](Shopify@d27a361)
Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of
keyboard component and add optional size prop


- [Shopify#8600](Shopify#8600)
[`515a62f3b`](Shopify@515a62f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset
class from not applying to ordered lists


- [Shopify#8655](Shopify#8655)
[`fb373c3e1`](Shopify@fb373c3)
Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded
navigation section to remove unwanted space during collapse/expand

### Patch Changes

- [Shopify#8595](Shopify#8595)
[`437a3bbf1`](Shopify@437a3bb)
Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra
striping to `IndexTable`
([Shopify#8595](Shopify#8595))


- [Shopify#8626](Shopify#8626)
[`ff70ab3d1`](Shopify@ff70ab3)
Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius
on active/pressed navigation items


- [Shopify#8644](Shopify#8644)
[`62b712362`](Shopify@62b7123)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary
stylelint-disable comments


- [Shopify#8651](Shopify#8651)
[`446ba341c`](Shopify@446ba34)
Thanks [@aveline](https://github.com/aveline)! - Updated default stack
order custom property


- [Shopify#8659](Shopify#8659)
[`3e7e0837d`](Shopify@3e7e083)
Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after
stylelint rule changes that are breaking the rules


- [Shopify#8606](Shopify#8606)
[`230786ace`](Shopify@230786a)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
shared scss functions and move low usage or low value functions into
components


- [Shopify#8629](Shopify#8629)
[`6ee523a5f`](Shopify@6ee523a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation
duration and box-shadow for the `Tooltip`

## @shopify/polaris-cli@0.1.17

### Patch Changes

- Updated dependencies
\[[`cccd69848`](Shopify@cccd698)]:
    -   @shopify/polaris-migrator@0.16.0

## polaris.shopify.com@0.39.0

### Minor Changes

- [Shopify#8604](Shopify#8604)
[`65a678d29`](Shopify@65a678d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow`
token page


- [Shopify#8615](Shopify#8615)
[`4aacd1983`](Shopify@4aacd19)
Thanks [@yurm04](https://github.com/yurm04)! - Added search event that
sets the default google parameters in addition to custom


- [Shopify#8613](Shopify#8613)
[`1a36ed60c`](Shopify@1a36ed6)
Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement'
category to search event


- [Shopify#8272](Shopify#8272)
[`cccd69848`](Shopify@cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- [Shopify#8621](Shopify#8621)
[`dca759b0b`](Shopify@dca759b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code>
renderer on Patterns pages to support code blocks without meta


- [Shopify#8622](Shopify#8622)
[`613f637c9`](Shopify@613f637)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor
layout bugs in app-settings-layout pattern code example


- [Shopify#8379](Shopify#8379)
[`c8207636c`](Shopify@c820763)
Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated
documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`,
`Bleed`, `Columns`, and `Inline`


- [Shopify#8614](Shopify#8614)
[`3526fc2fc`](Shopify@3526fc2)
Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to
`Text`, `AlphaCard`, and `AlphaStack`


- [Shopify#8616](Shopify#8616)
[`74f0bc42a`](Shopify@74f0bc4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page
layout


- [Shopify#8602](Shopify#8602)
[`575b351d5`](Shopify@575b351)
Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking
using google analytics

- Updated dependencies
\[[`696473b82`](Shopify@696473b),
[`437a3bbf1`](Shopify@437a3bb),
[`078cf9aea`](Shopify@078cf9a),
[`83bde8690`](Shopify@83bde86),
[`ff70ab3d1`](Shopify@ff70ab3),
[`62b712362`](Shopify@62b7123),
[`446ba341c`](Shopify@446ba34),
[`d27a361c2`](Shopify@d27a361),
[`3e7e0837d`](Shopify@3e7e083),
[`230786ace`](Shopify@230786a),
[`6ee523a5f`](Shopify@6ee523a),
[`515a62f3b`](Shopify@515a62f),
[`fb373c3e1`](Shopify@fb373c3)]:
    -   @shopify/polaris@10.36.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@chloerice chloerice added 2023 Contribution tracking for 2023 Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" labels Dec 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrcthms mrcthms Awaiting requested review from mrcthms

1 more reviewer

@blboyle blboyle blboyle approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

2023 Contribution tracking for 2023 Component Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023"

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add zebra striping to IndexTable

3 participants

@KateWood @blboyle @chloerice