[IndexTable] Add sticky last cell #4150

pamelahicks · 2021-04-29T13:41:19Z

WHY are these changes introduced?

Resolves #4149
Resolves #4247

WHAT is this pull request doing?

Previous attempt

This PR adds the last prop which toggles the sticky class. The column will only be sticky above $breakpoint-small.

Styleguide:

This PR:

Adds the lastColumnSticky prop to the IndexTable which toggles the sticky class. The column will only be sticky above $breakpoint-small.
Enables an optional sticky least heading if it is not marked as hidden.
Brings back the sticky cell/heading "borders" by replacing the box-shadows which were no longer working on sticky-positioned cells in Chrome.
Promotes the sticky-cell z-index from 30 to 31 to avoid collisions with focused TextFields (which are z-index: 30).

Approach

Prop

The previous attempt (collapsed above) simply added a last prop to a cell to make it stick, but I decided to apply a prop lastColumnSticky to the table instead. This is to allow easy access to the prop for the purposes of adding it to the last heading, in response to this comment.

Cell borders

The styles were refactored to re-add the missing cell "borders" on the sticky cells. I opted to go with filter: drop-shadow because like box-shadow, it does not add height or width to the box, and has acceptable bowser support of 97.08% (source), which is even better than the support for position: sticky.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {
  Card,
  IndexTable,
  Page,
  TextField,
  TextStyle,
  useIndexResourceState,
} from '../src';

export function Playground() {
  const customers = [
    {
      id: '3411',
      url: 'customers/341',
      name: 'Mae Jemison',
      location: 'Decatur, USA',
      orders: 20,
      note: '',
      amountSpent: '$2,400',
      status: 'success',
    },
    {
      id: '2561',
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
      orders: 30,
      note: 'Mail invoice to head office',
      amountSpent: '$140',
    },
    {
      id: '4567',
      url: 'customers/765',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
      orders: 30,
      note: '',
      amountSpent: '$140',
      status: 'subdued',
    },
  ];
  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const {
    selectedResources,
    allResourcesSelected,
    handleSelectionChange,
  } = useIndexResourceState(customers);

  const rowMarkup = customers.map(
    ({id, name, location, orders, note, amountSpent, status}, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
        status={status}
      >
        <IndexTable.Cell>
          <TextStyle variation="strong">{name}</TextStyle>
        </IndexTable.Cell>
        <IndexTable.Cell>{location}</IndexTable.Cell>
        <IndexTable.Cell>{orders}</IndexTable.Cell>
        <IndexTable.Cell>
          <TextField
            value={note}
            label="Note"
            labelHidden
            onChange={() => {}}
          />
        </IndexTable.Cell>
        <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <Page title="Playground">
      <Card>
        <IndexTable
          resourceName={resourceName}
          itemCount={customers.length}
          selectedItemsCount={
            allResourcesSelected ? 'All' : selectedResources.length
          }
          onSelectionChange={handleSelectionChange}
          headings={[
            {title: 'Name'},
            {title: 'Location'},
            {title: 'Order count'},
            {title: 'Note'},
            {title: 'Amount spent', hidden: false},
          ]}
          lastColumnSticky
        >
          {rowMarkup}
        </IndexTable>
      </Card>
    </Page>
  );
}

Style guide (Chrome):

chrome.2.55.03.PM.mov

Chrome with the last heading hidden:

chrome-hidden.mov

Firefox:

Firefox.mov

Safari:

safari.mov

iOS Safari: https://user-images.githubusercontent.com/13036921/124321724-3221b780-db4c-11eb-871f-a893ee93868a.jpeg

Condensed (Chrome):

🎩 checklist

Tested on mobile
- iOS Safari
Tested on multiple browsers
- Chrome
- Firefox
- Safari
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide
For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

github-actions · 2021-04-29T13:43:36Z

🟢 This pull request modifies 5 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

/src/components/IndexTable/IndexTable.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/IndexTable/IndexTable.scss (total: 1)

Files potentially affected (total: 1)

/src/components/IndexTable/IndexTable.tsx

📄 src/components/IndexTable/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/IndexTable/components/Cell/Cell.tsx (total: 1)

Files potentially affected (total: 1)

/src/components/IndexTable/IndexTable.tsx

🧩 src/components/IndexTable/components/Cell/tests/Cell.test.tsx (total: 0)

Files potentially affected (total: 0)

AndrewMusgrave

Notice two things while 🎩 to get your thoughts on

The last cell sticky border is always active
The column header doesn't stick with the cell

github-actions · 2021-06-29T00:17:06Z

size-limit report

Path	Size
cjs	142.35 KB (+0.1% 🔺)
esm	96.09 KB (+0.16% 🔺)
esnext	139.25 KB (+0.21% 🔺)
css	33.72 KB (+0.4% 🔺)

pamelahicks · 2021-06-29T00:17:40Z

src/components/IndexTable/IndexTable.scss

-.TableHeading-last {
-  position: sticky;
-  right: 0;
-}
-


This wasn't being referenced in any of the components.

pamelahicks · 2021-07-02T19:20:30Z

src/components/IndexTable/IndexTable.scss

 $index-table-stacking-order: (
  cell: 1,
-  sticky-cell: 30,
+  sticky-cell: 31,


A focused TextField has a z-index of 30, so this one was bumped up to avoid weirdness when using them together. 31 is not used elsewhere.

Before:

z-before.mov

After:

z-after.mov

pamelahicks · 2021-07-02T19:28:17Z

src/components/IndexTable/IndexTable.scss

-    @include breakpoint-after($breakpoint-small) {
-      box-shadow: 0 rem(-1px) 0 0 var(--p-divider);
-    }


No longer needed because the "border" appears on the TableRow

pamelahicks · 2021-07-02T19:31:19Z

src/components/IndexTable/IndexTable.tsx

    toggle: toggleHasMoreLeftColumns,
  } = useToggle(false);

-  const onboardingScrollButtons = useRef(false);


This ref isn't being used by anything in this file and never gets toggled to true 🤔

pamelahicks · 2021-07-02T19:31:40Z

src/components/IndexTable/IndexTable.tsx

-      if (!canScrollRight) {
-        onboardingScrollButtons.current = false;
-      }


See https://github.com/Shopify/polaris-react/pull/4150/files#r663212110

pamelahicks · 2021-07-02T19:33:49Z

src/components/IndexTable/README.md

+          {title: 'Name'},
+          {title: 'Location'},
+          {title: 'Order count'},
+          {title: 'Amount spent', hidden: false},


Added the optional hidden here to bring attention that it could be set to true as well.

pamelahicks · 2021-07-02T19:48:23Z

Notice two things while 🎩 to get your thoughts on

The last cell sticky border is always active

The column header doesn't stick with the cell

@AndrewMusgrave I re-worked this PR to take your two points into consideration! The PR's description has been updated.

chloerice

Tested in all supported browsers and on mobile and this works great 🙌🏽 Thanks for contributing @pamelahicks! 💟

src/components/IndexTable/IndexTable.scss

AndrewMusgrave

Left a minor comment. LGTM, nice work ✅ !!

src/components/IndexTable/IndexTable.tsx

pamelahicks self-assigned this Apr 29, 2021

pamelahicks force-pushed the IndexTable-last-sticky-cell branch from e1a8503 to 25360e7 Compare April 29, 2021 16:00

pamelahicks changed the title ~~[WIP][IndexTable] Add sticky last cell~~ [IndexTable] Add sticky last cell Apr 29, 2021

pamelahicks marked this pull request as ready for review April 29, 2021 16:26

pamelahicks requested review from AndrewMusgrave, kyledurand and xie April 29, 2021 16:26

AndrewMusgrave reviewed May 4, 2021

View reviewed changes

alex-page force-pushed the main branch 7 times, most recently from 2c6e842 to d2611d6 Compare June 11, 2021 16:24

pamelahicks force-pushed the IndexTable-last-sticky-cell branch from 25360e7 to 7c5b28e Compare June 29, 2021 00:13

pamelahicks commented Jun 29, 2021

View reviewed changes

pamelahicks removed request for kyledurand and xie June 29, 2021 00:26

pamelahicks force-pushed the IndexTable-last-sticky-cell branch 2 times, most recently from 9733aaa to cc90df7 Compare July 2, 2021 18:24

pamelahicks commented Jul 2, 2021

View reviewed changes

pamelahicks force-pushed the IndexTable-last-sticky-cell branch from cc90df7 to 2597850 Compare July 2, 2021 19:26

pamelahicks commented Jul 2, 2021

View reviewed changes

pamelahicks requested review from AndrewMusgrave and alex-page July 2, 2021 19:48

pamelahicks force-pushed the IndexTable-last-sticky-cell branch from 2597850 to 3ec5bff Compare July 2, 2021 19:56

brendanrygus mentioned this pull request Jul 6, 2021

[IndexTable] fix sticky cell borders in Chrome v91+ #4283

Closed

3 tasks

chloerice self-requested a review July 22, 2021 20:11

chloerice approved these changes Jul 28, 2021

View reviewed changes

src/components/IndexTable/IndexTable.scss Outdated Show resolved Hide resolved

AndrewMusgrave approved these changes Aug 3, 2021

View reviewed changes

src/components/IndexTable/IndexTable.tsx Outdated Show resolved Hide resolved

src/components/IndexTable/IndexTable.tsx Outdated Show resolved Hide resolved

pamelahicks added 12 commits August 3, 2021 18:05

Add last prop to Cell

ed02b49

Refactor to include optional sticky last header

5676b4b

Replace box-shadow on sticky cells

d9d09bb

Remove sticky left border when scrolled right

490a959

Add tests

f1fefc4

Fix unreleased list

64ab18d

Update readme

6ed2634

Initialize canScrollRight on load

e03f42d

Adjust styles for condensed

981280a

Update callback name and deps list per review comment

5207a08

Refactor styles per review comment

1adbcf4

Resolve conflics in UNRELEASED

4da6801

pamelahicks force-pushed the IndexTable-last-sticky-cell branch from fbfebce to 4da6801 Compare August 3, 2021 22:08

pamelahicks merged commit 2cc1198 into main Aug 3, 2021

pamelahicks deleted the IndexTable-last-sticky-cell branch August 3, 2021 22:19

brendanrygus mentioned this pull request Aug 18, 2021

UI not working properly on Chrome on IndexTable #4396

Closed

[IndexTable] Add sticky last cell #4150

[IndexTable] Add sticky last cell #4150

Uh oh!

Conversation

pamelahicks commented Apr 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

Approach

Prop

Cell borders

How to 🎩

🎩 checklist

Uh oh!

github-actions bot commented Apr 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Files potentially affected (total: 0)

Files potentially affected (total: 1)

Files potentially affected (total: 0)

Files potentially affected (total: 1)

Files potentially affected (total: 0)

Uh oh!

AndrewMusgrave left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report

Uh oh!

pamelahicks Jun 29, 2021

Choose a reason for hiding this comment

Uh oh!

pamelahicks Jul 2, 2021

Choose a reason for hiding this comment

Uh oh!

pamelahicks Jul 2, 2021

Choose a reason for hiding this comment

Uh oh!

pamelahicks Jul 2, 2021

Choose a reason for hiding this comment

Uh oh!

pamelahicks Jul 2, 2021

Choose a reason for hiding this comment

Uh oh!

pamelahicks Jul 2, 2021

Choose a reason for hiding this comment

Uh oh!

pamelahicks commented Jul 2, 2021

Uh oh!

chloerice left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AndrewMusgrave left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pamelahicks commented Apr 29, 2021 •

edited

Loading

github-actions bot commented Apr 29, 2021 •

edited

Loading

github-actions bot commented Jun 29, 2021 •

edited

Loading