{"action":"created","issue":{"url":"https://api.github.com/repos/folio-org/stripes-components/issues/209","repository_url":"https://api.github.com/repos/folio-org/stripes-components","labels_url":"https://api.github.com/repos/folio-org/stripes-components/issues/209/labels{/name}","comments_url":"https://api.github.com/repos/folio-org/stripes-components/issues/209/comments","events_url":"https://api.github.com/repos/folio-org/stripes-components/issues/209/events","html_url":"https://github.com/folio-org/stripes-components/pull/209","id":293232064,"number":209,"title":"Modify default button style","user":{"login":"cherewaty","id":230597,"avatar_url":"https://avatars0.githubusercontent.com/u/230597?v=4","gravatar_id":"","url":"https://api.github.com/users/cherewaty","html_url":"https://github.com/cherewaty","followers_url":"https://api.github.com/users/cherewaty/followers","following_url":"https://api.github.com/users/cherewaty/following{/other_user}","gists_url":"https://api.github.com/users/cherewaty/gists{/gist_id}","starred_url":"https://api.github.com/users/cherewaty/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cherewaty/subscriptions","organizations_url":"https://api.github.com/users/cherewaty/orgs","repos_url":"https://api.github.com/users/cherewaty/repos","events_url":"https://api.github.com/users/cherewaty/events{/privacy}","received_events_url":"https://api.github.com/users/cherewaty/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-01-31T16:50:06Z","updated_at":"2018-02-01T00:52:35Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/folio-org/stripes-components/pulls/209","html_url":"https://github.com/folio-org/stripes-components/pull/209","diff_url":"https://github.com/folio-org/stripes-components/pull/209.diff","patch_url":"https://github.com/folio-org/stripes-components/pull/209.patch"},"body":"## Purpose\r\nThe FOLIO button styles available take a very similar approach to [Bootstrap](https://getbootstrap.com/docs/4.0/components/buttons/) and [Foundation](https://foundation.zurb.com/sites/docs/button.html). That means there are a wide variety of styles available, but they are unprescriptive about use.\r\n\r\n### Before\r\n![before](https://user-images.githubusercontent.com/230597/35635516-1a911378-0674-11e8-9607-914f30aed51a.png)\r\n\r\nWeaknesses of the current strategy:\r\n- Primary buttons (in solid blue) are the default if no specific style of button has been specified. That means there are frequently multiple primary buttons visible at the same time.\r\n- Secondary buttons can be confused with a disabled state.\r\n- Secondary buttons have a very similar visual weight to primary buttons. We're solely relying on color to distinguish between them.\r\n- Hollow buttons don't have an explicit purpose.\r\n\r\n## Approach\r\nBased on a session at the FOLIO Madrid dev summit and a conversation with @filipjakobsen, here are new naming conventions and styles for buttons. It shifts to a more prescriptive set more similar to [MailChimp's Pattern Library](https://ux.mailchimp.com/patterns/forms) or [Salesforce's Lightning Design System](https://www.lightningdesignsystem.com/components/buttons/).\r\n\r\n### After\r\n![after](https://user-images.githubusercontent.com/230597/35635540-2e4b64d6-0674-11e8-887e-92bfb42ab5f8.png)\r\n\r\n- There's now a `default` button style different from the `primary` button style. When in doubt, use `default`.\r\n- When in the context of a form, use the primary button to denote what will happen if the user submits the form.\r\n- In almost every case, the primary button should only be used if typing Enter/Return will trigger it.\r\n- \"Error\" has been renamed to \"Danger\" to better reflect when it gets used. It's intended for buttons where clicking them will cause something \"dangerous\" to happen.\r\n- `danger`, `success`, and `warning` buttons should be used sparingly.\r\n- `hollow` is no longer an available button prop.\r\n- `transparent` and `secondary` are no longer available `buttonStyles`.\r\n- The disabled state is now distinct from every enabled button style.\r\n\r\n### Disabled buttons\r\n![disabled](https://user-images.githubusercontent.com/230597/35635590-578bfd6a-0674-11e8-8465-3fe5237f4098.png)\r\n\r\n## Risk\r\nThis _is_ a breaking change. A few quick searches around the `folio-org` revealed a small number of uses of `hollow`, `transparent`, and `error`. Module developers should comb over their buttons to ensure they're now using the right options."},"comment":{"url":"https://api.github.com/repos/folio-org/stripes-components/issues/comments/362121737","html_url":"https://github.com/folio-org/stripes-components/pull/209#issuecomment-362121737","issue_url":"https://api.github.com/repos/folio-org/stripes-components/issues/209","id":362121737,"user":{"login":"filipjakobsen","id":7440502,"avatar_url":"https://avatars1.githubusercontent.com/u/7440502?v=4","gravatar_id":"","url":"https://api.github.com/users/filipjakobsen","html_url":"https://github.com/filipjakobsen","followers_url":"https://api.github.com/users/filipjakobsen/followers","following_url":"https://api.github.com/users/filipjakobsen/following{/other_user}","gists_url":"https://api.github.com/users/filipjakobsen/gists{/gist_id}","starred_url":"https://api.github.com/users/filipjakobsen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/filipjakobsen/subscriptions","organizations_url":"https://api.github.com/users/filipjakobsen/orgs","repos_url":"https://api.github.com/users/filipjakobsen/repos","events_url":"https://api.github.com/users/filipjakobsen/events{/privacy}","received_events_url":"https://api.github.com/users/filipjakobsen/received_events","type":"User","site_admin":false},"created_at":"2018-02-01T00:52:35Z","updated_at":"2018-02-01T00:52:35Z","author_association":"CONTRIBUTOR","body":"Let’s go with these for now. The thing John mentions is something I’ve already discussed with Kimie Kester as a potential issue. We might update it in another PR later on. But in any case, we will want to tweak all the components and heir styling as we go along.\r\n\r\nThe most important part about this PR is that it deprecates certain button styles and changes the default button to be a secondary style."}}
{"actor":{"display_login":"filipjakobsen"}}