feat(dialog): implement <rh-dialog>

[bennypowers]

What I did

1. import and extend PfeModal
2. Add variant=video attribute
3. Add open boolean attr
4. Position and style close button per https://ux.redhat.com/components/modal/

Testing Instructions

1. deploy preview is available at https://deploy-preview-288--red-hat-design-system.netlify.app/components/dialog/
2. there are no regression tests or unit tests - yet

Notes to Reviewers

1. max-width of the dialog is set to min(90%, 1140px). the 1140px part is taken from the XD, the 90% part, I made up 🙈

2. specs on ux-dot say the dialog should have an overlay that is

   black solid with opacity

   Checking the provided graphic for video, the final rendered colour for the overlay was #898989 for a video dialog on a white background. Setting the video dialog overlay background colour to this got me to #8f8f8f, which was as close as I came

   :host([variant=video][open]) [part=overlay] {
     background-color: rgba(0, 0, 0, .45);
   }

3. is variant the right attr?

4. What's the correct hover-state colour for the video dialog close button?

Closes #283

[changeset-bot]

🦋 Changeset detected

Latest commit: 50bf342

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rhds/elements	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	50bf342
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/62ab3cb1e1b3070008e79501
😎 Deploy Preview	https://deploy-preview-288--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[bennypowers]

@coreyvickery @marionnegp @ronniemcbride do we have tokens for grid column / gutter widths? The spec defines widths in terms of number of columns, not e.g. container %.

[bennypowers]

@RedHat-UX/designers searching the rh-repo design tokens spreadsheet, I couldn't find #6a6e73 as specified on ux.redhat.com/components/modal, but that colour was specified for the close button for a standard dialog. Should I use --rh-color-text-secondary-on-light, #6c6c6c instead?

[bennypowers]

Ok I bumped this back down to draft for 2 reasons:

1. We need @coreyvickery 's review once he gets back from PTO
2. I did some work in pfe-modal to make it more pf1:1, so I'd like to merge that first.
   I'll link to the PR in PFE shortly

[marionnegp]

@RedHat-UX/designers searching the rh-repo design tokens spreadsheet, I couldn't find #6a6e73 as specified on ux.redhat.com/components/modal, but that colour was specified for the close button for a standard dialog. Should I use --rh-color-text-secondary-on-light, #6c6c6c instead?

Sorry I missed this yesterday! @coreyvickery had adjusted the grays while making the design tokens spreadsheet, so that's likely why it's used in the component but is missing from the tokens. I think that's the closest gray, but it's probably best to check with Corey.

[marionnegp]

@coreyvickery @marionnegp @ronniemcbride do we have tokens for grid column / gutter widths? The spec defines widths in terms of number of columns, not e.g. container %.

I added a comment in the tokens spreadsheet about adding grid column and gutter widths. I'm not sure if the size tokens will work here.

[bennypowers]

Rebased just now

[bennypowers]

Some outstanding API questions:

• Should we have type="video" or would we rather <rh-video-dialog>.
• Should we remove the trigger slot (and if so, in PFE or here?) see feat(modal): PF1:1 patternfly/patternfly-elements#2036 (comment)

[bennypowers]

This needs a rebase after #325

[heyMP]

• Should we have type="video" or would we rather <rh-video-dialog>.

I think the video type makes sense to me. It's close enough to dialog.

• Should we remove the trigger slot (and if so, in PFE or here?) see feat(modal): PF1:1 patternfly/patternfly-elements#2036 (comment)

This is removed in the next release of PFE.

[heyMP]

@bennypowers There is a z-index issue on the first dialog demo on the demo site I believe.

[bennypowers]

Rebased just now. @heyMP I couldn't reproduce your issue, probably it was fixed with the new dependencies? 🤷

[heyMP]

Awesome job @bennypowers. Lots of hard work went into this. LGTM!