Dialog: Converting to mergeStyles part 2 - style conversion

[jordandrako]

Pull request checklist

• Include a change request file using $ npm run change

Description of changes

• Finish converting Dialog and it's sub components to mergeStyles
• Add isMultiline prop to DialogContent (accessed by setting dialogContentProps={{ isMultiline: true }})

Focus areas to test

I couldn't find a good way to convert some of the styles that were nested under the class .isMultiline, which seems to be from other components like DetailsList, but not sure if this class was applied in the first place with the way it was written.

//= Modifier: Multiline button dialog
//
.isMultiline {
  .title {
    font-size: $ms-font-size-xxl;
  }

  .inner {
    padding: 0 20px 20px;
  }
}

[oengusmacinog-zz]

Few notes. I feel like the bigger the style conversion the harder it will be to catch bits of logic that fell through the cracks when translated from the base.ts file to the styles.ts file - but screener should catch the big stuff there

[oengusmacinog-zz]

type === DialogType.largeHeader && 'ms-Dialog-lgHeader' is a shorter way to do these ones that are just class no style

[jordandrako]

Ah, yeah, I wrote them like that before I copied styles over thinking they'd have styles, thanks.

[oengusmacinog-zz]

These can be removed

[oengusmacinog-zz]

I think it might be better to make these a style prop you can pass the default in from base

[jordandrako]

Agreed.

[oengusmacinog-zz]

dialogLgHeaderBackgroundColor is redundant as its only used once. just use palette.themePrimary where it's used in the styles and nix the extra variable.

[oengusmacinog-zz]

I see that this wasn't here before, but I say leave the class 'ms-DialogContent' in. Its an easy semantic way to find the root of this sub/sibling component in the final HTML and that could be useful - at least with any root items that have className passed to them.

[oengusmacinog-zz]

I think if it is a Component class root, it should have a className style prop. With normal usage, you wont really pass anything to it, but DialogFooter is in the index.ts so a dev can grab use it in a custom way and if they do they should be able to pass use the className prop.

[oengusmacinog-zz]

I think we're good!

[jordandrako]

@dzearing This uses a static defaultProps, is the theme decorator going to cause problems?