{"action":"created","issue":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/615","repository_url":"https://api.github.com/repos/Shopify/polaris-react","labels_url":"https://api.github.com/repos/Shopify/polaris-react/issues/615/labels{/name}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/issues/615/comments","events_url":"https://api.github.com/repos/Shopify/polaris-react/issues/615/events","html_url":"https://github.com/Shopify/polaris-react/pull/615","id":380478539,"node_id":"MDExOlB1bGxSZXF1ZXN0MjMwNjY3NTcw","number":615,"title":"[DataTable] Update class targeting to data attribute targeting","user":{"login":"keyfer","id":15006490,"node_id":"MDQ6VXNlcjE1MDA2NDkw","avatar_url":"https://avatars1.githubusercontent.com/u/15006490?v=4","gravatar_id":"","url":"https://api.github.com/users/keyfer","html_url":"https://github.com/keyfer","followers_url":"https://api.github.com/users/keyfer/followers","following_url":"https://api.github.com/users/keyfer/following{/other_user}","gists_url":"https://api.github.com/users/keyfer/gists{/gist_id}","starred_url":"https://api.github.com/users/keyfer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/keyfer/subscriptions","organizations_url":"https://api.github.com/users/keyfer/orgs","repos_url":"https://api.github.com/users/keyfer/repos","events_url":"https://api.github.com/users/keyfer/events{/privacy}","received_events_url":"https://api.github.com/users/keyfer/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"keyfer","id":15006490,"node_id":"MDQ6VXNlcjE1MDA2NDkw","avatar_url":"https://avatars1.githubusercontent.com/u/15006490?v=4","gravatar_id":"","url":"https://api.github.com/users/keyfer","html_url":"https://github.com/keyfer","followers_url":"https://api.github.com/users/keyfer/followers","following_url":"https://api.github.com/users/keyfer/following{/other_user}","gists_url":"https://api.github.com/users/keyfer/gists{/gist_id}","starred_url":"https://api.github.com/users/keyfer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/keyfer/subscriptions","organizations_url":"https://api.github.com/users/keyfer/orgs","repos_url":"https://api.github.com/users/keyfer/repos","events_url":"https://api.github.com/users/keyfer/events{/privacy}","received_events_url":"https://api.github.com/users/keyfer/received_events","type":"User","site_admin":false},"assignees":[{"login":"keyfer","id":15006490,"node_id":"MDQ6VXNlcjE1MDA2NDkw","avatar_url":"https://avatars1.githubusercontent.com/u/15006490?v=4","gravatar_id":"","url":"https://api.github.com/users/keyfer","html_url":"https://github.com/keyfer","followers_url":"https://api.github.com/users/keyfer/followers","following_url":"https://api.github.com/users/keyfer/following{/other_user}","gists_url":"https://api.github.com/users/keyfer/gists{/gist_id}","starred_url":"https://api.github.com/users/keyfer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/keyfer/subscriptions","organizations_url":"https://api.github.com/users/keyfer/orgs","repos_url":"https://api.github.com/users/keyfer/repos","events_url":"https://api.github.com/users/keyfer/events{/privacy}","received_events_url":"https://api.github.com/users/keyfer/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2018-11-14T00:04:04Z","updated_at":"2018-11-14T17:58:28Z","closed_at":"2018-11-14T17:58:25Z","author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/Shopify/polaris-react/pulls/615","html_url":"https://github.com/Shopify/polaris-react/pull/615","diff_url":"https://github.com/Shopify/polaris-react/pull/615.diff","patch_url":"https://github.com/Shopify/polaris-react/pull/615.patch"},"body":"### Problem\r\n\r\nCurrently, our DataTable looks for `class*=header` when calculating column visibility. This doesn't work in a production environment where class names are obfuscated, hence this working in a development environment, but not a production environment like an embedded app.\r\n\r\n### Solution\r\nThis PR changes the way we target the `headerCells`, from the class-based targeting mentioned above to a data attribute system using `data-polaris-headercell`.\r\n\r\n#### Alternative solution\r\nThe other option here would be to use `refs` instead of data attributes, but with `Cell` being a subcomponent inside of `DataTable`, we would need to do a ref callback, and that seemed like more trouble than what it was worth.\r\n\r\n### How to 🔝 👒 \r\n\r\n - Load up the `DataTable` component with some dummy data\r\n - Make sure classes are obfuscated in the DOM\r\n - Confirm that the fixed column works, and there is no `offsetWidth` error in the console\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* [x] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/comments/438757796","html_url":"https://github.com/Shopify/polaris-react/pull/615#issuecomment-438757796","issue_url":"https://api.github.com/repos/Shopify/polaris-react/issues/615","id":438757796,"node_id":"MDEyOklzc3VlQ29tbWVudDQzODc1Nzc5Ng==","user":{"login":"probot-shopify[bot]","id":37905380,"node_id":"MDM6Qm90Mzc5MDUzODA=","avatar_url":"https://avatars2.githubusercontent.com/in/10530?v=4","gravatar_id":"","url":"https://api.github.com/users/probot-shopify%5Bbot%5D","html_url":"https://github.com/apps/probot-shopify","followers_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/followers","following_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/following{/other_user}","gists_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/gists{/gist_id}","starred_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/subscriptions","organizations_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/orgs","repos_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/repos","events_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/events{/privacy}","received_events_url":"https://api.github.com/users/probot-shopify%5Bbot%5D/received_events","type":"Bot","site_admin":false},"created_at":"2018-11-14T17:58:28Z","updated_at":"2018-11-14T17:58:28Z","author_association":"NONE","body":"🎉 Thanks for your contribution to Polaris React!\n"}}
{"actor":{"display_login":"probot-shopify"}}