payload: {"action":"created","issue":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/2389","repository_url":"https://api.github.com/repos/Shopify/polaris-react","labels_url":"https://api.github.com/repos/Shopify/polaris-react/issues/2389/labels{/name}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/issues/2389/comments","events_url":"https://api.github.com/repos/Shopify/polaris-react/issues/2389/events","html_url":"https://github.com/Shopify/polaris-react/pull/2389","id":515673403,"node_id":"MDExOlB1bGxSZXF1ZXN0MzM1MDk0NTk1","number":2389,"title":"[Filter] Add 'disabled' prop","user":{"login":"PabloVallejo","id":1751074,"node_id":"MDQ6VXNlcjE3NTEwNzQ=","avatar_url":"https://avatars3.githubusercontent.com/u/1751074?v=4","gravatar_id":"","url":"https://api.github.com/users/PabloVallejo","html_url":"https://github.com/PabloVallejo","followers_url":"https://api.github.com/users/PabloVallejo/followers","following_url":"https://api.github.com/users/PabloVallejo/following{/other_user}","gists_url":"https://api.github.com/users/PabloVallejo/gists{/gist_id}","starred_url":"https://api.github.com/users/PabloVallejo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PabloVallejo/subscriptions","organizations_url":"https://api.github.com/users/PabloVallejo/orgs","repos_url":"https://api.github.com/users/PabloVallejo/repos","events_url":"https://api.github.com/users/PabloVallejo/events{/privacy}","received_events_url":"https://api.github.com/users/PabloVallejo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2019-10-31T19:05:04Z","updated_at":"2019-11-04T15:26:31Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/Shopify/polaris-react/pulls/2389","html_url":"https://github.com/Shopify/polaris-react/pull/2389","diff_url":"https://github.com/Shopify/polaris-react/pull/2389.diff","patch_url":"https://github.com/Shopify/polaris-react/pull/2389.patch"},"body":"<!--\r\n  ☝️How to write a good PR title:\r\n  - Prefix it with [ComponentName] (if applicable), for example: [Button]\r\n  - Start with a verb, for example: Add, Delete, Improve, Fix…\r\n  - Give as much context as necessary and as little as possible\r\n  - Prefix it with [WIP] while it’s a work in progress\r\n-->\r\n\r\n### WHY are these changes introduced?\r\n\r\nRelated to https://github.com/Shopify/store/issues/10681\r\n\r\nAs part of the solution for https://github.com/Shopify/store/issues/10681 we need to disable the `Filters` in the Products Index Page. Currently the filter component doesn't have a prop to disable it.\r\n\r\n### WHAT is this pull request doing?\r\n\r\nThis PR adds a `disabled` prop to the `Filter` component.\r\n\r\nWhen the `Filter` is disabled:\r\n\r\n* Search-bar is disabled\r\n* Actions from `ConnectedFilterControl` are disabled.\r\n* Popover is closed \r\n* Sheet filter togglers are disabled\r\n* Sheet filter titles are subdued\r\n\r\n\r\n| Disabled filters        | Disabled sheet     | \r\n| ------------- |:-------------:| \r\n| ![image](https://user-images.githubusercontent.com/1751074/67976286-2bf76d00-fbec-11e9-84b2-8ce5a151445d.png) | ![image](https://user-images.githubusercontent.com/1751074/67976233-1a15ca00-fbec-11e9-837c-dc5f19f192f0.png) | \r\n\r\n<!--\r\n  Summary of the changes committed.\r\n\r\n  Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot.\r\n\r\n  If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR:\r\n\r\n    <details>\r\n      <summary>Summary of your gif(s)</summary>\r\n      <img src=\"...\" alt=\"Description of what the gif shows\">\r\n    </details>\r\n-->\r\n\r\n## <!-- ℹ️ Delete the following for small / trivial changes -->\r\n\r\n### How to 🎩\r\n\r\n* Paste the playground code and run the project \r\n* From the playground, see that all the filters are active\r\n* ✅Click the account status button and select any option: See that the filters get disabled\r\n* ✅Click `More filters` and from the Account status filter select any option: See that the main filters get disabled and the filters in the Sidebar get their title subdued!\r\n\r\n🖥 [Local development instructions](https://github.com/Shopify/polaris-react/blob/master/README.md#development)\r\n🗒 [General tophatting guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md)\r\n📄 [Changelog guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md)\r\n\r\n<!--\r\n  Give as much information as needed to experiment with the component\r\n  in the playground.\r\n-->\r\n\r\n<details>\r\n<summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>\r\n\r\n```jsx\r\nimport React, {useState, useCallback} from 'react';\r\nimport {\r\n  Page,\r\n  TextField,\r\n  Avatar,\r\n  Filters,\r\n  Card,\r\n  TextStyle,\r\n  ResourceList,\r\n  ChoiceList,\r\n} from '../src';\r\n\r\nfunction ResourceListFiltersExample() {\r\n  const [accountStatus, setAccountStatus] = useState(null);\r\n  const [moneySpent, setMoneySpent] = useState(null);\r\n  const [taggedWith, setTaggedWith] = useState(null);\r\n  const [queryValue, setQueryValue] = useState(null);\r\n\r\n  const handleAccountStatusChange = useCallback(\r\n    (value) => setAccountStatus(value),\r\n    [],\r\n  );\r\n  const handleMoneySpentChange = useCallback(\r\n    (value) => setMoneySpent(value),\r\n    [],\r\n  );\r\n  const handleTaggedWithChange = useCallback(\r\n    (value) => setTaggedWith(value),\r\n    [],\r\n  );\r\n  const handleFiltersQueryChange = useCallback(\r\n    (value) => setQueryValue(value),\r\n    [],\r\n  );\r\n  const handleAccountStatusRemove = useCallback(\r\n    () => setAccountStatus(null),\r\n    [],\r\n  );\r\n  const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);\r\n  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);\r\n  const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);\r\n  const handleFiltersClearAll = useCallback(() => {\r\n    handleAccountStatusRemove();\r\n    handleMoneySpentRemove();\r\n    handleTaggedWithRemove();\r\n    handleQueryValueRemove();\r\n  }, [\r\n    handleAccountStatusRemove,\r\n    handleMoneySpentRemove,\r\n    handleQueryValueRemove,\r\n    handleTaggedWithRemove,\r\n  ]);\r\n\r\n  const filters = [\r\n    {\r\n      key: 'accountStatus',\r\n      label: 'Account status',\r\n      filter: (\r\n        <ChoiceList\r\n          title=\"Account status\"\r\n          titleHidden\r\n          choices={[\r\n            {label: 'Enabled', value: 'enabled'},\r\n            {label: 'Not invited', value: 'not invited'},\r\n            {label: 'Invited', value: 'invited'},\r\n            {label: 'Declined', value: 'declined'},\r\n          ]}\r\n          selected={accountStatus || []}\r\n          onChange={handleAccountStatusChange}\r\n          allowMultiple\r\n        />\r\n      ),\r\n      shortcut: true,\r\n    },\r\n    {\r\n      key: 'taggedWith',\r\n      label: 'Tagged with',\r\n      filter: (\r\n        <TextField\r\n          label=\"Tagged with\"\r\n          value={taggedWith}\r\n          onChange={handleTaggedWithChange}\r\n          labelHidden\r\n        />\r\n      ),\r\n      shortcut: true,\r\n    },\r\n  ];\r\n\r\n  const appliedFilters = [];\r\n  if (!isEmpty(accountStatus)) {\r\n    const key = 'accountStatus';\r\n    appliedFilters.push({\r\n      key,\r\n      label: disambiguateLabel(key, accountStatus),\r\n      onRemove: handleAccountStatusRemove,\r\n    });\r\n  }\r\n  if (!isEmpty(moneySpent)) {\r\n    const key = 'moneySpent';\r\n    appliedFilters.push({\r\n      key,\r\n      label: disambiguateLabel(key, moneySpent),\r\n      onRemove: handleMoneySpentRemove,\r\n    });\r\n  }\r\n  if (!isEmpty(taggedWith)) {\r\n    const key = 'taggedWith';\r\n    appliedFilters.push({\r\n      key,\r\n      label: disambiguateLabel(key, taggedWith),\r\n      onRemove: handleTaggedWithRemove,\r\n    });\r\n  }\r\n\r\n  const isDisabled =\r\n    appliedFilters.length > 0 && appliedFilters[0].key === 'accountStatus';\r\n\r\n  return (\r\n    <div style={{height: '568px'}}>\r\n      <Card>\r\n        <ResourceList\r\n          resourceName={{singular: 'customer', plural: 'customers'}}\r\n          filterControl={\r\n            <Filters\r\n              queryValue={queryValue}\r\n              filters={filters}\r\n              appliedFilters={appliedFilters}\r\n              onQueryChange={handleFiltersQueryChange}\r\n              onQueryClear={handleQueryValueRemove}\r\n              onClearAll={handleFiltersClearAll}\r\n              disabled={isDisabled}\r\n            />\r\n          }\r\n          items={[\r\n            {\r\n              id: 341,\r\n              url: 'customers/341',\r\n              name: 'Mae Jemison',\r\n              location: 'Decatur, USA',\r\n            },\r\n            {\r\n              id: 256,\r\n              url: 'customers/256',\r\n              name: 'Ellen Ochoa',\r\n              location: 'Los Angeles, USA',\r\n            },\r\n          ]}\r\n          renderItem={(item) => {\r\n            const {id, url, name, location} = item;\r\n            const media = <Avatar customer size=\"medium\" name={name} />;\r\n\r\n            return (\r\n              <ResourceList.Item\r\n                id={id}\r\n                url={url}\r\n                media={media}\r\n                accessibilityLabel={`View details for ${name}`}\r\n              >\r\n                <h3>\r\n                  <TextStyle variation=\"strong\">{name}</TextStyle>\r\n                </h3>\r\n                <div>{location}</div>\r\n              </ResourceList.Item>\r\n            );\r\n          }}\r\n        />\r\n      </Card>\r\n    </div>\r\n  );\r\n\r\n  function disambiguateLabel(key, value) {\r\n    switch (key) {\r\n      case 'moneySpent':\r\n        return `Money spent is between $${value[0]} and $${value[1]}`;\r\n      case 'taggedWith':\r\n        return `Tagged with ${value}`;\r\n      case 'accountStatus':\r\n        return value.map((val) => `Customer ${val}`).join(', ');\r\n      default:\r\n        return value;\r\n    }\r\n  }\r\n\r\n  function isEmpty(value) {\r\n    if (Array.isArray(value)) {\r\n      return value.length === 0;\r\n    } else {\r\n      return value === '' || value == null;\r\n    }\r\n  }\r\n}\r\n\r\nexport function Playground() {\r\n  return (\r\n    <Page title=\"Playground\">\r\n      <ResourceListFiltersExample />\r\n    </Page>\r\n  );\r\n}\r\n\r\n```\r\n\r\n</details>\r\n\r\n### 🎩 checklist\r\n\r\n* [x] Tested on [mobile](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md#cross-browser-testing)\r\n* [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/intro-to-shopify/shopify-admin/supported-browsers)\r\n* [ ] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)\r\n* [x] Updated the component's `README.md` with documentation changes\r\n* [ ] [Tophatted documentation](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting%20documentation.md) changes in the style guide\r\n* [ ] For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the [Polaris UI kit](https://polaris.shopify.com/resources/polaris-ui-kit)\r\n\r\n<!--\r\n  When tophatting, please check the UNRELEASED entry for consistency, as per the [guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md).\r\n-->\r\n\r\n<!--\r\n  If you don't have access to Percy, please request access in the #polaris Slack channel.\r\n-->\r\n"},"comment":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/comments/549405541","html_url":"https://github.com/Shopify/polaris-react/pull/2389#issuecomment-549405541","issue_url":"https://api.github.com/repos/Shopify/polaris-react/issues/2389","id":549405541,"node_id":"MDEyOklzc3VlQ29tbWVudDU0OTQwNTU0MQ==","user":{"login":"devonpmack","id":21130966,"node_id":"MDQ6VXNlcjIxMTMwOTY2","avatar_url":"https://avatars2.githubusercontent.com/u/21130966?v=4","gravatar_id":"","url":"https://api.github.com/users/devonpmack","html_url":"https://github.com/devonpmack","followers_url":"https://api.github.com/users/devonpmack/followers","following_url":"https://api.github.com/users/devonpmack/following{/other_user}","gists_url":"https://api.github.com/users/devonpmack/gists{/gist_id}","starred_url":"https://api.github.com/users/devonpmack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/devonpmack/subscriptions","organizations_url":"https://api.github.com/users/devonpmack/orgs","repos_url":"https://api.github.com/users/devonpmack/repos","events_url":"https://api.github.com/users/devonpmack/events{/privacy}","received_events_url":"https://api.github.com/users/devonpmack/received_events","type":"User","site_admin":false},"created_at":"2019-11-04T15:26:31Z","updated_at":"2019-11-04T15:26:31Z","author_association":"CONTRIBUTOR","body":"![image](https://user-images.githubusercontent.com/21130966/68132852-62cfca80-feed-11e9-8acc-973036d2dc51.png)\r\n\r\nIt would be great if we could also disable the onHover of the drop downs. Right now it changes your cursor to 'link mode' and darkens the button. This makes it seem like you can click it even though you can't. It doesn't really match the way other disabled buttons work in polaris. I understand that this could be hard to fix though."}}
other: {"actor":{"display_login":"devonpmack"}}