From 60a6ae33ae0022e93590e6152d943d60fa98afa7 Mon Sep 17 00:00:00 2001 From: Lucy Chyzhova Date: Tue, 8 Apr 2025 15:42:13 +0200 Subject: [PATCH 1/2] fix(action-bar): restrict collapse button to floating layout only --- src/components/action-bar/action-bar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index 33d0209fac..bd08660845 100644 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -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' + ) { return; } From 8c2a764b36461cab84a73b1c7d01959a9e1b2024 Mon Sep 17 00:00:00 2001 From: Lucy Chyzhova Date: Tue, 8 Apr 2025 16:04:50 +0200 Subject: [PATCH 2/2] docs(action-bar): improve floating action bar example documentation --- src/components/action-bar/action-bar.tsx | 2 +- ...x => action-bar-floating-with-collaps-button.tsx} | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) rename src/components/action-bar/examples/{action-bar-floating-with-expand-button.tsx => action-bar-floating-with-collaps-button.tsx} (79%) diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index bd08660845..7e1d076f6d 100644 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -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 diff --git a/src/components/action-bar/examples/action-bar-floating-with-expand-button.tsx b/src/components/action-bar/examples/action-bar-floating-with-collaps-button.tsx similarity index 79% rename from src/components/action-bar/examples/action-bar-floating-with-expand-button.tsx rename to src/components/action-bar/examples/action-bar-floating-with-collaps-button.tsx index 8403324646..abaf262977 100644 --- a/src/components/action-bar/examples/action-bar-floating-with-expand-button.tsx +++ b/src/components/action-bar/examples/action-bar-floating-with-collaps-button.tsx @@ -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 = [ { text: 'Add',