OSS::Stats::Banner by OwenCoogan · Pull Request #700 · upfluence/oss-components

OwenCoogan · 2026-08-19T15:19:16Z

What does this PR do?

Introduces a new OSS::Stats::Banner component for flexible KPI/header composition.

Adds structured config args for a few elements ( badge & icon )
Uses dropdown, extra-badges, and cta as named blocks to preserve flexibility in those sections.
Implements title ellipsis with a top-position tooltip shown only on overflow.
Renders the info icon when titleInfoCircle is provided.
Hides extra-badges and cta block content in loading mode for consistent loading UI.
Updates to Storybook and tests

Related to: #

What are the observable changes?

Good PR checklist

Title makes sense
Is against the correct branch
Only addresses one issue
Properly assigned
Added/updated tests
Added/updated documentation with Figma design link. Don't forget to replace "design" by "file" in the URL. For example https://www.figma.com/file/example
Properly labeled

linear-code · 2026-08-19T15:19:19Z

DRA-5594

Miexil

Don't have mutch to say here except in the tests, good work

Miexil · 2026-08-20T07:20:32Z

+              {{#if @titleInfoCircle}}
+                <span {{enable-tooltip title=@titleInfoCircle placement="top"}}>
+                  <OSS::Icon @icon="fa-info-circle" class="font-color-gray-400" />
+                </span>
+              {{/if}}


I'm wondering if this one shouldn't be a named-block instead.

IMO it really depends on how often it is used. If we have it in at least 50% of the use-cases, might as well leave it this way; it'll be lighter on the parent caller

@phndiaye wdyt ?

Yeah I was actually debating with myself yesterday if the info-circle & dropdown should both be wrapped in a title extra actions block.
For now in the redesign, we have 13 banners to update & only 2 contain info-circles 👀

Personally, i would rather make a slightly more complex/future-proof title arg:

type StatTitle = { label: ReturnType<typeof IntlService['t']> | string; tooltip?: ReturnType<typeof IntlService['t']> | string; }

This way we don't necessarily need a named-block but we still group this as belonging to the title

Miexil · 2026-08-20T07:22:36Z

+            <span
+              class="oss-stats-banner__title text-ellipsis font-color-gray-600 font-weight-semibold"
+              {{enable-tooltip title=@title placement="top" displayOnlyOnOverflow=true}}
+            >{{@title}}</span>


tiniest nit, can we have the {{@title}} on its own line ?

<span class="..." {{enable-tooltip ...}} > {{@title}} </span>

Miexil · 2026-08-20T07:25:18Z

+  }
+}
+
+@container (width <= 900px) {


... But you're missing container-type: inline-size in the parent in order to enable this ;)

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries

Miexil · 2026-08-20T07:35:04Z

+    assert.dom('.oss-stats-banner .fa-star').hasAttribute('style', 'color:red');
+  });
+
+  test('when @titleInfoCircle is defined, it renders an info-circle icon next to the title', async function (assert) {


needs a counter test, ie, when not defined, not showing up

Miexil · 2026-08-20T07:35:19Z

+    assert.dom('.oss-stats-banner .fa-info-circle').exists();
+  });
+
+  test('when the dropdown block is defined, it renders its content in the title row', async function (assert) {


same here, missing counter test

added tests

Miexil · 2026-08-20T07:35:28Z

+    assert.dom('.oss-stats-banner .test-dropdown').exists();
+  });
+
+  test('when @loading is false and title/stat values are defined, it renders text instead of skeletons', async function (assert) {


move to loading module

Miexil · 2026-08-20T07:35:44Z

+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+
+module('Integration | Component | o-s-s/stats/banner', function (hooks) {


global comment here, let's move related topics into sub-module, for example:

Module 'Loading state handling'

when @loading is true and no related args or blocks are defined, it renders title/stat skeletons

when @loading is true, it renders title/stat skeletons and hides named block content

when @loading is false and title/stat values are defined, it renders text instead of skeletons

module for extraIconConfig

etc

phndiaye

Global: kinda late on the wording but what about OSS::Stats::Card rather than Banner ? 🤔 (unless it maps to the Figma wordings of course :()

phndiaye · 2026-08-20T09:43:25Z

+        {{#if @loading}}
+          <OSS::Skeleton @height={{12}} @width={{150}} class="oss-stats-banner__skeleton--title" />
+        {{else}}
+          <div class="oss-stats-banner__title-row fx-row fx-gap-px-8 fx-xalign-center">


there is no gap-8 (spotted multiple btw) ^^

also, as there is already a class for it, might as well move the utility classes in there imo (applies to multiple cases below)

phndiaye · 2026-08-20T09:44:23Z

Globally, i would add some data-control-name on the key blocks

phndiaye · 2026-08-20T09:46:59Z

+              {{#if @titleInfoCircle}}
+                <span {{enable-tooltip title=@titleInfoCircle placement="top"}}>
+                  <OSS::Icon @icon="fa-info-circle" class="font-color-gray-400" />
+                </span>
+              {{/if}}


Personally, i would rather make a slightly more complex/future-proof title arg:

type StatTitle = { label: ReturnType<typeof IntlService['t']> | string; tooltip?: ReturnType<typeof IntlService['t']> | string; }

This way we don't necessarily need a named-block but we still group this as belonging to the title

phndiaye · 2026-08-20T09:53:37Z

+              {{#if (has-block "dropdown")}}
+                {{yield to="dropdown"}}
+              {{/if}}


nit: is dropdown the best name here? technically you cannot enforce at all what the consumer will do w/ it ^^ maybe title-suffix named-block instead ? (if others have ideas 🙏🏾 )

phndiaye · 2026-08-20T09:55:49Z

+    {{#if (and (has-block "extra-badges") (not @loading))}}
+      <div class="oss-stats-banner__extra-badges fx-row fx-gap-px-3 fx-xalign-center">
+        {{yield to="extra-badges"}}
+      </div>
+    {{/if}}


can you link a design for this use case? i'm having trouble visualising what it maps to

https://www.figma.com/design/6I3IoYJkvAOOs7sPH9L8gt/Stats-card-redesign?node-id=19606-1698&t=muqAvXMEkjKivDa1-11

integrations badges, already tried out in the implem pr from my slack message 👌

maybe add it to the storybook also ?

phndiaye · 2026-08-20T09:57:54Z

+    {{#if (and (has-block "cta") (not @loading))}}
+      <div class="oss-stats-banner__cta">
+        {{yield to="cta"}}
+      </div>
+    {{/if}}


wondering... should we keep this a named block or an action: ButtonArgs & { fn: (...args: unknown[]) => unknown (a bit like what we do for OSS::Dialog ? 🤔

On this one we need to leave it open as a named block, component specs specify that there is a possiblity for secondary actions

phndiaye · 2026-08-20T10:00:22Z

+        <span class="font-color-gray-900 font-weight-semibold font-size-h3">{{@statValue}}</span>
+        {{#if @statExtraInfo}}
+          <span class="font-color-gray-500">{{@statExtraInfo}}</span>
+        {{/if}}
+
+        {{#if @extraInfoTagConfig}}
+          <OSS::Tag
+            @label={{@extraInfoTagConfig.label}}
+            @skin={{@extraInfoTagConfig.skin}}
+            @icon={{@extraInfoTagConfig.icon}}
+            @plain={{@extraInfoTagConfig.plain}}
+          />
+        {{/if}}


in the same logic as above, what about:

type StatValue = { label: ReturnType<typeof IntlService['t']>, // or value suffix?: ReturnType<typeof IntlService['t']>, tags?: TagArgs[] // worst case there is always only one but we support multiple (not mandatory though, could be just `tag`) }

phndiaye · 2026-08-20T10:03:04Z

This would fit better in the visual or data route i think :)

moved it to data

edouardmisset · 2026-08-20T09:54:10Z

+  }
+}
+
+@container (width <= 900px) {


edouardmisset · 2026-08-20T10:14:13Z

+  }
+}
+
+@container (width <= 900px) {


... But you're missing container-type: inline-size in the parent in order to enable this ;)

edouardmisset · 2026-08-20T10:14:37Z

+  }
+}
+
+@container (width <= 900px) {


https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries

edouardmisset · 2026-08-20T10:16:15Z

+        {{yield to="cta"}}
+      </div>
+    {{/if}}
+  </div>


question: where is the "normal" / "default" {{ yield }} to pass the leftovers? I might very well be missing something here.

We don't really need it here, not unless we want to pass other components on the fly but that's a whole other implem IMO ^^

OwenCoogan self-assigned this Aug 19, 2026

upfluence-bot added reviewed/needs-review and removed reviewed/needs-review labels Aug 19, 2026

Miexil reviewed Aug 20, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work and removed reviewed/needs-review reviewed/needs-work labels Aug 20, 2026

OwenCoogan force-pushed the oc/DRA-5594 branch from 71f317e to 452c703 Compare August 20, 2026 08:33

upfluence-bot added reviewed/needs-review and removed reviewed/needs-work reviewed/needs-review labels Aug 20, 2026

phndiaye reviewed Aug 20, 2026

View reviewed changes

upfluence-bot added reviewed/needs-work and removed reviewed/needs-review labels Aug 20, 2026

edouardmisset reviewed Aug 20, 2026

View reviewed changes

upfluence-bot removed the reviewed/needs-work label Aug 20, 2026

upfluence-bot added reviewed/needs-review and removed reviewed/needs-review labels Aug 20, 2026

Miexil approved these changes Aug 21, 2026

View reviewed changes

upfluence-bot added reviewed/ready-to-merge reviewed/needs-work and removed reviewed/needs-review reviewed/ready-to-merge labels Aug 21, 2026

OwenCoogan added 15 commits August 21, 2026 14:18

wip: oss stats banner

e94823f

fix: added banner component

cad45ce

fix: added first draft of oss stats banner

e0acf9f

fix: added style fixes

1226fb5

feat: OSS::Stats::Banner

cdd7c86

fix: removed unused content named block

03dedf5

fix: fixed tests

8e0378d

fix: fix loading state to not be bound to title & stat args

b4575c2

fix: fixed skeleton size

bb09ab7

fix: added fixes post review

e243377

fix: fix broken tests

9afaa42

fix: added fixes post review

0713b8d

fix: added fixes post review

1f9540d

fix: type naming change

2d24562

fix: added style fix

d973661

OwenCoogan force-pushed the oc/DRA-5594 branch from b545648 to d973661 Compare August 21, 2026 12:18

upfluence-bot added reviewed/needs-review and removed reviewed/needs-work labels Aug 21, 2026

fix: added design link to story

c760724

upfluence-bot added reviewed/needs-review and removed reviewed/needs-review labels Aug 24, 2026

edouardmisset approved these changes Aug 24, 2026

View reviewed changes

Elodie-DeMatteis-Upf approved these changes Aug 24, 2026

View reviewed changes

Uh oh!

Conversation

OwenCoogan commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

What are the observable changes?

Good PR checklist

Uh oh!

linear-code Bot commented Aug 19, 2026

Uh oh!

Miexil left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Miexil Aug 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

phndiaye left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OwenCoogan commented Aug 19, 2026 •

edited

Loading

Miexil Aug 20, 2026 •

edited

Loading