css class name and hierarchy changed for IconButtons

[muthubentley]

User was using @itwin/itwinui-react: 1.30.0 previously and updated to @itwin/itwinui-react: 2.7.0 recently. They have designed their buttons based on the class names in the old version and now when they update to newer version they see the classnames and hierarchies changed, due to which apperance of their buttons have changed.

For ex, Below is the change in IconButton
itwinui-react: 1.30.0

<button class="iui-button iui-default iui-large toolButton-atr" type="button" actionitem="[object Object]" toolids="locale:measureTools.distance,locale:measureTools.area,locale:measureTools.location">
<div class="iui-button-icon content-div" aria-hidden="true"><i class="icon icon-measure"></i>
<label class="iui-input-label bottom-atr">Input</label></div>
</button>

css was like this:

.iui-button {
    &.iui-default {
        &.toolButton-atr {
            .content-div {
                   ......................

itwinui-react: 2.7.0

<button class="iui-button toolButton-atr" data-iui-size="large" data-iui-active="false" type="button" actionitem="[object Object]" toolids="locale:measureTools.distance,locale:measureTools.area,locale:measureTools.location">
<span class="iui-button-icon" aria-hidden="true">
<div class="content-div"><i class="icon icon-measure"></i><label class="iui-input-label bottom-atr">Input</label></div>
</span>
</button>

IconButton is just an example, they have same issues in other UI controls as well.
Is their anyway to find what are the class names(and hierarchies) changed in the the past versions, so that user can modify their css to match their original UI.

[mayank99]

we have documented all dom structure changes here: https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v1-migration-guide

But in general, the user should not rely on our internal classes. Instead you should only target custom classes so that you are shielded from any breaking changes we make to our classes. In the next major version, we are planning to rename every single class and make it an implementation detail.

as a side note, your markup looks invalid. There should be no <label> element inside a <button>.

[muthubentley]

Thanks @mayank99 I will let user know about this. will comeback if they have any questions.