{"action":"created","issue":{"url":"https://api.github.com/repos/vmware/clarity/issues/486","repository_url":"https://api.github.com/repos/vmware/clarity","labels_url":"https://api.github.com/repos/vmware/clarity/issues/486/labels{/name}","comments_url":"https://api.github.com/repos/vmware/clarity/issues/486/comments","events_url":"https://api.github.com/repos/vmware/clarity/issues/486/events","html_url":"https://github.com/vmware/clarity/issues/486","id":207369243,"node_id":"MDU6SXNzdWUyMDczNjkyNDM=","number":486,"title":"Signpost Help Component (New)","user":{"login":"lil-kim","id":23196444,"node_id":"MDQ6VXNlcjIzMTk2NDQ0","avatar_url":"https://avatars1.githubusercontent.com/u/23196444?v=4","gravatar_id":"","url":"https://api.github.com/users/lil-kim","html_url":"https://github.com/lil-kim","followers_url":"https://api.github.com/users/lil-kim/followers","following_url":"https://api.github.com/users/lil-kim/following{/other_user}","gists_url":"https://api.github.com/users/lil-kim/gists{/gist_id}","starred_url":"https://api.github.com/users/lil-kim/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lil-kim/subscriptions","organizations_url":"https://api.github.com/users/lil-kim/orgs","repos_url":"https://api.github.com/users/lil-kim/repos","events_url":"https://api.github.com/users/lil-kim/events{/privacy}","received_events_url":"https://api.github.com/users/lil-kim/received_events","type":"User","site_admin":false},"labels":[{"id":473349721,"node_id":"MDU6TGFiZWw0NzMzNDk3MjE=","url":"https://api.github.com/repos/vmware/clarity/labels/Dev","name":"Dev","color":"bfdadc","default":false},{"id":481521933,"node_id":"MDU6TGFiZWw0ODE1MjE5MzM=","url":"https://api.github.com/repos/vmware/clarity/labels/New%20Component","name":"New Component","color":"84b6eb","default":false},{"id":521929182,"node_id":"MDU6TGFiZWw1MjE5MjkxODI=","url":"https://api.github.com/repos/vmware/clarity/labels/UX%20Ready","name":"UX Ready","color":"5319e7","default":false}],"state":"closed","locked":false,"assignee":{"login":"hippee-lee","id":433692,"node_id":"MDQ6VXNlcjQzMzY5Mg==","avatar_url":"https://avatars1.githubusercontent.com/u/433692?v=4","gravatar_id":"","url":"https://api.github.com/users/hippee-lee","html_url":"https://github.com/hippee-lee","followers_url":"https://api.github.com/users/hippee-lee/followers","following_url":"https://api.github.com/users/hippee-lee/following{/other_user}","gists_url":"https://api.github.com/users/hippee-lee/gists{/gist_id}","starred_url":"https://api.github.com/users/hippee-lee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hippee-lee/subscriptions","organizations_url":"https://api.github.com/users/hippee-lee/orgs","repos_url":"https://api.github.com/users/hippee-lee/repos","events_url":"https://api.github.com/users/hippee-lee/events{/privacy}","received_events_url":"https://api.github.com/users/hippee-lee/received_events","type":"User","site_admin":false},"assignees":[{"login":"hippee-lee","id":433692,"node_id":"MDQ6VXNlcjQzMzY5Mg==","avatar_url":"https://avatars1.githubusercontent.com/u/433692?v=4","gravatar_id":"","url":"https://api.github.com/users/hippee-lee","html_url":"https://github.com/hippee-lee","followers_url":"https://api.github.com/users/hippee-lee/followers","following_url":"https://api.github.com/users/hippee-lee/following{/other_user}","gists_url":"https://api.github.com/users/hippee-lee/gists{/gist_id}","starred_url":"https://api.github.com/users/hippee-lee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hippee-lee/subscriptions","organizations_url":"https://api.github.com/users/hippee-lee/orgs","repos_url":"https://api.github.com/users/hippee-lee/repos","events_url":"https://api.github.com/users/hippee-lee/events{/privacy}","received_events_url":"https://api.github.com/users/hippee-lee/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/vmware/clarity/milestones/39","html_url":"https://github.com/vmware/clarity/milestone/39","labels_url":"https://api.github.com/repos/vmware/clarity/milestones/39/labels","id":2572590,"node_id":"MDk6TWlsZXN0b25lMjU3MjU5MA==","number":39,"title":"0.9.9","description":"","creator":{"login":"hippee-lee","id":433692,"node_id":"MDQ6VXNlcjQzMzY5Mg==","avatar_url":"https://avatars1.githubusercontent.com/u/433692?v=4","gravatar_id":"","url":"https://api.github.com/users/hippee-lee","html_url":"https://github.com/hippee-lee","followers_url":"https://api.github.com/users/hippee-lee/followers","following_url":"https://api.github.com/users/hippee-lee/following{/other_user}","gists_url":"https://api.github.com/users/hippee-lee/gists{/gist_id}","starred_url":"https://api.github.com/users/hippee-lee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hippee-lee/subscriptions","organizations_url":"https://api.github.com/users/hippee-lee/orgs","repos_url":"https://api.github.com/users/hippee-lee/repos","events_url":"https://api.github.com/users/hippee-lee/events{/privacy}","received_events_url":"https://api.github.com/users/hippee-lee/received_events","type":"User","site_admin":false},"open_issues":0,"closed_issues":18,"state":"closed","created_at":"2017-06-08T20:39:21Z","updated_at":"2017-06-16T15:36:49Z","due_on":"2017-06-15T07:00:00Z","closed_at":"2017-06-16T15:36:49Z"},"comments":11,"created_at":"2017-02-13T23:18:26Z","updated_at":"2018-08-29T15:55:26Z","closed_at":"2017-06-09T20:19:34Z","author_association":"NONE","body":"**Select one ...**  (check one with \"x\")\r\n```\r\n[ ] bug\r\n[X] feature request\r\n[ ] enhancement\r\n```\r\n\r\n### Description\r\nSignposts provide contextual info/help in a popover that can be initiated or dismissed by the user\r\n\r\n### Features\r\n- User initiated viewing or hiding of the popover\r\n- Headings, images, text/image links (optional)\r\n- A vertical scroll bar (default browser) may be used if the content exceeds the max height (504 px)\r\n- A trigger element: When clicked, the “i” icon triggers the popover into view\r\n- Anchor arrows may be positioned on any corner or centered on any side of the popover. See diagram for placement. (May be subject to change in implementation)\r\n- Max width is 360 px, obviating the need for responsiveness on smaller screens\r\n\r\n### Usage\r\n- Use to show contextual help or information \r\n- May be used when a tool tip is too small for the amount of content\r\n- When the information presented needs to stay in view at length. Unlike tooltips, the user is able to mouse away without losing the view.\r\n\r\n### Interaction\r\n- By default, popovers should appear on the right side of the trigger element. Alternate positions may be used if the default is not possible.\r\n- The popover may be dismissed by either clicking outside of it or by clicking the “X” icon.\r\n- To keep the interface clean, show one popover at a time.  \r\n- When a popover is visible, clicking an icon to open another will automatically dismiss the first one.\r\n\r\n### Recommendations\r\n- The popover should not be so large that it dominates the screen\r\n- Make sure that the popover doesn’t obstruct other important information on the screen.\r\n- With the exception of text links, don’t insert any actionable components such as buttons in the popover. \r\n\r\n### Basic Signpost Design\r\n![basic ex1](https://cloud.githubusercontent.com/assets/23196444/23673793/6de2eda8-0328-11e7-99b6-b5fa48f53e90.png)\r\n\r\n![states](https://cloud.githubusercontent.com/assets/23196444/23673848/a357f898-0328-11e7-8bab-17ee587bdde3.png)\r\n\r\n### Signpost help with header / text link / image\r\n![w_header_image](https://cloud.githubusercontent.com/assets/23196444/23673940/f82f9934-0328-11e7-8de2-6a9fdc2bc2c3.png)\r\n\r\n### Min/Max Width and Height (including anchor point)\r\nMin-width  216 px;  Min-height  84 px\r\nMax-width  360 px;  Max-height  504 px\r\n![sph-scroll](https://cloud.githubusercontent.com/assets/23196444/23673990/30931652-0329-11e7-930a-0684a43b7e33.png)\r\n\r\n### Basic Spec\r\n- On hover/click, the grey “i” icon (trigger element) becomes blue #007CBB. It remains blue until the popover is dismissed.\r\n- When the “i” icon is clicked, the popover becomes visible.\r\n![spec 1](https://cloud.githubusercontent.com/assets/23196444/23674070/729706a8-0329-11e7-882e-910500594bd4.png)\r\n\r\n### Heading and Image Spec\r\nH4 (Metropolis Light)\r\n![heading spec](https://cloud.githubusercontent.com/assets/23196444/22907176/bb430598-f1fc-11e6-8aaf-23d7d6c5260c.png)\r\n\r\n![w_image](https://cloud.githubusercontent.com/assets/23196444/23674149/c1d4fb8a-0329-11e7-89f1-ac20b03ad53b.png)\r\n\r\n### Icon Positioning\r\nAlign the icon 6 px to the right of the item. If a table or stack view has multiple signposts, the icon may be placed in a separate column or aligned to the right side of the grid.\r\n![icon alignment](https://cloud.githubusercontent.com/assets/23196444/23674248/1a1ec6c2-032a-11e7-8936-ac3d0814af58.png)\r\n\r\n### Anchor Point Positioning\r\n\r\n![anchor point positioning](https://cloud.githubusercontent.com/assets/23196444/23674430/bfd10a6c-032a-11e7-92e0-0651f300be10.png)\r\n\r\n1. Anchor placed along center line of popover\r\n2, 3. Anchor placed on corner of popover\r\n\r\n### Popover positioning\r\n![popover - icon position](https://cloud.githubusercontent.com/assets/23196444/23674541/13ac9c32-032b-11e7-8672-de4d798f4091.png)\r\n\r\n\r\n\r\n\r\n* **Clarity version:** \r\n\r\n* **OS and version:** \r\n\r\n* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]\r\n"},"comment":{"url":"https://api.github.com/repos/vmware/clarity/issues/comments/417005142","html_url":"https://github.com/vmware/clarity/issues/486#issuecomment-417005142","issue_url":"https://api.github.com/repos/vmware/clarity/issues/486","id":417005142,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzAwNTE0Mg==","user":{"login":"hippee-lee","id":433692,"node_id":"MDQ6VXNlcjQzMzY5Mg==","avatar_url":"https://avatars1.githubusercontent.com/u/433692?v=4","gravatar_id":"","url":"https://api.github.com/users/hippee-lee","html_url":"https://github.com/hippee-lee","followers_url":"https://api.github.com/users/hippee-lee/followers","following_url":"https://api.github.com/users/hippee-lee/following{/other_user}","gists_url":"https://api.github.com/users/hippee-lee/gists{/gist_id}","starred_url":"https://api.github.com/users/hippee-lee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hippee-lee/subscriptions","organizations_url":"https://api.github.com/users/hippee-lee/orgs","repos_url":"https://api.github.com/users/hippee-lee/repos","events_url":"https://api.github.com/users/hippee-lee/events{/privacy}","received_events_url":"https://api.github.com/users/hippee-lee/received_events","type":"User","site_admin":false},"created_at":"2018-08-29T15:55:26Z","updated_at":"2018-08-29T15:55:26Z","author_association":"CONTRIBUTOR","body":"You have several options here. I mad a stackblitz that handles this in three ways: https://stackblitz.com/edit/clarity-light-theme-v012-signpost-max-height\r\n\r\nIn the future, please post these types of questions on StackOverflow with a stackblitz for what you have tried and then tag it with the `vmware-clarity` label. Generally, additional comments on closed issues might not get noticed. "}}
{"actor":{"display_login":"hippee-lee"}}