Skip to content

Conversation

dleroux
Copy link
Contributor

@dleroux dleroux commented Mar 25, 2019

WHY are these changes introduced?

The translation for the Cancel button on the resource list bulkActions were missing so I'm adding it.
Screen Shot 2019-03-25 at 8 20 33 AM

How to 🎩

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {
  Avatar,
  Card,
  Label,
  List,
  ResourceList,
  Select,
  TextStyle,
} from '@shopify/polaris';

interface State {}

export default class ResourceListExample extends React.Component {
  state = {
    selectedItems: ['341'],
  };

  handleSelectionChange = (selectedItems) => {
    this.setState({selectedItems});
  };

  renderItem = (item) => {
    const {id, url, name, location} = item;
    const media = <Avatar customer size="medium" name={name} />;

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

  render() {
    const resourceName = {
      singular: 'customer',
      plural: 'customers',
    };

    const items = [
      {
        id: 341,
        url: 'customers/341',
        name: 'Mae Jemison',
        location: 'Decatur, USA',
      },
      {
        id: 256,
        url: 'customers/256',
        name: 'Ellen Ochoa',
        location: 'Los Angeles, USA',
      },
    ];

    const promotedBulkActions = [
      {
        content: 'Edit customers',
        onAction: () => console.log('Todo: implement bulk edit'),
      },
    ];

    const bulkActions = [
      {
        content: 'Add tags',
        onAction: () => console.log('Todo: implement bulk add tags'),
      },
      {
        content: 'Remove tags',
        onAction: () => console.log('Todo: implement bulk remove tags'),
      },
      {
        content: 'Delete customers',
        onAction: () => console.log('Todo: implement bulk delete'),
      },
    ];

    return (
      <Card>
        <ResourceList
          resourceName={resourceName}
          items={items}
          renderItem={this.renderItem}
          selectedItems={this.state.selectedItems}
          onSelectionChange={this.handleSelectionChange}
          promotedBulkActions={promotedBulkActions}
          bulkActions={bulkActions}
        />
      </Card>
    );
  }
}

🎩 checklist

@dleroux dleroux requested a review from AndrewMusgrave March 25, 2019 12:21
@BPScott BPScott temporarily deployed to polaris-react-pr-1243 March 25, 2019 12:22 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1243 March 25, 2019 12:23 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1243 March 25, 2019 12:25 Inactive
Copy link
Member

@AndrewMusgrave AndrewMusgrave left a comment

Choose a reason for hiding this comment

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

Surprised this was never noticed :0 nice catch 👍

@dleroux dleroux merged commit f82a661 into master Mar 26, 2019
@chloerice chloerice temporarily deployed to production April 1, 2019 15:38 Inactive
@kaelig kaelig deleted the fix-cancel-text branch April 26, 2019 20:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants