Best way to style tabs and modal without overriding css?

[mjkertz]

Hi, I'm trying to use the Modal along with the vertical borderless tabs to create a user settings modal for Design Review.
I've created a sandbox here of how I have things currently set up.
https://codesandbox.io/s/little-river-yni79?file=/src/App.js

The trouble I'm running into is that the tabs are not responsive to the width of their container. When the window or modal gets too small, the text cuts off completely. I'm also not able to size the modal the way I want - in this case, 70% view height, 37.5% view width, 24 or 32 px padding. I can fix the styling the way I want by overriding these classes, but we are wanting to avoid doing that if possible.

Is there a best way to style tabs and modals the way you want without overriding the css? Or is it just a given that for these components to be completely customizable you'll have to do some overriding?

[mayank99]

The trouble I'm running into is that the tabs are not responsive to the width of their container. When the window or modal gets too small, the text cuts off completely.

I could not really reproduce this. With correct usage, the tab labels look fine on a narrow screen (without any custom styling).

But also, if your labels are long, I don't think VerticalTabs is even the right component choice for narrow screens. Maybe you could switch to HorizontalTabs and add horizontal scrolling (although that's tricky to do because of the visible scrollbar). Or maybe you could use VerticalTabs with shorter labels or only icons with tooltips.

I'm also not able to size the modal the way I want - in this case, 70% view height, 37.5% view width, 24 or 32 px padding. I can fix the styling the way I want by overriding these classes, but we are wanting to avoid doing that if possible.

You should not really have to modify the padding on Modal. And most of the sizing needs can be handled just by styling your content. Is there a reason you want to use those specific values?

Is there a best way to style tabs and modals the way you want without overriding the css? Or is it just a given that for these components to be completely customizable you'll have to do some overriding?

The expected way to add custom styles to most of our components is by using className props. For VerticalTabs/HorizontalTabs, we have tabsClassName and contentClassName. See example here: https://codesandbox.io/s/gallant-danny-l4pdb?file=/src/App.js

There is a bug in Modal where className is applied to the parent element, so if you really need to style it, you need to target .iui-modal-dialog for now (combined with the custom className, i.e. custom-modal > .iui-modal-dialog). We can't currently change this behavior without breaking user apps, but expect this to be fixed in v2.

Hope that helps.

[mjkertz]

I could not really reproduce this. With correct usage, the tab labels look fine on a narrow screen (without any custom styling).

Interesting, both the sandbox I created and the actual settings modal I'm working on in our repo have the same issue where the text cuts off.

maybe you could use VerticalTabs with shorter labels or only icons with tooltips.

Gotcha, we could probably omit the "preferences" and just keep the "general" or "comments" to make it shorter. That will most likely solve the overflow issue as well.

You should not really have to modify the padding on Modal. And most of the sizing needs can be handled just by styling your content.

Makes sense, thank you. I'll fix that as well.

Is there a reason you want to use those specific values?

Yes, those were sent to us by the UX team. We wanted to override the standard 50% vh property on modals since this is a settings modal and potentially more settings will be added in the future. We also wanted the modal to fit the default number of settings without scrolling so we decided on 70%. 37.5% vw was also sent as specification from the UX team.

There is a bug in Modal where className is applied to the parent element, so if you really need to style it, you need to target .iui-modal-dialog for now (combined with the custom className, i.e. custom-modal > .iui-modal-dialog). We can't currently change this behavior without breaking user apps, but expect this to be fixed in v2.

This is super helpful, thanks! I just wanted to verify that it was necessary before we commit to overriding the styling to have our specific width/height.

[FlyersPh9]

@morganadrales who from the UX team are you working with? I'd like to talk with them about the width/height values, maybe offer up some other options.

[mjkertz]

Sure, we were working with Vikram More and were sent this specification. I understand that he's relatively new to the UX team. https://4ppop3.axshare.com/#id=64ut9e&p=specification_user_settings&g=1

I can forward you the email thread as well