[ResourceList] Fix Item Action right position

[ruairiphackett]

WHY are these changes introduced?

Fixes #1345

WHAT is this pull request doing?

Removes a right value in the ResourceList.Item Actions which was causing it to not be aligned with other right aligned buttons like the Card actions:

Before:

After:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {Page, Card, TextStyle, Avatar, ResourceList, Button} from '../src';

export function Playground() {
  return <MyPlayground />;
}

interface State {}
interface Props {}

class MyPlayground extends React.Component<Props, State> {
  render() {
    const divStyle = {
      height: '200px',
      backgroundColor: 'red',
    };
    const parentStyle = {
      height: '200px',
      backgroundColor: 'blue',
    };
    return (
      <Page title="Playground">
        <Card title="Active customers" actions={[{content: 'Add customer'}]}>
          <Card.Section>
            <TextStyle variation="subdued">
              Customers that have made a purchase in the last 2 weeks
            </TextStyle>
          </Card.Section>
          <ResourceList
            resourceName={{singular: 'customer', plural: 'customers'}}
            items={[
              {
                id: 341,
                url: 'customers/341',
                name: 'Mae Jemison',
                location: 'Decatur, USA',
                latestOrderUrl: 'orders/1456',
              },
              {
                id: 256,
                url: 'customers/256',
                name: 'Ellen Ochoa',
                location: 'Los Angeles, USA',
                latestOrderUrl: 'orders/1457',
              },
            ]}
            renderItem={(item) => {
              const {id, url, name, location, latestOrderUrl} = item;
              const media = <Avatar customer size="medium" name={name} />;
              const shortcutActions = latestOrderUrl
                ? [{content: 'View latest order', url: latestOrderUrl}]
                : null;

              return (
                <ResourceList.Item
                  id={id}
                  url={url}
                  media={media}
                  accessibilityLabel={`View details for ${name}`}
                  shortcutActions={shortcutActions}
                  persistActions
                >
                  <h3>
                    <TextStyle variation="strong">{name}</TextStyle>
                  </h3>
                  <div>{location}</div>
                </ResourceList.Item>
              );
            }}
          />
        </Card>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• 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

[dleroux]

@ruairiphackett thanks for doing this. However the Actions targetted also affect the actions when they are not persistent with persistActions so it ends up looking like this on hover:

Setting right: auto on persistent actions only might do the trick.

With your change, it still doesn't line up properly. I inspected it and it looks like the card is using just a plain button and the persistent Actions are using plain and slim. Removing slim on persistent actions only should make this line up.

There's also a UNRELEASED conflict.

[ruairiphackett]

Thanks @dleroux I should have noticed that! 🤦‍♂

I removed slim on persistent actions & that did the trick 👍

I tried with right: auto; on persistent actions, but was seeing the same issue as you saw here.

I noticed there was also an issue with non-persistent actions not lining up:

With this in mind I went with removing the right value from Actions and adding the new right: spacing(loose); value to non-persistent actions when the resource item is hovered (to match the padding for the item in the card header).

I noticed that the non-persistent action should probably line up with the header alternate tool button or sorting instead of the actions in the header, so I added a further change to match this:

Before this PR:

If you think I should do this change in another PR to keep the change separate or if this is unnecessary please let me know.

[dleroux]

The joys of Resource List :). I just noticed that when the actions get hidden on a smaller screen, the Disclosure button (3 little dots on the popover) need to be updated as well. I think all you'll need is remove this:

polaris-react/src/components/ResourceItem/ResourceItem.scss

Line 239 in 76abff8

@include breakpoint-after(resource-list-item(breakpoint-small)) {

Once that is done, squashed and conflicts resolved, I think we're good.

[ruairiphackett]

@dleroux Made that change and resolved the UNRELEASED.md conflict 👍

[dleroux]

Thank you for doing this! 🚢