fix: split button title take 2 (#3239)

* split button title take 2 * docs improvements, add fixedWidth input * button behavior fixed + examples * revert long text for first example * fix bug where new menu items would not be subscribed if added after content init * fix tests * put back ngOnChanges * use object for main action * titleTemplate should reset after option is picked * fix weird bug with button resizing if dev uses titleTemplate * better solution for width issue * keepMainAction should go in MainAction interface * fix bug * pr comments * use forEach * pr comments * remove init * first unsubscribes automatically * move menu item selection logic to separate function
SAP · Sep 17, 2020 · 16e480f · 16e480f
1 parent c80556f
commit 16e480f
Show file tree

Hide file tree

Showing 17 changed files with 423 additions and 52 deletions.
diff --git a/...p/core/component-docs/split-button/examples/split-button-behaviors-example.component.html b/...p/core/component-docs/split-button/examples/split-button-behaviors-example.component.html
@@ -0,0 +1,71 @@
+Default behavior:
+<fd-split-button (primaryButtonClicked)="alert('primary button clicked')">
+    <fd-menu>
+        <li fd-menu-item (click)="alert('option1 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 1</span>
+            </div>
+        </li>
+        <li fd-menu-item (click)="alert('option2 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 2</span>
+            </div>
+        </li>
+    </fd-menu>
+</fd-split-button>
+
+<br/><br/>
+
+Main Action:
+<fd-split-button (primaryButtonClicked)="alert('primary button clicked')" [mainAction]="mainActionObject">
+    <fd-menu>
+        <li fd-menu-item (click)="alert('option1 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 1</span>
+            </div>
+        </li>
+        <li fd-menu-item (click)="alert('option2 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 2 with long text</span>
+            </div>
+        </li>
+    </fd-menu>
+</fd-split-button>
+
+<br/><br/>
+
+Keep Main Action:
+<fd-split-button (primaryButtonClicked)="alert('primary button clicked')" [mainAction]="{mainActionTitle: 'Primary Button', keepMainAction: true}">
+    <fd-menu>
+        <li fd-menu-item (click)="alert('option1 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 1</span>
+            </div>
+        </li>
+        <li fd-menu-item (click)="alert('option2 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 2 with long text</span>
+            </div>
+        </li>
+    </fd-menu>
+</fd-split-button>
+
+<br/><br/>
+
+fixedWidth = false:
+<fd-split-button (primaryButtonClicked)="alert('primary button clicked')" [fixedWidth]="false">
+    <fd-menu>
+        <li fd-menu-item (click)="alert('option1 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 1</span>
+            </div>
+        </li>
+        <li fd-menu-item (click)="alert('option2 clicked')">
+            <div fd-menu-interactive>
+                <span fd-menu-title>Option 2 with long text</span>
+            </div>
+        </li>
+    </fd-menu>
+</fd-split-button>
+
+<br/><br/>
diff --git a/...app/core/component-docs/split-button/examples/split-button-behaviors-example.component.ts b/...app/core/component-docs/split-button/examples/split-button-behaviors-example.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-split-button-behaviors-example',
+    templateUrl: './split-button-behaviors-example.component.html',
+    styles: [
+        `
+            fd-split-button {
+                margin-right: 12px;
+            }
+        `
+    ]
+})
+export class ButtonSplitBehaviorsComponent {
+
+    mainActionObject = {
+        mainActionTitle: 'Main Action',
+        callback: () => {window.alert('main action clicked')}
+    };
+
+    alert(message: string): void {
+        window.alert(message);
+    }
+
+}
diff --git a/...c/app/core/component-docs/split-button/examples/split-button-icons-example.component.html b/...c/app/core/component-docs/split-button/examples/split-button-icons-example.component.html
@@ -1,4 +1,4 @@
-<fd-split-button [glyph]="'menu'" [mainActionTitle]="'Action Button'">
+<fd-split-button glyph="menu">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -12,7 +12,7 @@
         </li>
     </fd-menu>
 </fd-split-button>
-<fd-split-button [glyph]="'cart'" [mainActionTitle]="'Action Button'">
+<fd-split-button glyph="cart">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>

diff --git a/...app/core/component-docs/split-button/examples/split-button-options-example.component.html b/...app/core/component-docs/split-button/examples/split-button-options-example.component.html
@@ -1,4 +1,4 @@
-<fd-split-button [mainActionTitle]="'Disabled Button'" [disabled]="true" (primaryButtonClicked)="primaryButtonClicked()">
+<fd-split-button [mainAction]="{mainActionTitle: 'Disabled Button'}" [disabled]="true" (primaryButtonClicked)="primaryButtonClicked()">
     <fd-menu>
         <li fd-menu-item (click)="itemClicked()">
             <div fd-menu-interactive>
@@ -13,7 +13,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [mainActionTitle]="'Default Button'" (primaryButtonClicked)="primaryButtonClicked()">
+<fd-split-button [mainAction]="{mainActionTitle: 'Default Button'}" (primaryButtonClicked)="primaryButtonClicked()">
     <fd-menu>
         <li fd-menu-item (click)="itemClicked()">
             <div fd-menu-interactive>
@@ -29,8 +29,8 @@
 </fd-split-button>
 
 <fd-split-button
-    [fdType]="'emphasized'"
-    [mainActionTitle]="'Emphasized Button'"
+    fdType="emphasized"
+    [mainAction]="{mainActionTitle: 'Emphasized Button'}"
     (primaryButtonClicked)="primaryButtonClicked()">
     <fd-menu>
         <li fd-menu-item (click)="itemClicked()">
@@ -47,8 +47,8 @@
 </fd-split-button>
 
 <fd-split-button
-    [fdType]="'transparent'"
-    [mainActionTitle]="'Light Button'"
+    fdType="transparent"
+    [mainAction]="{mainActionTitle: 'Light Button'}"
     (primaryButtonClicked)="primaryButtonClicked()">
     <fd-menu>
         <li fd-menu-item (click)="itemClicked()">

diff --git a/...e/component-docs/split-button/examples/split-button-programmatical-example.component.html b/...e/component-docs/split-button/examples/split-button-programmatical-example.component.html
@@ -1,11 +1,11 @@
-<fd-split-button [mainActionTitle]="'Action Button'">
+<fd-split-button [mainAction]="{mainActionTitle: 'Action Button'}" [selected]="selectedOption">
     <fd-menu #menu [closeOnOutsideClick]="false">
-        <li fd-menu-item>
+        <li fd-menu-item #option1>
             <div fd-menu-interactive>
                 <span fd-menu-title>Option 1</span>
             </div>
         </li>
-        <li fd-menu-item>
+        <li fd-menu-item #option2>
             <div fd-menu-interactive>
                 <span fd-menu-title>Option 2</span>
             </div>
@@ -15,3 +15,6 @@
 
 <button class="docs-button" fd-button (click)="menu.open()">Open</button>
 <button class="docs-button" fd-button (click)="menu.close()">Close</button>
+
+<button class="docs-button" fd-button (click)="select(option1)">Select Option 1</button>
+<button class="docs-button" fd-button (click)="select(option2)">Select Option 2</button>
diff --git a/...ore/component-docs/split-button/examples/split-button-programmatical-example.component.ts b/...ore/component-docs/split-button/examples/split-button-programmatical-example.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { MenuItemComponent } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fd-split-button-programmatical-example',
@@ -15,4 +16,11 @@ import { Component } from '@angular/core';
     ]
 })
 export class ButtonSplitProgrammaticalExampleComponent {
+
+    selectedOption: MenuItemComponent;
+
+    select(option: MenuItemComponent): void {
+        this.selectedOption = option;
+    }
+
 }
diff --git a/...pp/core/component-docs/split-button/examples/split-button-template-example.component.html b/...pp/core/component-docs/split-button/examples/split-button-template-example.component.html
@@ -1,6 +1,6 @@
 <fd-split-button>
     <ng-template fd-split-button-action-title>
-        <fd-icon [glyph]="'home'"></fd-icon>
+        <fd-icon glyph="home"></fd-icon>
         Action
     </ng-template>
     <fd-menu>

diff --git a/...c/app/core/component-docs/split-button/examples/split-button-types-example.component.html b/...c/app/core/component-docs/split-button/examples/split-button-types-example.component.html
@@ -1,4 +1,4 @@
-<fd-split-button [mainActionTitle]="'Action Button'">
+<fd-split-button>
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -13,7 +13,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'standard'" [mainActionTitle]="'Standard Button'">
+<fd-split-button fdType="standard'">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -28,7 +28,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'emphasized'" [mainActionTitle]="'Emphasized Button'">
+<fd-split-button fdType="emphasized">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -43,7 +43,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'ghost'" [mainActionTitle]="'Ghost Button'">
+<fd-split-button fdType="ghost">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -58,7 +58,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'positive'" [mainActionTitle]="'Positive Button'">
+<fd-split-button fdType="positive">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -73,7 +73,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'negative'" [mainActionTitle]="'Negative Button'">
+<fd-split-button fdType="negative">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -88,7 +88,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'attention'" [mainActionTitle]="'Attention Button'">
+<fd-split-button fdType="attention">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>
@@ -103,7 +103,7 @@
     </fd-menu>
 </fd-split-button>
 
-<fd-split-button [fdType]="'transparent'" [mainActionTitle]="'Transparent Button'">
+<fd-split-button fdType="transparent">
     <fd-menu>
         <li fd-menu-item>
             <div fd-menu-interactive>

diff --git a/...src/app/core/component-docs/split-button/examples/split-button-types-example.component.ts b/...src/app/core/component-docs/split-button/examples/split-button-types-example.component.ts
@@ -11,5 +11,4 @@ import { Component } from '@angular/core';
         `
     ]
 })
-export class ButtonSplitTypesExampleComponent {
-}
+export class ButtonSplitTypesExampleComponent {}
diff --git a/apps/docs/src/app/core/component-docs/split-button/split-button-docs.component.html b/apps/docs/src/app/core/component-docs/split-button/split-button-docs.component.html
@@ -1,17 +1,37 @@
-<fd-docs-section-title [id]="'button-types'" [componentName]="'splitButton'">
+<fd-docs-section-title id="button-behaviors" componentName="splitButton">
+    Button Behaviors
+</fd-docs-section-title>
+<description>
+    A <code>MenuItemComponent</code> can be passed to the <code>[selected]</code> input to select a menu item. A button
+    title and callback function can be provided as an object through the <code>[mainAction]</code> input. This object
+    can contain three properties, <code>mainActionTitle</code>, <code>keepMainAction</code> and <code>callback</code>,
+    the first of which is a string for the button title, the second a boolean for whether or not the mainAction should
+    not change when another menu option is selected, and the third is a function that will be called when the button is
+    clicked. keepMainAction and callback are optional. This title and the corresponding button action will be changed
+    when another option in the menu is selected, unless <code>keepMainAction</code> is set to true.
+    If no <code>[mainAction]</code> is provided, the text and functionality of the first menu item will be set on load.
+    By default, the main action button will keep its original width on load, regardless of the length of the text of the
+    selected option. To have the button width change with the text length, set <code>[fixedWidth]="false"</code>.
+</description>
+<component-example>
+    <fd-split-button-behaviors-example></fd-split-button-behaviors-example>
+</component-example>
+<code-example [exampleFiles]="buttonSplitBehaviors"></code-example>
+
+<fd-docs-section-title id="button-types" componentName="splitButton">
     Button Types
 </fd-docs-section-title>
 <description>
     The default button type is "action", no modifier is required. Use
-    <code class="code-snippet">[fdType]="'standard'"</code>
-    <code class="code-snippet">[fdType]="'standard'"</code>
-    <code class="code-snippet">[fdType]="'emphasized'"</code>
-    <code class="code-snippet">[fdType]="'ghost'"</code>
-    <code class="code-snippet">[fdType]="'positive'"</code>
-    <code class="code-snippet">[fdType]="'negative'"</code>
-    <code class="code-snippet">[fdType]="'attention'"</code>
-    <code class="code-snippet">[fdType]="'transparent'"</code>. Leave
-    <code class="code-snippet">[fdType]=""</code> empty to use Action button
+    <code class="code-snippet">fdType="standard"</code>
+    <code class="code-snippet">fdType="standard"</code>
+    <code class="code-snippet">fdType="emphasized"</code>
+    <code class="code-snippet">fdType="ghost"</code>
+    <code class="code-snippet">fdType="positive"</code>
+    <code class="code-snippet">fdType="negative"</code>
+    <code class="code-snippet">fdType="attention"</code>
+    <code class="code-snippet">fdType="transparent"</code>. Leave
+    <code class="code-snippet">fdType=""</code> empty to use Action button.
 </description>
 <component-example>
     <fd-split-button-types-example></fd-split-button-types-example>
@@ -20,12 +40,12 @@
 
 <separator></separator>
 
-<fd-docs-section-title [id]="'with-icons'" [componentName]="'splitButton'">
+<fd-docs-section-title id="with-icons" componentName="splitButton">
     Buttons with Icons
 </fd-docs-section-title>
 <description>
     Use
-    <code class="code-snippet">[glyph]="icon-name"</code> to change an icon of dropdown menu.
+    <code class="code-snippet">glyph="icon-name"</code> to change an icon of dropdown menu.
 </description>
 <component-example>
     <fd-split-button-icons-example></fd-split-button-icons-example>
@@ -34,12 +54,12 @@
 
 <separator></separator>
 
-<fd-docs-section-title [id]="'programmatic-control'" [componentName]="'splitButton'">
-    Open/Close Programmatically
+<fd-docs-section-title id="programmatic-control" componentName="splitButton">
+    Programmatic Selection and Open / Close
 </fd-docs-section-title>
 <description>
     It is possible to control the open state of the popover using <code>MenuComponent.open()</code> and <code>MenuComponent.close()</code>
-    methods.
+    methods. A menu option can also be selected programmatically using the <code>[selected]</code> input.
 </description>
 <component-example>
     <fd-split-button-programmatical-example></fd-split-button-programmatical-example>
@@ -48,7 +68,7 @@
 
 <separator></separator>
 
-<fd-docs-section-title [id]="'custom-template'" [componentName]="'splitButton'">
+<fd-docs-section-title id="custom-template" componentName="splitButton">
     Custom Template for Action Button
 </fd-docs-section-title>
 <description>

diff --git a/apps/docs/src/app/core/component-docs/split-button/split-button-docs.component.ts b/apps/docs/src/app/core/component-docs/split-button/split-button-docs.component.ts
@@ -7,6 +7,8 @@ import * as buttonSplitProgrammaticalyExampleTs from '!raw-loader!./examples/spl
 import * as buttonSplitTemplateExampleTs from '!raw-loader!./examples/split-button-template-example.component.ts';
 import * as buttonTypesExampleTs from '!raw-loader!./examples/split-button-types-example.component.ts';
 import * as buttonSplitIconsTs from '!raw-loader!./examples/split-button-icons-example.component.ts';
+import * as buttonSplitBehaviorsHtml from '!raw-loader!./examples/split-button-behaviors-example.component.html';
+import * as buttonSplitBehaviorsTs from '!raw-loader!./examples/split-button-behaviors-example.component.ts';
 import * as buttonTypesExample from '!raw-loader!./examples/split-button-types-example.component.html';
 import * as buttonSplitProgrammaticalyExample from '!raw-loader!./examples/split-button-programmatical-example.component.html';
 import * as buttonSplitOptionsExample from '!raw-loader!./examples/split-button-options-example.component.html';
@@ -83,6 +85,21 @@ export class SplitButtonDocsComponent {
         }
     ];
 
+    buttonSplitBehaviors: ExampleFile[] = [
+        {
+            language: 'html',
+            code: buttonSplitBehaviorsHtml,
+            fileName: 'split-button-behaviors-example',
+            component: 'ButtonSplitBehaviorsComponent'
+        },
+        {
+            language: 'typescript',
+            component: 'ButtonSplitBehaviorsComponent',
+            code: buttonSplitBehaviorsTs,
+            fileName: 'split-button-behaviors-example'
+        }
+    ];
+
     constructor(private schemaFactory: SchemaFactoryService) {
         this.schema = this.schemaFactory.getComponent('button');
     }