Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OuiCallOut - Add props to enable dismissible behavior #880

Closed
Tracked by #881
KrooshalUX opened this issue Jul 12, 2023 · 3 comments
Closed
Tracked by #881

OuiCallOut - Add props to enable dismissible behavior #880

KrooshalUX opened this issue Jul 12, 2023 · 3 comments
Assignees
Labels

Comments

@KrooshalUX
Copy link
Contributor

KrooshalUX commented Jul 12, 2023

Currently OuiCallOut provides builders a way to communicate relevant information to a users experience in relationship to a page or flow, however, in some cases the information does not always need to persist, but utilizing OuiToast is not appropriate (feature announcements, for example).

In order to give vital real-estate back to the end user, it is appropriate to allow builders to configure if a call-out should be static or dismissible by the end user.

  • All existing props should remain in-tact
  • dismissible can be set to TRUE or FALSE except in the case where color is set to danger or warning (danger is used in Form validation and is required by the design system to appear statically
  • Default value of dismissilbe is FALSE, as dismissible is a sub-variant of the base component
  • When dismissible is set to TRUE, OuiIcon type=cross should appear in upper right hand corner of OuiCallOut
  • OnClick of OuiIcon type=cross - OuiCallOut should disappear from the page without causing page refresh
  • After a callout is dismissed, it should not reappear
    - Is this a property of the component or a property of the implementation by builders (and therefore this requirement would be associated with a dashboards issue to implement OuiCallOut ex: Notifying users of how to override Dark Mode by Default)?
    - Since there is no User object, this may be limited to session or device

Designs (primary, hover)

Notes: This dismissible variation of OuiCallOut (or any OuiCallOut) is not intended to display confirmations of user CRUD actions - for that, builders should continue to use OuiToast. This and other guidance will be explicitly updated on within #883.

@KrooshalUX KrooshalUX self-assigned this Jul 12, 2023
@KrooshalUX KrooshalUX changed the title OuiCallOut - Add props to enable dismissable behavior OuiCallOut - Add props to enable dismissable and minimize behavior Jul 12, 2023
@KrooshalUX KrooshalUX changed the title OuiCallOut - Add props to enable dismissable and minimize behavior OuiCallOut - Add props to enable dismissable behavior Jul 12, 2023
@KrooshalUX KrooshalUX reopened this Jul 12, 2023
@KrooshalUX KrooshalUX changed the title OuiCallOut - Add props to enable dismissable behavior OuiCallOut - Add props to enable dismissible behavior Jul 13, 2023
@abbyhu2000
Copy link
Member

For the OnClick function of OuiIcon type=cross, is it beneficial to make the function itself also a prop so user can configure what type of function they want after clicking the cross when using OuiCallout?

I see OuiModal have similar design, where they pass in onClose function as one of its props. @KrooshalUX @ashwin-pc

@ashwin-pc
Copy link
Member

So the showing and hiding of a modal is controlled by the user, so the onClose is important in that flow. For the call out, I think a more opinionated flow where the user can only specify if the model is dismissible, but does not have a say in how to do it. We can always expand this in future by allowing an onClose function to override the default. But I don't think we need to complicate that for now. @KrooshalUX what do you think?

@KrooshalUX
Copy link
Contributor Author

Closed with #985

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants