search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
104 stars 38 forks source link

Adding `[x]Props` to every component #1368

Open gretanausedaite opened 1 year ago

gretanausedaite commented 1 year ago

The goal is to allow adding a custom className (or data attribute) to every single dom node. For example: it should be possible to add a custom class to Button text, Checkbox wrapper, etc.

To do:

Example usage from a consumer-perspective:

<Checkbox
  label='My checkbox'
  className='my-checkbox-input'
  wrapperProps={{ className: 'my-checkbox-wrapper' }}
  labelProps={{ className: 'my-checkbox-text' }}
/>

Status

High Priority:

Mid Priority:

Low Priority:

Juliakas commented 8 months ago

Since migrating to iTwinUI 3.x we replaced all our usages of .iui- class styling in favor of passing classNames into these additional props you provided. So far everything is great, we only noticed that we are missing those:

  1. Providing extra props to Tag component - namely tag text and close button as right now we are using span and button css selectors to style them - not sure if its a good solution now.
  2. Providing extra props to Modal component - we can utilize ModalContent and ModalButtonBar and style them properly - but we still can't style title bar, X close button, modal backdrop and modal wrapper. Modal wrapper especially since sometimes other packages have a higher z-index than Modal component and we have to fight over who gets display priority. Right now we workaround this by having our own modal portal in the root of our application that we can style and use this portal for every single Modal component. So ability to provide more props to Modal would be great - or at least we could have a composable Modal structure like 
    
<Modal.Wrapper>
<Modal.Backdrop/>
<Modal.Box>
...
</Modal.Box>

</Modal.Wrapper>

mayank99 commented 8 months ago

@Juliakas

  1. Providing extra props to Tag component - namely tag text and close button as right now we are using span and button css selectors to style them - not sure if its a good solution now.

Could you share your use case for customizing Tag? We can add textProps and closeButtonProps, but it should also be fine to do this:

<Tag className='my-tag' />
.my-tag > span {}
.my-tag > button {}
  1. Providing extra props to Modal component - we can utilize ModalContent and ModalButtonBar and style them properly - but we still can't style title bar, X close button, modal backdrop and modal wrapper. Modal wrapper especially since sometimes other packages have a higher z-index than Modal component and we have to fight over who gets display priority. Right now we workaround this by having our own modal portal in the root of our application that we can style and use this portal for every single Modal component. So ability to provide more props to Modal would be great - or at least we could have a composable Modal structure like

We could add extra props to Modal, but I'm not sure if we would expose subcomponents. Modal is just a wrapper around Dialog, so you can use Dialog directly with the same set of props Modal uses. Take a look at Modal.tsx, it's quite simple.

we workaround this by having our own modal portal in the root of our application that we can style and use this portal for every single Modal component.

I just want to mention that this is not a workaround. Adding a z-index is the workaround. Portaling is the proper way to avoid z-index issues.

To avoid repetition you can create a wrapper component, or use the portalContainer prop in iTwinUI's ThemeProvider to affect all floating elements.

Juliakas commented 8 months ago

@mayank99

Could you share your use case for customizing Tag? We can add textProps and closeButtonProps, but it should also be fine to do this:

We are currently doing this, if that is a valid usage then we should be good (provided internal html structure wont change to impact those selectors). Our use case is removing user-select and changing other text css properties as we made our tags clickable (we don't want text selection if we click on tag). Also we changed colors for close button and text as we made tags have accent style (when selected).

We could add extra props to Modal, but I'm not sure if we would expose subcomponents Modal is just a wrapper around Dialog

Looked into Modal source so it seems Dialog is all we need then. I thought these 2 components were a separate thing lol. Just have to test to make sure, but I guess we have everything we need 👍

AdamMeza-Bentley commented 7 months ago

Thanks for bringing this to our attention. I noticed this issue is a few months old and has some resolved comments on it. I'll go through the customizable elements to double check if this issue has been taken care of.