feat: button refactor standard markup (#699)

* button refactor * rem value added * visual tests changed * docs updated * fixing button in shellbar * visual tests updated
SAP · Feb 27, 2020 · 24a770a · 24a770a
1 parent 3c05961
commit 24a770a
Show file tree

Hide file tree

Showing 190 changed files with 1,079 additions and 859 deletions.
diff --git a/docs/_includes/demo-page-components/table-page-content.html b/docs/_includes/demo-page-components/table-page-content.html
@@ -26,7 +26,7 @@ <h3 class="fd-panel__title">
                     </div>
                     <button class="fd-button--standard fd-button--compact sap-icon--filter" aria-controls="yQUnd326"
                         aria-haspopup="true" aria-expanded="false" aria-label="Filter">Filter</button>
-                    <div class="fd-button-group" role="group" aria-label="Show as">
+                    <div class="fd-segmented-button" role="group" aria-label="Show as">
                         <button class="fd-button fd-button--compact sap-icon--grid"></button>
                         <button class=" fd-button fd-button--compact sap-icon--list" aria-pressed="true"></button>
                     </div>

diff --git a/docs/_includes/demo-page-components/tile-page-content.html b/docs/_includes/demo-page-components/tile-page-content.html
@@ -7,7 +7,7 @@ <h3 class="fd-panel__title">
                 </h3>
                 <div class="fd-panel__actions">
                     <button class="fd-button--compact fd-button--standard sap-icon--search" aria-label="Search"></button>
-                    <div class="fd-button-group" role="group" aria-label="Show as">
+                    <div class="fd-segmented-button" role="group" aria-label="Show as">
                         <button class=" fd-button fd-button--compact sap-icon--grid" aria-pressed="true"></button>
                         <button class=" fd-button fd-button--compact sap-icon--list"></button>
                     </div>

diff --git a/docs/_includes/display-responsive-component.html b/docs/_includes/display-responsive-component.html
@@ -22,10 +22,16 @@
 
 <div class="fd-tile docs-component docs-component__{{include.cssclass}}">
     {% if include.controls == "true" %}
-    <div class="fd-button-group docs-component--responsive-display__controls" role="group" aria-label="Group label" id="docs-responsive-controls">
-      <button class="fd-button--compact sap-icon--iphone" aria-pressed="false" data-size="mobile"></button>
-      <button class="fd-button--compact sap-icon--ipad"  aria-pressed="false" data-size="tablet"></button>
-      <a class="fd-button--compact docs-component--responsive-display__full-screen"  aria-pressed="false" data-size="fullscreen" href="{{site.baseurl}}{{include.component}}" target="_blank"><span class="sap-icon--popup-window"></span></a>
+    <div class="fd-segmented-button docs-component--responsive-display__controls" role="group" aria-label="Group label" id="docs-responsive-controls">
+      <button class="fd-button fd-button--compact" aria-pressed="false" data-size="mobile">
+        <span class="fd-button--content sap-icon--iphone"></span>
+      </button>
+      <button class="fd-button fd-button--compact"  aria-pressed="false" data-size="tablet">
+          <span class="fd-button--content sap-icon--ipad"></span>
+      </button>
+      <a class="fd-button fd-button--compact"  aria-pressed="false" data-size="fullscreen" href="{{site.baseurl}}{{include.component}}" target="_blank">
+        <span class="fd-button--content sap-icon--popup-window"></span>
+      </a>
     </div>
     {% endif %}
     <div class="fd-tile__content fd-tile__content--responsive-display">

diff --git a/docs/_includes/search-box.html b/docs/_includes/search-box.html
@@ -5,7 +5,9 @@
                 <div class="fd-input-group">
                     <input type="text" class="fd-input fd-input-group__input" id="docs-search" placeholder="{{site.data.strings.search_placeholder_text}}">
                     <span class="fd-input-group__addon fd-input-group__addon--button">
-                        <button class="fd-input-group__button fd-button--light sap-icon--search"></button>
+                        <button class="fd-button fd-button--light">
+                            <span class="fd-button--content sap-icon--search"></span>
+                        </button>
                     </span>
                 </div>
             </div>

diff --git a/docs/_sass/_docs-general.scss b/docs/_sass/_docs-general.scss
@@ -50,7 +50,7 @@ img {
 a {
     text-decoration: none;
     display: inline-block;
-    transition: all $fd-animation--speed ease-in;
+    transition: all $fd-animation-speed ease-in;
     color: --fd-color-action;
     &:hover {
         color: fd-color-state("hover", "action");

diff --git a/docs/pages/components/action-bar.md b/docs/pages/components/action-bar.md
@@ -29,8 +29,8 @@ The Action Bar is located at the top of the page and is used for the following:
         <p class="fd-action-bar__description">Action bar Description </p>
     </div>
     <div class="fd-action-bar__actions">
-        <button class="fd-button--primary">Button</button>
-        <button class="fd-button--emphasized">Button</button>
+        <button class="fd-button fd-button--primary">Button</button>
+        <button class="fd-button fd-button--emphasized">Button</button>
     </div>
 </div>
 {% endcapture %}
@@ -49,8 +49,8 @@ The Action Bar is located at the top of the page and is used for the following:
         <p class="fd-action-bar__description">Action bar Description </p>
     </div>
     <div class="fd-action-bar__actions">
-        <button class=" fd-button--primary">Button</button>
-        <button class=" fd-button--emphasized">Button</button>
+        <button class="fd-button fd-button--primary">Button</button>
+        <button class="fd-button fd-button--emphasized">Button</button>
     </div>
 </div>
 {% endcapture %}
@@ -73,7 +73,7 @@ When there are several main actions for a page, consider displaying them under a
     <div class="fd-action-bar__actions">
             <div class="fd-popover">
                 <div class="fd-popover__control">
-                    <button class="fd-button--light sap-icon--overflow"
+                    <button class="fd-button fd-button--light sap-icon--overflow"
                     aria-controls="wgxzK859" aria-haspopup="true" aria-expanded="false" aria-label="More"></button>
                 </div>
                 <div class="fd-popover__body fd-popover__body--right" aria-hidden="true" id="wgxzK859">
@@ -102,7 +102,7 @@ When there are several main actions for a page, consider displaying them under a
 <div style="width:319px;">
     <div class="fd-action-bar">
         <div class="fd-action-bar__back">
-            <button class="fd-button--light fd-button--compact sap-icon--nav-back" aria-label="Back"></button>
+            <button class="fd-button fd-button--light fd-button--compact sap-icon--nav-back" aria-label="Back"></button>
         </div>
         <div class="fd-action-bar__header">
             <h3 class="fd-action-bar__title">
@@ -112,7 +112,7 @@ When there are several main actions for a page, consider displaying them under a
         <div class="fd-action-bar__actions">
             <div class="fd-popover">
                 <div class="fd-popover__control">
-                    <button class="fd-button--light sap-icon--overflow"
+                    <button class="fd-button fd-button--light sap-icon--overflow"
                     aria-controls="wgxzK85" aria-haspopup="true" aria-expanded="false" aria-label="More"></button>
                 </div>
                 <div class="fd-popover__body" aria-hidden="true" id="wgxzK85">