Skip to content
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.

Add modal component #1305

Merged
merged 3 commits into from Sep 23, 2020
Merged

Conversation

GuessWhoSamFoo
Copy link
Contributor

What this PR does / why we need it:
This PR adds a modal component. It is intended to handle three cases:

  1. Display some content in a modal
  2. Display a form
  3. Display content and a form

If the modal does not contain a form, the only button available is Close (the modal is always closable in all cases). If a form is added to the modal component, the buttons are Submit and Cancel where submit validates the form before sending a message with action.

A modal can be opened via a button or programatically though modifying the modal config as open.

Example with a stepper in a modal to be opened via table with buttonGroup:
image

Code sample:

fft := component.NewFormFieldText("textFormLabel", "textFormName", "")
fft.AddValidator("placeholder", "this is an error", []string{"required"})

form := component.Form{
    Fields: []component.FormField{
        fft,
    },
}

stepper := component.NewStepper("stepper", "test")
stepper.AddStep("Step1", form, "title1", "description1")
stepper.AddStep("Step2", form, "title2", "description2")

modal := component.NewModal(component.TitleFromString("Modal example"))
modal.SetBody(stepper)
modal.SetSize(component.ModalSizeLarge)

button := component.NewButton("Click me", action.Payload{}, component.WithModal(modal))


table := component.NewTable("test", "test", []component.TableCol{})
table.Config.ButtonGroup = component.NewButtonGroup()
table.Config.ButtonGroup.AddButton(button)

@mklanjsek
Copy link
Contributor

This is very cool! My only comment is that it would be good to add more storybook stories to illustrate modal opening and closing as well as interactivity inside the modal.

@GuessWhoSamFoo
Copy link
Contributor Author

Rebased to be using angular 10 and added a form example/

GuessWhoSamFoo added 2 commits September 10, 2020 15:02
Signed-off-by: GuessWhoSamFoo <foos@vmware.com>
Signed-off-by: GuessWhoSamFoo <foos@vmware.com>
Signed-off-by: GuessWhoSamFoo <foos@vmware.com>
Copy link
Contributor

@wwitzel3 wwitzel3 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is fine for now. I'm still a little not sure about the magical button behavior, but I think we can iterate on that and it isn't a blocker for this PR.

@wwitzel3 wwitzel3 merged commit 5a38dc3 into vmware-archive:master Sep 23, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants