{"action":"closed","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/8974","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/8974/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/8974/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/8974/events","html_url":"https://github.com/Automattic/wp-calypso/issues/8974","id":185634465,"number":8974,"title":"GuidedTours: don't require tour authors to use CSS classes","user":{"login":"lsinger","id":23619,"avatar_url":"https://avatars.githubusercontent.com/u/23619?v=3","gravatar_id":"","url":"https://api.github.com/users/lsinger","html_url":"https://github.com/lsinger","followers_url":"https://api.github.com/users/lsinger/followers","following_url":"https://api.github.com/users/lsinger/following{/other_user}","gists_url":"https://api.github.com/users/lsinger/gists{/gist_id}","starred_url":"https://api.github.com/users/lsinger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lsinger/subscriptions","organizations_url":"https://api.github.com/users/lsinger/orgs","repos_url":"https://api.github.com/users/lsinger/repos","events_url":"https://api.github.com/users/lsinger/events{/privacy}","received_events_url":"https://api.github.com/users/lsinger/received_events","type":"User","site_admin":false},"labels":[{"id":349179867,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/GuidedTours","name":"GuidedTours","color":"006b75","default":false},{"id":285010008,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Pri]%20Normal","name":"[Pri] Normal","color":"fad8c7","default":false},{"id":285009976,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Enhancement","name":"[Type] Enhancement","color":"c7def8","default":false},{"id":295553783,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Good%20First%20Change","name":"[Type] Good First Change","color":"5319e7","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/139","html_url":"https://github.com/Automattic/wp-calypso/milestones/GuidedTours%20M4:%20Pre-production","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/139/labels","id":2097262,"number":139,"title":"GuidedTours M4: Pre-production","description":null,"creator":{"login":"mcsf","id":150562,"avatar_url":"https://avatars.githubusercontent.com/u/150562?v=3","gravatar_id":"","url":"https://api.github.com/users/mcsf","html_url":"https://github.com/mcsf","followers_url":"https://api.github.com/users/mcsf/followers","following_url":"https://api.github.com/users/mcsf/following{/other_user}","gists_url":"https://api.github.com/users/mcsf/gists{/gist_id}","starred_url":"https://api.github.com/users/mcsf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mcsf/subscriptions","organizations_url":"https://api.github.com/users/mcsf/orgs","repos_url":"https://api.github.com/users/mcsf/repos","events_url":"https://api.github.com/users/mcsf/events{/privacy}","received_events_url":"https://api.github.com/users/mcsf/received_events","type":"User","site_admin":false},"open_issues":3,"closed_issues":10,"state":"open","created_at":"2016-10-27T12:13:49Z","updated_at":"2016-11-18T00:50:13Z","due_on":null,"closed_at":null},"comments":0,"created_at":"2016-10-27T10:48:19Z","updated_at":"2016-11-18T00:50:13Z","closed_at":"2016-11-18T00:50:13Z","body":"Currently when you write a tour for GuidedTours, you will need to use GT's CSS classes explicitly to make your tour look the way we want all tours to look. \n\nAs an example, the text in a tour step would be a paragraph like this:\n\n``` JSX\n<p className=\"guided-tours__step-text\">\n...\n</p>\n```\n\nThe bottom row in a tour step that gives people the option to either proceed or quit the tour looks like this in code:\n\n``` JSX\n<div className=\"guided-tours__choice-button-row\">\n    <Next step=\"my-sites\">{ translate( \"Let's go!\" ) }</Next>\n    <Quit>{ translate( 'No thanks.' ) }</Quit>\n</div>\n```\n\nHowever, we'd prefer that tour authors not have to worry about using the correct CSS classes. \n\nThere are a few implementation options one could make here: we could rely solely on React components that all bring their own CSS classes and hide them from the tour author. We can move a few existing `className` declaration on React components inside those component. We could use clever CSS selectors and restrict the usage of standard HTML elements within a tour to certain functions (e.g. a `<p>` in a tour step could be made to always mean the step text, so any `<p>` within a step would be formatted the way we currently format `p.guided-tours__step-text`). \n\nAnd we're certainly open to other ideas. \n\n/cc @mcsf @marekhrabe \n"}}
{"actor":{"display_login":"mcsf"}}