{"action":"created","issue":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/481","repository_url":"https://api.github.com/repos/Shopify/polaris-react","labels_url":"https://api.github.com/repos/Shopify/polaris-react/issues/481/labels{/name}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/issues/481/comments","events_url":"https://api.github.com/repos/Shopify/polaris-react/issues/481/events","html_url":"https://github.com/Shopify/polaris-react/issues/481","id":374485654,"node_id":"MDU6SXNzdWUzNzQ0ODU2NTQ=","number":481,"title":"Add small icon size for Cancel icon","user":{"login":"loic-d","id":3925905,"node_id":"MDQ6VXNlcjM5MjU5MDU=","avatar_url":"https://avatars1.githubusercontent.com/u/3925905?v=4","gravatar_id":"","url":"https://api.github.com/users/loic-d","html_url":"https://github.com/loic-d","followers_url":"https://api.github.com/users/loic-d/followers","following_url":"https://api.github.com/users/loic-d/following{/other_user}","gists_url":"https://api.github.com/users/loic-d/gists{/gist_id}","starred_url":"https://api.github.com/users/loic-d/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/loic-d/subscriptions","organizations_url":"https://api.github.com/users/loic-d/orgs","repos_url":"https://api.github.com/users/loic-d/repos","events_url":"https://api.github.com/users/loic-d/events{/privacy}","received_events_url":"https://api.github.com/users/loic-d/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-10-26T17:53:12Z","updated_at":"2018-10-26T18:16:07Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"# Feature request summary\r\n\r\n<!--\r\nWrite a short description of the feature here ↓\r\n-->\r\n\r\nConsider adding another size for the cancel icon.\r\n\r\n## Rationale\r\n\r\n<!--\r\nExplain the benefit of this feature\r\n-->\r\n\r\nIn Discounts, we have the following UI allowing merchants to add products or collections to their discount. Once added, products or collections can also be removed using the `X` icon.\r\n\r\n<img width=\"670\" alt=\"screen shot 2018-10-26 at 1 29 12 pm\" src=\"https://user-images.githubusercontent.com/3925905/47583657-1b9c1a80-d926-11e8-876e-7a1cf1eb5a40.png\">\r\n\r\n\r\nOriginally, we came up with our own HTML `button` wrapping the `Icon` component. We added some CSS to force the Icon size.\r\n\r\n```\r\n<button\r\n        type=\"button\"\r\n        className={styles.RemoveButton}\r\n        onClick={this.handleRemoveItem}\r\n        onTouchStart={this.handleRemoveItem}\r\n      >\r\n        <Icon source=\"cancel\" color=\"skyDark\" />\r\n</button>\r\n\r\n.RemoveButton {\r\n  @include unstyled-button;\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n  margin-top: spacing(extra-tight);\r\n}\r\n```\r\n\r\nTo improve accessibility, we switched to the Polaris `Button` with an icon. But the icon size is too big, even when using `cancelSmall`.\r\n\r\n```\r\n<div className={styles.RemoveButton}>\r\n        <Button\r\n          id={`remove-btn-${id}`}\r\n          icon=\"cancelSmall\"\r\n          plain\r\n          onClick={this.handleRemoveItem}\r\n        />\r\n</div>\r\n```\r\n\r\nWe've decided to keep the Polaris `Button` and added some CSS to force the size/position of the icon:\r\n```\r\n.RemoveButton {\r\n  display: flex;\r\n\r\n  svg {\r\n    position: absolute;\r\n    top: 50%;\r\n    right: 0;\r\n    left: 0;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    margin: auto;\r\n    transform: translateY(-50%);\r\n    text-align: center;\r\n    color: color('sky', 'dark');\r\n  }\r\n}\r\n```\r\n\r\nAnother solution would be to just add another icon size.\r\n\r\n<img width=\"367\" alt=\"screen shot 2018-10-26 at 1 52 36 pm\" src=\"https://user-images.githubusercontent.com/3925905/47583785-6f0e6880-d926-11e8-8ae7-4c93ba9d01e0.png\">\r\n\r\n\r\n---\r\n\r\n🌟 Feature requests that are not yet planned will be closed. We then use the issue’s [:+1: upvotes](https://help.github.com/articles/about-conversations-on-github/) to track and set priorities. See the [contribution guidelines](https://github.com/Shopify/polaris-react/blob/master/.github/CONTRIBUTING.md) for more information.\r\n"},"comment":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/comments/433498251","html_url":"https://github.com/Shopify/polaris-react/issues/481#issuecomment-433498251","issue_url":"https://api.github.com/repos/Shopify/polaris-react/issues/481","id":433498251,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMzQ5ODI1MQ==","user":{"login":"ry5n","id":804014,"node_id":"MDQ6VXNlcjgwNDAxNA==","avatar_url":"https://avatars0.githubusercontent.com/u/804014?v=4","gravatar_id":"","url":"https://api.github.com/users/ry5n","html_url":"https://github.com/ry5n","followers_url":"https://api.github.com/users/ry5n/followers","following_url":"https://api.github.com/users/ry5n/following{/other_user}","gists_url":"https://api.github.com/users/ry5n/gists{/gist_id}","starred_url":"https://api.github.com/users/ry5n/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ry5n/subscriptions","organizations_url":"https://api.github.com/users/ry5n/orgs","repos_url":"https://api.github.com/users/ry5n/repos","events_url":"https://api.github.com/users/ry5n/events{/privacy}","received_events_url":"https://api.github.com/users/ry5n/received_events","type":"User","site_admin":false},"created_at":"2018-10-26T18:16:07Z","updated_at":"2018-10-26T18:16:07Z","author_association":"CONTRIBUTOR","body":"> But the icon size is too big, even when using `cancelSmall`.\r\n\r\nCan you attach a screenshot? The small cancel icon is meant for this use case."}}
{"actor":{"display_login":"ry5n"}}