Contextual help button (the question-icon)

[conandx]

Design decision 2020-03-18

What is this A button that will present an explanation to a problem/question, with a tool tip or a slide-out modal.

Details https://designlibrary.sebgroup.com/components/contextual-help-button/#specification

Reason There are a few versions of this (different designs, "the info-i", etc) but it is now agreed that this is the way it should look and act. Less confusion!

Component identifier component-contextual-help-button

Follow up

• [x] Vanilla https://github.com/sebgroup/vanilla-pattern-library/issues/194
• [x] Bootstrap https://github.com/sebgroup/bootstrap/issues/270
• [x] React https://github.com/sebgroup/react-components/issues/172
• [x] Angular https://github.com/sebgroup/ng-components/issues/124
• [ ] AngularMaterial https://github.com/sebgroup/seb-angular-material/issues/93
• [x] Delorean https://github.sebank.se/delorean/portfolio-overview/issues/188

/Ulrika

[conandx]

• When used next to a form-field, consider using instruction-text instead.
• We sometimes use instruction-texts in list as well to avoid having too many (?)-icons
• Clickin the question-icon displays either a tooltip, or a slide-out with long information.
• size is/may be depending on font-size to where it's located? default 1rem.

[ulde01]

@TheresaHedlund gör denna för desktop och @henrikhoglundseb för hybrid

[ulde01]

https://designlibrary.sebgroup.com/components/contextual-help-button/ has been updated with images and description.