feat: split button implementation (#1448)

* #925 split button implementation

docs/pages/components/button.md

@@ -84,7 +84,7 @@ The buttons can also be set to a state:
 
 * **Normal**: The default state of the button. It can be clicked/tapped to perform the corresponding action.
 * **Selected**: Used to signal this button is selected among other buttons. This state can be rendered using `is-selected` class or `aria-selected="true"` attribute for accessibility.
-* **Disabled**: It cannot be clicked/tapped.  This state can be rendered using `is-disabled` class or `aria-disabled="true"` attribute for accessibility.
+* **Disabled**: It cannot be clicked/tapped. This state can be rendered using `is-disabled` class or `aria-disabled="true"` attribute for accessibility.
 
 {% capture button-standard-state %}
 <button class="fd-button--emphasized">Normal State</button>
@@ -134,49 +134,94 @@ Group a series of buttons together on a single line with the button group.
 {% endcapture %}
 {% include display-component.html component=button-group-small %}
 
+# Split Button
+{% include status-container.html key="button-group" %}
+Button with multiple actions
+
+{% capture button-split %}
+<div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
+  <button class="fd-button sap-icon--cart" aria-label="button">Button with text</button>
+  <button class="fd-button sap-icon--slim-arrow-down" aria-controls="t4c0o273" aria-haspopup="true" 
+  aria-expanded="false" aria-label="More"></button>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"  aria-hidden="true" 
+  id="t4c0o273">
+    <nav class="fd-menu">
+        <ul class="fd-menu__list">
+          <li><a role="button" class="fd-menu__item">Add to list</a>
+        </li>
+          <li><a role="button" class="fd-menu__item">Save for later</a>
+        </li>
+        </ul>
+    </nav>
+  </div>
+</div>
+
+<div class="fd-button-split" role="group" aria-label="button-split">
+  <button class="fd-button--emphasized sap-icon--cart" aria-label="button">Button with text</button>
+  <button class="fd-button--emphasized sap-icon--slim-arrow-down" aria-controls="t4c0o2732" 
+  aria-haspopup="true" aria-expanded="false" aria-label="More"></button>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"  aria-hidden="true" 
+    id="t4c0o2732">
+    <nav class="fd-menu">
+        <ul class="fd-menu__list">
+          <li><a role="button" class="fd-menu__item">Add to list</a>
+        </li>
+          <li><a role="button" class="fd-menu__item">Save for later</a>
+        </li>
+        </ul>
+    </nav>
+  </div>
+</div>
+
+{% endcapture %}
+{% include display-component.html component=button-split %}
+
 ## Button RTL support
 
 
 {% capture button-group-small %}
 <div dir="rtl">
-<button class="fd-button--emphasized sap-icon--cart">Add to Cart</button>
-<button class="fd-button sap-icon--cart">Add to Cart</button>
-<button class="fd-button--light sap-icon--cart">Add to Cart</button>
-<button class="fd-button--emphasized fd-button--positive sap-icon--accept">Approve</button>
-<button class="fd-button--emphasized fd-button--negative sap-icon--decline">Reject</button>
-<br><br>
-<button class="fd-button sap-icon--cart"></button>
-<button class="fd-button--light sap-icon--cart"></button>
-<button class="fd-button--standard sap-icon--filter"></button>
-<button class="fd-button--emphasized fd-button--positive sap-icon--accept"></button>
-<button class="fd-button--emphasized fd-button--negative sap-icon--decline"></button>
-<div class="fd-button-group" role="group" aria-label="Group label">
-  <button class="fd-button sap-icon--survey"></button>
-  <button class="fd-button sap-icon--pie-chart" aria-pressed="true"></button>
-  <button class="fd-button sap-icon--pool"></button>
-</div>
-
-<div class="fd-button-group" role="group" aria-label="Group label">
-  <button class="fd-button fd-button--compact" aria-pressed="true">Left</button>
-  <button class="fd-button fd-button--compact">Middle</button>
-  <button class="fd-button fd-button--compact">Right</button>
-</div>
+  <button class="fd-button--emphasized sap-icon--cart">Add to Cart</button>
+  <button class="fd-button sap-icon--cart">Add to Cart</button>
+  <button class="fd-button--light sap-icon--cart">Add to Cart</button>
+  <button class="fd-button--emphasized fd-button--positive sap-icon--accept">Approve</button>
+  <button class="fd-button--emphasized fd-button--negative sap-icon--decline">Reject</button>
+  <br><br>
+  <button class="fd-button sap-icon--cart"></button>
+  <button class="fd-button--light sap-icon--cart"></button>
+  <button class="fd-button--standard sap-icon--filter"></button>
+  <button class="fd-button--emphasized fd-button--positive sap-icon--accept"></button>
+  <button class="fd-button--emphasized fd-button--negative sap-icon--decline"></button>
+  <div class="fd-button-group" role="group" aria-label="Group label">
+    <button class="fd-button sap-icon--survey"></button>
+    <button class="fd-button sap-icon--pie-chart" aria-pressed="true"></button>
+    <button class="fd-button sap-icon--pool"></button>
+  </div>
+
+  <div class="fd-button-group" role="group" aria-label="Group label">
+    <button class="fd-button fd-button--compact" aria-pressed="true">Left</button>
+    <button class="fd-button fd-button--compact">Middle</button>
+    <button class="fd-button fd-button--compact">Right</button>
+  </div>
 </div>
 {% endcapture %}
 {% include display-component.html component=button-group-small %}
 
 <br>
 
 <style media="screen">
-.fd-button,
-.fd-button-group,
-[class*="fd-button--"]{
-	margin-right: 10px;
-}
-
-.fd-button-group [class*="fd-button"]{
-	margin-right: 0px;
-}
-
-
-</style>
+  .fd-button,
+  .fd-button-group,
+  [class*="fd-button--"] {
+    margin-right: 10px;
+  }
+
+  .fd-button-group [class*="fd-button"] {
+    margin-right: 0px;
+  }
+  .fd-button-split .fd-button--emphasized,
+  .fd-button-split .fd-button
+  {
+    margin-right: 0;
+  }
+</style>

scss/components.scss

@@ -2,6 +2,8 @@
 @import "components/action-bar";
 @import "components/badge";
 @import "components/button";
+@import "components/button-group";
+@import "components/button-split";
 @import "components/breadcrumb";
 @import "components/dropdown";
 @import "components/form";
@@ -25,7 +27,6 @@
 @import "components/identifier";
 @import "components/mega-menu";
 @import "components/menu";
-@import "components/button-group";
 @import "components/tile";
 @import "components/product-tile";
 @import "components/tile-grid";

scss/components/button-split.scss

@@ -0,0 +1,59 @@
+@import "./../settings";
+@import "./../mixins";
+@import "./../functions";
+
+/*!
+.fd-button-split+()
+    .fd-button
+*/
+$block: #{$fd-namespace}-button-split;
+
+.#{$block} {
+
+  @include fd-reset-spacing();
+  display: inline-flex;
+  vertical-align: middle;
+  position: relative;
+  // & > * {
+    margin: 0;
+    [class*="fd-button"]:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    [class*="fd-button"]:nth-child(2) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-width: 0;
+    }
+    @include fd-rtl() {
+      [class*="fd-button"]:nth-child(2) {
+        border-top-left-radius: $fd-border-radius;
+        border-bottom-left-radius: $fd-border-radius;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-left-width: 1px;
+      }
+      [class*="fd-button"]:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: $fd-border-radius;
+        border-bottom-right-radius: $fd-border-radius;
+        border-left-width: 0;
+      }
+    }
+  // }
+  .fd-button--emphasized {
+    &:first-child {
+        margin-right: 1px;
+    }
+    @include fd-rtl() {
+        &:first-child {
+            margin-right: 0;
+            margin-left: 1px;
+        }
+    }
+  }
+  .fd-popover__body {
+    width: 100%;
+  }
+}

scss/components/popover.scss

@@ -132,6 +132,20 @@ $block: #{$fd-namespace}-popover;
           &::after {
               display: none;
           }
+
+          &.fd-popover__body--left {
+            left: 0;
+            @include fd-rtl() {
+              right: 0;
+            }
+          }
+
+          &.fd-popover__body--right {
+            right: 0;
+            @include fd-rtl() {
+              left: 0;
+            }
+          }
       }
 
       &[aria-hidden="true"],

test/templates/button-split/component.njk

@@ -0,0 +1,13 @@
+{% from "../button/component.njk" import button %}
+<!--
+button_split:
+    properties={},
+    modifier={ block: [] },
+    state={},
+    aria={}
+-->
+{% macro button_split(properties={}, modifier={}, state={}, aria={}) -%}
+<div class="fd-button-split{{ modifier.block | modifier('button-split') }}{{ state | state }}"{{ aria | aria }} role="group" aria-label="{{properties.label}}">
+  {{- caller() | indent -}}
+</div>
+{%- endmacro %}

test/templates/button-split/data.json

@@ -0,0 +1,33 @@
+{
+    "id": "button-split",
+    "name": "Button Split",
+    "css_vars": true,
+    "rtl": true,
+    "version": "1.0.0",
+    "properties": {
+        "label": "Group label",
+        "buttons": [
+            {
+                "properties": {
+                    "label": "Left"
+                },
+                "aria": {
+                    "pressed": true
+                }
+            },
+            {
+                "properties": {
+                    "label": "Middle"
+                }
+            },
+            {
+                "properties": {
+                    "label": "Right"
+                }
+            }
+        ]
+    },
+    "modifier": {},
+    "state": {},
+    "aria": {}
+}

test/templates/button-split/index.njk

@@ -0,0 +1,90 @@
+{% extends "layout.njk" %}
+{% from "./../format.njk" import format %}
+{% from "./component.njk" import button_split %}
+{% from "../button/component.njk" import button %}
+{% from "../menu/component.njk" import menu %}
+{% from "./../popover/component.njk" import popover_body %}
+{% import "./../utils.njk" as utils %}
+
+
+<!-- include add'tl css from src/styles/, e.g., ['helpers','components/button'] -->
+{% set css_deps = ['components/button','icons' ,'components/menu', 'components/popover'] %}
+
+{% block content %}
+
+<h2>default</h2>
+
+{% set emphasis = ["emphasized", ""] %}
+{% set size = ["", "compact"] %}
+{% set types = ["", "standard", "positive ", "medium", "negative" ] %}
+
+{% for s in size %}
+
+  <br><br>
+  <h2> {{s}}</h2>
+
+  {% set example %}
+
+{% for e in emphasis %}
+{% for t in types %}
+{% call button_split() -%}
+  {{-  button(
+    { 
+      icon: 'cart',
+      label: 'Button' 
+    },
+    modifier={ block: [s, e, t] },
+    aria={ label: 'button' })
+  }}
+  {{-  button(
+    { 
+      icon: 'slim-arrow-down' 
+      },
+    modifier={ block: [s, e, t] },
+    aria={ label: 'dropdown'})
+  }}
+{%- endcall %}
+{% endfor %}
+<br><br>
+{% endfor %}
+{% endset %}
+{{ format(example) }}
+
+{% endfor %}
+
+<br><br>
+
+<h2>with popover menu</h2>
+{% set example %}
+{%- set _id = utils.id() %}
+{% call button_split() -%}
+    {{-  button(
+      { 
+        icon: 'cart',
+        label: 'Button with text' 
+      },
+      modifier={ block: ['emphasized'] },
+      aria={ label: 'button' })
+    }}
+    {{- button({ icon: 'slim-arrow-down' }, modifier={ block: ['emphasized'] }, aria={ controls: _id, haspopup: true, expanded: false, label: 'More' }) | indent(4) }}
+    {{  popover_body(properties={
+            id: _id,
+            body: menu(properties={
+            items: [
+                { "label": "Add to list" },
+                { "label": "Save for later" }
+              ]
+            })
+        },
+        modifier={ block: ['no-arrow', 'right']},
+        classes="contextual-menu"
+        ) | indent(4)
+    }}
+
+    {%- endcall %}
+
+{% endset %}
+{{ format(example) }}
+
+
+{% endblock %}

test/templates/index.njk

@@ -20,6 +20,7 @@ li {
           <li><a href="badge">.fd-badge</a> | <a href="label">.fd-label</a> | <a href="status-label">.fd-status-label</a></li>
           <li><a href="button">.fd-button</a></li>
           <li><a href="button-group">.fd-button-group</a></li>
+          <li><a href="button-split">.fd-button-split</a></li>
           <li><a href="breadcrumb">.fd-breadcrumb</a></li>
           <li><a href="calendar">.fd-calendar</a></li>
           <li><a href="checkbox">.fd-checkbox</a></li>