Skip to content
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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ResourceList] Fix checkbox / action visibility on different breakpoints / select mode #1333

Merged
merged 2 commits into from Apr 22, 2019

Conversation

@AndrewMusgrave
Copy link
Member

commented Apr 17, 2019

WHY are these changes introduced?

In #1312 @dleroux noticed some issues with how our actions are handled and checkboxes appearing when they shouldn't

Screenshot of current small screen + select mode

Screen Shot 2019-04-17 at 2 01 19 PM

WHAT is this pull request doing?

I believe the below behaviour was our original intention. A confirmation from @ry5n or @dleroux would be great 馃槃

Large screen

https://cl.ly/106b459458af
  • Show persistent actions
  • Show actions on hover and keyboard interaction
  • Select mode
    • Show persistent actions
    • Show actions on hover and keyboard interaction

Partially condensed

https://cl.ly/4037c3d388b8
  • Show persistent actions in disclosure
  • Do NOT show actions on hover or keyboard interaction
  • Select mode
    • Do NOT show actions at all

Small screen

https://cl.ly/8f45b3d60c62
  • Show persistent actions in disclosure
  • Do NOT show actions on hover or keyboard interaction
  • Select mode
    • Do NOT show actions at all

How to 馃帺

Play with ResourceList items with a mix of small screen / partially condensed / large screen and select mode 馃槃

Videos have been included above of all interactions

Copy-paste this code in playground/Playground.tsx:
import * as React from 'react';
import {Page, Avatar, Card, ResourceList, FilterType, TextStyle} from '../src';

interface State {}

export default class ResourceListExample extends React.Component {
  state = {
    selectedItems: [],
    sortValue: 'DATE_MODIFIED_DESC',
    searchValue: '',
    appliedFilters: [
      {
        key: 'accountStatusFilter',
        value: 'Account enabled',
      },
    ],
  };

  handleSearchChange = (searchValue) => {
    this.setState({searchValue});
  };

  handleFiltersChange = (appliedFilters) => {
    this.setState({appliedFilters});
  };

  handleSortChange = (sortValue) => {
    this.setState({sortValue});
  };

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

  renderItem = (item) => {
    const {id, url, name, location, latestOrderUrl, persistActions} = 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={Boolean(Math.floor(Math.random() * Math.floor(2)))}
        persistActions={persistActions}
      >
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceList.Item>
    );
  };

  render() {
    const resourceName = {
      singular: 'customer',
      plural: 'customers',
    };
    const items = [
      {
        id: 1,
        url: 'customers/1',
        name: 'First Jemison',
        location: 'Decatur, USA',
        latestOrderUrl: 'orders/1456',
        persistActions: true,
      },
      {
        id: 2,
        name: 'Second Ochoa',
        location: 'Los Angeles, USA',
        latestOrderUrl: 'orders/1457',
        persistActions: false,
      },
      {
        id: 3,
        name: 'Thrid Jemison',
        location: 'Decatur, USA',
        latestOrderUrl: 'orders/1456',
        persistActions: true,
      },
      {
        id: 4,
        url: 'customers/2576',
        name: 'Fourth Ochoa',
        location: 'Los Angeles, USA',
        latestOrderUrl: 'orders/1457',
        persistActions: false,
      },
      {
        id: 5,
        url: 'customers/323441',
        name: 'Fifth Jemison',
        location: 'Decatur, USA',
        latestOrderUrl: 'orders/1456',
        persistActions: true,
      },
      {
        id: 6,
        url: 'customers/256786',
        name: 'Sixth Ochoa',
        location: 'Los Angeles, USA',
        latestOrderUrl: 'orders/1457',
        persistActions: false,
      },
    ];
    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'),
      },
    ];
    const filters = [
      {
        key: 'orderCountFilter',
        label: 'Number of orders',
        operatorText: 'is greater than',
        type: FilterType.TextField,
      },
      {
        key: 'accountStatusFilter',
        label: 'Account status',
        operatorText: 'is',
        type: FilterType.Select,
        options: ['Enabled', 'Invited', 'Not invited', 'Declined'],
      },
    ];
    const filterControl = (
      <ResourceList.FilterControl
        filters={filters}
        appliedFilters={this.state.appliedFilters}
        onFiltersChange={this.handleFiltersChange}
        searchValue={this.state.searchValue}
        onSearchChange={this.handleSearchChange}
        additionalAction={{
          content: 'Save',
          onAction: () => console.log('New filter saved'),
        }}
      />
    );
    console.log('remder')
    return (
      <Card>
        <ResourceList
          resourceName={resourceName}
          items={items}
          renderItem={this.renderItem}
          selectedItems={this.state.selectedItems}
          onSelectionChange={this.handleSelectionChange}
          promotedBulkActions={promotedBulkActions}
          bulkActions={bulkActions}
          sortValue={this.state.sortValue}
          sortOptions={[
            {label: 'Newest update', value: 'DATE_MODIFIED_DESC'},
            {label: 'Oldest update', value: 'DATE_MODIFIED_ASC'},
          ]}
          onSortChange={(selected) => {
            this.setState({sortValue: selected});
            console.log(`Sort option changed to ${selected}.`);
          }}
          filterControl={filterControl}
        />
      </Card>
    );
  }
}

@BPScott BPScott temporarily deployed to polaris-react-pr-1333 Apr 17, 2019 Inactive

@@ -125,6 +125,14 @@
margin: (-1 * resource-list-item(padding)) spacing(extra-tight)
(-1 * resource-list-item(padding)) resource-list-item(control-indent);
display: flex;

@include breakpoint-before(resource-list(breakpoint-small)) {
visibility: hidden;

This comment has been minimized.

Copy link
@AndrewMusgrave

AndrewMusgrave Apr 17, 2019

Author Member

visibility: hidden; is required here to reserve the space in the dom so the item doesn't collapse and become partially hidden

This comment has been minimized.

Copy link
@dleroux

dleroux Apr 17, 2019

Contributor

I wonder what changed that this wasn't an issue before.

@AndrewMusgrave AndrewMusgrave requested review from dleroux and chloerice Apr 17, 2019

@dleroux
Copy link
Contributor

left a comment

This works!

@AndrewMusgrave AndrewMusgrave changed the title [ResourceList] Fix action visibility on different breakpoints / select mode [ResourceList] Fix checkbox / action visibility on different breakpoints / select mode Apr 17, 2019

@chloerice
Copy link
Member

left a comment

馃

@AndrewMusgrave AndrewMusgrave force-pushed the rl-actions-fix-visibility branch from d0e48a4 to 53cdd41 Apr 22, 2019

@BPScott BPScott requested a deployment to polaris-react-pr-1333 Apr 22, 2019 Abandoned

@AndrewMusgrave AndrewMusgrave merged commit 30086be into master Apr 22, 2019

8 checks passed

CLA Contributor License Agreement (CLA) status
Details
WIP ready for review
Details
changelog changelog entry included
Details
ci/circleci: check Your tests passed on CircleCI!
Details
ci/circleci: percy Your tests passed on CircleCI!
Details
codecov/patch Coverage not affected when comparing 11fc996...53cdd41
Details
percy/polaris-react Visual review automatically approved, no visual changes found.
Details
shrink-ray Webpack build report complete :)
Details

@AndrewMusgrave AndrewMusgrave deleted the rl-actions-fix-visibility branch Apr 22, 2019

@alex-page alex-page deployed to production Apr 22, 2019 Active

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can鈥檛 perform that action at this time.