[OSS::Stats::Banner] Add a new title nameblock & handle overflow on value - #703
Conversation
| <div | ||
| class="oss-stats-banner" | ||
| data-control-name="oss-stats-banner" | ||
| {{did-insert (fn this.ensureBlockPresence (has-block "title"))}} |
| {{else}} | ||
| <div class="oss-stats-banner__title-row" data-control-name="stats-banner-title-row"> | ||
| <span | ||
| class="oss-stats-banner__title text-ellipsis font-color-gray-600 font-weight-semibold" | ||
| {{enable-tooltip title=@titleConfig.text placement="top" displayOnlyOnOverflow=true}} | ||
| > | ||
| {{@titleConfig.text}} | ||
| </span> | ||
| {{#if (has-block "title")}} | ||
| {{yield to="title"}} | ||
| {{else}} | ||
| <div class="oss-stats-banner__title-row" data-control-name="stats-banner-title-row"> | ||
| <span | ||
| class="oss-stats-banner__title text-ellipsis font-color-gray-600 font-weight-semibold" | ||
| {{enable-tooltip title=@titleConfig.text placement="top" displayOnlyOnOverflow=true}} | ||
| > | ||
| {{@titleConfig.text}} | ||
| </span> | ||
|
|
||
| <div class="oss-stats-banner__title-actions" data-control-name="stats-banner-title-actions"> | ||
| {{#if @titleConfig.infoCircle}} | ||
| <span | ||
| data-control-name="stats-banner-title-info-circle" | ||
| {{enable-tooltip title=@titleConfig.infoCircle placement="top"}} | ||
| > | ||
| <OSS::Icon @icon="fa-info-circle" class="font-color-gray-400" /> | ||
| </span> | ||
| {{/if}} | ||
| <div class="oss-stats-banner__title-actions" data-control-name="stats-banner-title-actions"> | ||
| {{#if @titleConfig.infoCircle}} | ||
| <span | ||
| data-control-name="stats-banner-title-info-circle" | ||
| {{enable-tooltip title=@titleConfig.infoCircle placement="top"}} | ||
| > | ||
| <OSS::Icon @icon="fa-info-circle" class="font-color-gray-400" /> | ||
| </span> | ||
| {{/if}} | ||
|
|
||
| {{#if (has-block "title-suffix")}} | ||
| {{yield to="title-suffix"}} | ||
| {{/if}} | ||
| {{#if (has-block "title-suffix")}} | ||
| {{yield to="title-suffix"}} | ||
| {{/if}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {{/if}} |
There was a problem hiding this comment.
question: I'm not entire sure I follow the logic here. Above we want to ensure the presence of the title block and here render it OR a default component. This seems odd to me. I think I'm missing something. Could you explain, please?
There was a problem hiding this comment.
The goal is to allow user the ability to override the whole stats-banner-title-row if a <:title> nameblock is passed.
The use case I've with this is to be able to make the whole title section clickable for example which was not possible with the previous implementation
Enregistrement.de.l.ecran.2026-09-14.a.11.10.42.mov
| import { assert } from '@ember/debug'; | ||
| import { action } from '@ember/object'; | ||
| import Component from '@glimmer/component'; | ||
|
|
||
| import type IntlService from 'ember-intl/services/intl'; | ||
| import type { OSSTagArgs } from '@upfluence/oss-components/components/o-s-s/tag'; | ||
|
|
||
| import type { OSSBadgeArgs } from '@upfluence/oss-components/components/o-s-s/badge'; | ||
| import type { OSSIconArgs } from '@upfluence/oss-components/components/o-s-s/icon'; | ||
| import type { OSSTagArgs } from '@upfluence/oss-components/components/o-s-s/tag'; | ||
|
|
There was a problem hiding this comment.
question: Hasn't prettier already been run on this repo? Why the new lines?
There was a problem hiding this comment.
Looks like prettier has not been run yet on oss, .prettierrc.js and .prettierignore file still exists
| } | ||
|
|
||
| &__stat-value { | ||
| width: 100%; |
There was a problem hiding this comment.
question: width or max-width?
There was a problem hiding this comment.
This one is applied on @container (width <= 200px)
In this case the flex direction switch from row to column so width and max-width would have the same behavior and this won't impact the wrap/overflow
upfluence-bot
added
reviewed/ready-to-merge
reviewed/needs-work
and removed
reviewed/needs-work
reviewed/ready-to-merge
labels
6 participants
What does this PR do?
Related to: #
What are the observable changes?
Enregistrement.de.l.ecran.2026-09-11.a.15.22.37.mov
Good PR checklist