iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
84 stars 23 forks source link

Text with Icon component #910

Closed gretanausedaite closed 1 year ago

gretanausedaite commented 1 year ago

A mixin like this could be reused in a lot of the places I mentioned in my last comment:

Mixin is still too low level imo (it's an implementation details that gets "compiled" away). We should offer a simple class and component that the user can place anywhere. Nothing fancy, just this should be enough:

.iui-text-with-icon {
  display: flex;
  align-items: center;
  gap: $iui-s;

  &-icon {
    @include iui-icons-default;
    flex-shrink: 0;
  }

  &-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

We already have classes for iui-icons-default available to the user, which we might even want to expose as a component in react. As for sublabel support, that can come in the future as it's not relevant to this issue.

Originally posted by @mayank99 in https://github.com/iTwin/iTwinUI/issues/586#issuecomment-1098008414


i'm not sure about titleIcon because we don't even have title (it's called name).

i'm also not sure if we should add another prop for this. this is another opportunity to create a generic "text with icon" component that i proposed here: iTwin/iTwinUI#586 (comment)

_Originally posted by @mayank99 in https://github.com/iTwin/iTwinUI-react/pull/872#discussion_r1007101684_


Also follow latest conversation on iTwinUI CSS PR#586

mayank99 commented 1 year ago

Closing in favor of https://github.com/iTwin/iTwinUI/issues/586 and https://github.com/iTwin/iTwinUI/issues/829