Skip to content

fix(action-bar): restrict collapse button to floating layout only #3521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+12 −8
Open

fix(action-bar): restrict collapse button to floating layout only #3521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
60a6ae3
fix(action-bar): restrict collapse button to floating layout only
LucyChyzhova Apr 8, 2025
8c2a764
docs(action-bar): improve floating action bar example documentation
LucyChyzhova Apr 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/components/action-bar/action-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { Icon } from '../../global/shared-types/icon.types';
* @exampleComponent limel-example-action-bar-selected-item
* @exampleComponent limel-example-action-bar-colors
* @exampleComponent limel-example-action-bar-floating
* @exampleComponent limel-example-action-bar-floating-expand
* @exampleComponent limel-example-action-bar-floating-collapsible
* @exampleComponent limel-example-action-bar-styling
* @exampleComponent limel-example-action-bar-as-primary-component
* @exampleComponent limel-example-action-bar-icon-title
Expand Down Expand Up @@ -209,7 +209,11 @@ export class ActionBar {
};

private renderCollapseExpandButton() {
if (!this.collapsible || this.actions.length <= 1) {
if (
!this.collapsible ||
this.actions.length <= 1 ||
this.layout !== 'floating'
) {
Comment on lines +212 to +216
Copy link
Contributor

Choose a reason for hiding this comment

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

I feel a bit unsure about having a prop, that only works when another prop is set to a certain state. This is what I was trying to communicate in the other issue as one of the reasons for reconsidering this design choice.

If you wanna keep this as a temporary solution for now, please update the documentations as well as documenting the prop itself as alpha and even perhaps private.

Like below:

    /**
     * When set to `true`, the action bar will be collapsible,
     * but only when the `layout` prop is also set to `floating`.
     * 
     * @private
     * @alpha
     */
    @Prop({ reflect: true })
    public collapsible = false;

As you see, the updated docs feels a bit strange. But if we make it alpha, it feels safer later to revert the changes.

return;
}

Expand Down
12 changes: 6 additions & 6 deletions ...ction-bar-floating-with-expand-button.tsx → ...tion-bar-floating-with-collaps-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ import { Component, h } from '@stencil/core';
import { ActionBarItem, ListSeparator } from '@limetech/lime-elements';

/**
* Floating action bar with expand button
* Floating action bar with collapse button
*
* Some designs may require a floating action bar with an expand button.
* It can be useful if action bar is covering important content.
* To make the action bar expandable, set the `collapsible` prop to `true`.
* Some designs may require a floating action bar with a collapse button.
* This feature is useful when the action bar is covering important content.
* To make the action bar collapsible, set the `collapsible` prop to `true`.
*
*/
@Component({
tag: 'limel-example-action-bar-floating-expand',
tag: 'limel-example-action-bar-floating-collapsible',
shadow: true,
styleUrl: 'action-bar-floating.scss',
})
export class ActionBarFloatingExpandExample {
export class ActionBarFloatingCollapsibleExample {
private actionBarItems: Array<ActionBarItem | ListSeparator> = [
{
text: 'Add',
Expand Down