[ResourceItem] Fix vertical alignment of checkbox and media

[attila-berki]

WHY are these changes introduced?

Alignment of the <ResourceItem> content is slightly inconsistent. While the main content is center aligned all the other components like the checkbox, media and shortcut actions are set to flex-start.

I would suggest to center align all of the items, or maybe in the future enable the consumers to choose the alignment.

An issue have been reported on the product details page:

Sandbox example:
https://codesandbox.io/s/patient-platform-43qls?fontsize=14&hidenavigation=1&theme=dark

WHAT is this pull request doing?

This PR would enable the consumers to change the vertical item alignment of the main container, keeping the default alignment with the current flex-start.

Before:

After adding the alignment="center" property

Before:

After adding the alignment="center" property

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx and try the alignment with all of the 5 options 'leading' | 'trailing' | 'center' | 'fill' | 'baseline' :

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

export function Playground() {
  return (
    <Page title="Playground">
      <Card>
        <ResourceList
          resourceName={{singular: 'customer', plural: 'customers'}}
          items={[
            {
              id: 145,
              url: 'customers/145',
              avatarSource:
                'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',
              name: 'Yi So-Yeon',
              location: 'Gwangju, South Korea',
            },
          ]}
          selectable
          renderItem={(item) => {
            const {id, url, avatarSource, name, location} = item;
            const shortcutActions = [{content: 'View latest order', url: ''}];

            return (
              <ResourceItem
                id={id}
                url={url}
                media={
                  <Avatar
                    customer
                    size="medium"
                    name={name}
                    source={avatarSource}
                  />
                }
                accessibilityLabel={`View details for ${name}`}
                name={name}
                shortcutActions={shortcutActions}
                persistActions
                alignment="center"
              >
                <h3>
                  <TextStyle variation="strong">{name}</TextStyle>
                </h3>
                <div>{location}</div>
                <div>{id}</div>
                <div>{url}</div>
              </ResourceItem>
            );
          }}
        />
      </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

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

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

Details:

All files potentially affected (total: 2)

• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

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

Files potentially affected (total: 0)

🎨 src/components/ResourceItem/ResourceItem.scss (total: 2)

Files potentially affected (total: 2)

• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx

🧩 src/components/ResourceItem/ResourceItem.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/ResourceList/ResourceList.tsx

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

Files potentially affected (total: 0)

[chloerice]

Hey @BerkiAttila 👋 Tagged in @sarahill to get some design perspective on this. From an API/code perspective I agree it'd be best to put this behind a prop for the consumer to control, since changing the alignment may be an unexpected breaking visual change.

[attila-berki]

Hey @chloerice . Thank you for you feedback, I will update the PR and add a prop to control the alignment.
Although I am not sure what should be the default value. As currently it is inconsistent I would pick either center or flex-start. Maybe going with flex-start would have the least visual impact as it only affects one of the items. What do you think?

[chloerice]

Hey @chloerice . Thank you for you feedback, I will update the PR and add a prop to control the alignment.
Although I am not sure what should be the default value. As currently it is inconsistent I would pick either center or flex-start. Maybe going with flex-start would have the least visual impact as it only affects one of the items. What do you think?

I'd default to the current layout of flex-start 👍(The idea behind the media and checkbox being top aligned was in order to keep things aligned across the item regardless of other custom content below the main parts of the item.)

[attila-berki]

Hey @chloerice . I added the alignment as a public property with a default value of flex-start.
Would it possible to add the new property and maybe some of the existing ones to the Polaris home page? I feel it's a bit hard for the consumer to discover all of the possibilities.

[chloerice]

Hey @BerkiAttila, code and 🎩looks great! Just have a couple content suggestions, including adding an example for the new prop.

[attila-berki]

Hey @BerkiAttila, code and 🎩looks great! Just have a couple content suggestions, including adding an example for the new prop.

Hey @chloerice. Thank you for your suggestions, I have incorporated all of them. Please take another look and let me know if anything else needs to be changed.

[chloerice]

Everything 👀🏅Go ahead and merge this once you rebase @BerkiAttila 😁🚀