feat(alert-subsystem-counter): add alert subsystem counter component - #1045
Open
ludvigovrevik wants to merge 1 commit into
Open
feat(alert-subsystem-counter): add alert subsystem counter component#1045ludvigovrevik wants to merge 1 commit into
ludvigovrevik wants to merge 1 commit into
Conversation
Add obc-alert-subsystem-counter: a framed summary of a subsystem's alert counts with a leading icon, label, and slotted severity count badges. Supports horizontal/vertical orientation, an alert/empty state via hasAlert, and configurable empty text. Includes Storybook stories and Linux visual baselines. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
📝 WalkthroughWalkthroughThis PR adds a new ChangesAlert Subsystem Counter Component
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant Consumer
participant ObcAlertSubsystemCounter
participant IconSlot
Consumer->>ObcAlertSubsystemCounter: assign icon/badges slots
ObcAlertSubsystemCounter->>IconSlot: slotchange event
IconSlot->>ObcAlertSubsystemCounter: handleIconSlotChange(assignedNodes)
ObcAlertSubsystemCounter->>ObcAlertSubsystemCounter: update hasIcon state
ObcAlertSubsystemCounter->>Consumer: render frame with label and badges/emptyText
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
The demo can be viewed at https://openbridge-next-demo--1045-feat-alert-subsystem-counte-ux790cn0.web.app |
|
The storybook can be viewed at https://openbridge-next-storybook--1045-feat-alert-subsystem-c-vv99rl33.web.app |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts (1)
36-47: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReduce duplication across story
renderfunctions.The
meta.render,AbbreviationVertical.render, andWithoutIcon.renderblocks duplicate nearly identical markup, differing only in wrapper width and icon-slot presence. Extracting a shared template helper would reduce upkeep if the component's slots/attributes change.♻️ Proposed refactor
+const renderCounter = (args: any, options?: {width?: string; withIcon?: boolean}) => + html`<div style="width:${options?.width ?? '191px'}"> + <obc-alert-subsystem-counter + .label=${args.label} + .orientation=${args.orientation} + .hasAlert=${args.hasAlert} + .emptyText=${args.emptyText} + > + ${options?.withIcon !== false + ? html`<obi-placeholder slot="icon"></obi-placeholder>` + : ''} + ${badges} + </obc-alert-subsystem-counter> + </div>`;Then reuse
renderCounter(args),renderCounter(args, {width: 'fit-content'}), andrenderCounter(args, {withIcon: false})in the respective stories.Also applies to: 79-91, 93-105
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts` around lines 36 - 47, The story file has repeated `render` markup in `meta.render`, `AbbreviationVertical.render`, and `WithoutIcon.render`; factor the shared `obc-alert-subsystem-counter` template into a helper such as `renderCounter(args, options)` and reuse it across those stories. Keep the helper responsible for the common label/orientation/hasAlert/emptyText bindings and let options control wrapper width and whether the `obi-placeholder` icon slot is included, so the story variants only pass `width` and `withIcon` differences.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@packages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.css`:
- Around line 40-51: The CSS in the alert-subsystem-counter styles is missing
the required blank line after each `@mixin`, triggering stylelint
declaration-empty-line-before violations. Update the affected selectors in
alert-subsystem-counter.css, including .label and the other matching blocks in
the referenced range, so there is an empty line immediately after each `@mixin`
font-body (and any similar mixin usage) before the next declaration.
---
Nitpick comments:
In
`@packages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts`:
- Around line 36-47: The story file has repeated `render` markup in
`meta.render`, `AbbreviationVertical.render`, and `WithoutIcon.render`; factor
the shared `obc-alert-subsystem-counter` template into a helper such as
`renderCounter(args, options)` and reuse it across those stories. Keep the
helper responsible for the common label/orientation/hasAlert/emptyText bindings
and let options control wrapper width and whether the `obi-placeholder` icon
slot is included, so the story variants only pass `width` and `withIcon`
differences.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 45c9e8a9-7ae8-4c4f-b830-20c3eaf89310
⛔ Files ignored due to path filters (7)
packages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/abbreviation-auto.pngis excluded by!**/*.pngpackages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/abbreviation-vertical-auto.pngis excluded by!**/*.pngpackages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/default-auto.pngis excluded by!**/*.pngpackages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/no-alerts-auto.pngis excluded by!**/*.pngpackages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/vertical-auto.pngis excluded by!**/*.pngpackages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/vertical-no-alerts-auto.pngis excluded by!**/*.pngpackages/openbridge-webcomponents/__vis__/linux/__baselines__/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts/without-icon-auto.pngis excluded by!**/*.png
📒 Files selected for processing (3)
packages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.csspackages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.stories.tspackages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.ts
Comment on lines
+40
to
+51
| .label { | ||
| @mixin font-body; | ||
| flex: 1 0 0; | ||
| min-width: 0; | ||
| padding-left: 4px; | ||
| color: var(--element-inactive-color); | ||
| font-feature-settings: "ss04" 1; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix Stylelint declaration-empty-line-before violations.
Static analysis flags missing blank lines after @mixin calls at lines 42, 54, and 70.
🎨 Proposed fix
.label {
`@mixin` font-body;
+
flex: 1 0 0;
min-width: 0;
padding-left: 4px;
color: var(--element-inactive-color);
font-feature-settings: "ss04" 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.frame.has-alert .label {
`@mixin` font-body-active;
+
color: var(--on-indent-active-color);
}
.empty {
`@mixin` font-label;
+
color: var(--element-inactive-color);
white-space: nowrap;
font-feature-settings: "ss04" 1;
}Also applies to: 52-55, 68-73
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 42-42: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@packages/openbridge-webcomponents/src/components/alert-subsystem-counter/alert-subsystem-counter.css`
around lines 40 - 51, The CSS in the alert-subsystem-counter styles is missing
the required blank line after each `@mixin`, triggering stylelint
declaration-empty-line-before violations. Update the affected selectors in
alert-subsystem-counter.css, including .label and the other matching blocks in
the referenced range, so there is an empty line immediately after each `@mixin`
font-body (and any similar mixin usage) before the next declaration.
Source: Linters/SAST tools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
obc-alert-subsystem-counter— a framed summary of a single subsystem's alert counts. It provides a leading icon, a label, and a trailing set of slotted severity count badges, giving an at-a-glance view of outstanding alerts grouped by severity.Features
horizontal(single row) orvertical(badges on a line below the label).hasAlerttoggles between an active presentation (bold label + badges) and an inactive one (muted label + empty text).emptyText(defaultNo alerts).iconslot; the leading box collapses when absent.obc-badgeelements.Testing
--update).🤖 Generated with Claude Code
Summary by CodeRabbit