Skip to content

feat(side-panel): extract status actions into new component#1676

Merged
ljanner merged 1 commit intomainfrom
feat/extract-side-panel-status-actions
Mar 24, 2026
Merged

feat(side-panel): extract status actions into new component#1676
ljanner merged 1 commit intomainfrom
feat/extract-side-panel-status-actions

Conversation

@spike-rabbit
Copy link
Member

@spike-rabbit spike-rabbit commented Mar 18, 2026

The main motivation is to allow access to the native elements.
In some applications a status action triggers a menu or overlay.
This is currently built by those apps using a DOM query.
With this change, they can just use the overlay directive.

In addition, we can deprecate the StatusItem interface,
which depends on the already deprecated MenuItem.

The usage is quite simple:

<si-side-panel-content>
  <si-side-panel-actions>
      <button
        type="button"
        si-side-panel-action
        icon="element-alarm-background-filled"
        iconColor="status-danger"
        overlayIcon="element-alarm-tick"
        overlayIconColor="text-body"
        (click)="action()"
      >
        Action
      </button>
  </si-side-panel-actions>
</si-side-panel-content>

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request is a great improvement, extracting the status actions into new standalone components. This refactoring simplifies the API for developers and allows for more flexible use of features like overlays, while also deprecating the older StatusItem interface. The implementation largely adheres to the repository's style guide. I've identified a minor opportunity for improvement in the SCSS to avoid using !important, which will enhance maintainability.

@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch 3 times, most recently from 5dd4e5e to d367492 Compare March 18, 2026 16:55
@spike-rabbit spike-rabbit marked this pull request as ready for review March 18, 2026 17:09
@spike-rabbit spike-rabbit requested review from a team as code owners March 18, 2026 17:09
Copy link
Member

@spliffone spliffone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer an approach where we just use content-projection and some CSS classes to show status actions which offers more flexibility for consumers. The status action components has simply to much logic inside.

@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch 2 times, most recently from 4e7ca76 to 846a27d Compare March 19, 2026 06:46
@spike-rabbit
Copy link
Member Author

@spliffone I chose a component here to maintain some flexibility for us in the future.
They way this currently behaves based on expanded / collapsed of the side-panel is not ideal.
I am afraid, that fixing this may requires JS logic.

On the long run, I would like to have a more flexible solution to render icons / actions in a collapsed side-panel (needed for AI patterns).
So I am targetting to get rid of this component completely.

But currently, the main focus is solve a consumer request.

@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch 2 times, most recently from 4512f3f to 32c49c0 Compare March 19, 2026 07:54
Copy link
Member

@ljanner ljanner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spike-rabbit great changes! I really like the clear naming and good examples.

Just two small details. The commit body already gives great insight to the change, but please add a deprecation note so it properly shows up in the changelog.

@ljanner ljanner assigned spike-rabbit and unassigned ljanner Mar 23, 2026
@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch from 32c49c0 to 0bfffdc Compare March 23, 2026 18:43
@spike-rabbit spike-rabbit requested a review from ljanner March 23, 2026 18:44
@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch 5 times, most recently from d9fa945 to 0d8f545 Compare March 24, 2026 13:36
Copy link
Member

@ljanner ljanner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch from 0d8f545 to e0e3a53 Compare March 24, 2026 13:56
@ljanner ljanner enabled auto-merge March 24, 2026 14:30
@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch from e0e3a53 to a879f43 Compare March 24, 2026 14:31
@ljanner ljanner disabled auto-merge March 24, 2026 14:38
@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch from a879f43 to dca0389 Compare March 24, 2026 14:41
The main motivation is to allow access to the native elements.
In some applications a status action triggers a menu or overlay.
This is currently built by those apps using a DOM query.
With this change, they can just use the overlay directive.

In addition, we can deprecate the `StatusItem` interface,
which depends on the already deprecated `MenuItem`.

The usage is quite simple:

```html
<si-side-panel-content>
  <si-side-panel-actions>
      <button
        type="button"
        si-side-panel-action
        icon="element-alarm-background-filled"
        iconColor="status-danger"
        stackedIcon="element-alarm-tick"
        stackedIconColor="text-body"
        (click)="action()"
      >
        Action
      </button>
  </si-side-panel-actions>
</si-side-panel-content>
```

DEPRECATED:
The input `SiSidePanelContentComponent.statusActions` should no longer be used.
Use the new `<si-side-panel-actions>` instead:

```html
<si-side-panel-content>
  <si-side-panel-actions>
      <button
        type="button"
        si-side-panel-action
        icon="element-alarm-background-filled"
        iconColor="status-danger"
        stackedIcon="element-alarm-tick"
        stackedIconColor="text-body"
        (click)="action()"
      >
        Action
      </button>
  </si-side-panel-actions>
</si-side-panel-content>
```
@spike-rabbit spike-rabbit force-pushed the feat/extract-side-panel-status-actions branch from dca0389 to 65e234c Compare March 24, 2026 14:42
Copy link
Member

@ljanner ljanner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now code owners should work 😉

@ljanner ljanner enabled auto-merge March 24, 2026 14:46
@ljanner ljanner added this pull request to the merge queue Mar 24, 2026
Merged via the queue into main with commit f796850 Mar 24, 2026
11 checks passed
@ljanner ljanner deleted the feat/extract-side-panel-status-actions branch March 24, 2026 15:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants