{"action":"opened","issue":{"url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow/issues/5266","repository_url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow","labels_url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow/issues/5266/labels{/name}","comments_url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow/issues/5266/comments","events_url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow/issues/5266/events","html_url":"https://github.com/department-of-veterans-affairs/caseflow/issues/5266","id":316448906,"number":5266,"title":"Estimate time involved to improve StyleGuide","user":{"login":"mdbenjam","id":3885236,"avatar_url":"https://avatars1.githubusercontent.com/u/3885236?v=4","gravatar_id":"","url":"https://api.github.com/users/mdbenjam","html_url":"https://github.com/mdbenjam","followers_url":"https://api.github.com/users/mdbenjam/followers","following_url":"https://api.github.com/users/mdbenjam/following{/other_user}","gists_url":"https://api.github.com/users/mdbenjam/gists{/gist_id}","starred_url":"https://api.github.com/users/mdbenjam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdbenjam/subscriptions","organizations_url":"https://api.github.com/users/mdbenjam/orgs","repos_url":"https://api.github.com/users/mdbenjam/repos","events_url":"https://api.github.com/users/mdbenjam/events{/privacy}","received_events_url":"https://api.github.com/users/mdbenjam/received_events","type":"User","site_admin":false},"labels":[{"id":546558179,"url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow/labels/styleguide","name":"styleguide","color":"1d76db","default":false},{"id":570308197,"url":"https://api.github.com/repos/department-of-veterans-affairs/caseflow/labels/whiskey","name":"whiskey","color":"ADEAEA","default":false}],"state":"open","locked":false,"assignee":{"login":"nolawi","id":1745984,"avatar_url":"https://avatars0.githubusercontent.com/u/1745984?v=4","gravatar_id":"","url":"https://api.github.com/users/nolawi","html_url":"https://github.com/nolawi","followers_url":"https://api.github.com/users/nolawi/followers","following_url":"https://api.github.com/users/nolawi/following{/other_user}","gists_url":"https://api.github.com/users/nolawi/gists{/gist_id}","starred_url":"https://api.github.com/users/nolawi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nolawi/subscriptions","organizations_url":"https://api.github.com/users/nolawi/orgs","repos_url":"https://api.github.com/users/nolawi/repos","events_url":"https://api.github.com/users/nolawi/events{/privacy}","received_events_url":"https://api.github.com/users/nolawi/received_events","type":"User","site_admin":false},"assignees":[{"login":"nolawi","id":1745984,"avatar_url":"https://avatars0.githubusercontent.com/u/1745984?v=4","gravatar_id":"","url":"https://api.github.com/users/nolawi","html_url":"https://github.com/nolawi","followers_url":"https://api.github.com/users/nolawi/followers","following_url":"https://api.github.com/users/nolawi/following{/other_user}","gists_url":"https://api.github.com/users/nolawi/gists{/gist_id}","starred_url":"https://api.github.com/users/nolawi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nolawi/subscriptions","organizations_url":"https://api.github.com/users/nolawi/orgs","repos_url":"https://api.github.com/users/nolawi/repos","events_url":"https://api.github.com/users/nolawi/events{/privacy}","received_events_url":"https://api.github.com/users/nolawi/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-04-21T01:07:45Z","updated_at":"2018-04-21T01:07:45Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"We've been considering two approaches to improve our styleguide, and we need to evaluate them both to determine how long each would take.\r\n\r\n1) Adopting the [CMS design system](https://design.cms.gov/)\r\n   - Advantages: \r\n      1) Defines several components for us with good documentation. We could replace our alert, button, checkboxes, radio buttons, date field, list, modal, tabs, text fields, and vertical navigation components. We would no longer need to maintain them ourselves. They have nice clean interfaces, which do not need any extra CSS to be used.\r\n       1) Has better responsiveness built in.\r\n       1) Has a large number of utility classes that enable setting a lot of things like padding and margins without writing any CSS.\r\n   - Disadvantages\r\n      1) Would need to rewrite a large portion of our frontend code to use the design system\r\n      1) If we give up half way through, then we have a fragmented code base using USWDS and the CMS design system.\r\n1) Improving the styleguide by: ripping out any application logic from our components, adding new React components to encapsulate grids, padding, and margins so that we can write more pages with fewer CSS classes, and can regulate spacing (i.e. the padding component will only have 4 levels of padding 8px, 16px, 24px, 32px).\r\n   - Advantages:\r\n      1) If we give up on this effort we still have a strictly better design system.\r\n      1) We can approach this more incrementally by slowly improving each component, rather than trying to replace each component wholesale.\r\n      1) We can build the components to directly fit our needs.\r\n      1) Some components are fine now and don't need much improvement. Replacing them with the design system components may be overkill.\r\n      1) Grid layout has some responsiveness built in, we should start using it more.\r\n   - Disadvantages:\r\n      1) Don't get some of the cool responsive features of design system, such as responsive type and more breakpoints.\r\n      1) Have to maintain more code.\r\n\r\n\r\nIn order to get a gut check on how long each approach will take, we want to evaluate how long each approach will take. For approach 1, import the design system and try to convert a few \\<Button\\> components to the design system button. See what the lift is, and estimate how long it would take to replace every button. For approach 2, identify which components have app/usage-specific logic within the component itself. Then take \\<Button\\> remove the any app specific logic, and try to replace a few buttons. then estimate how long it would take to replace all of the buttons. There is no code change needed for this ticket, just the estimates. "}}
{"actor":{"display_login":"mdbenjam"}}