Merge branch 'master' into fix/checkbox-alignment-RTL

SAP · Mar 3, 2020 · b60fde0 · b60fde0
2 parents a000378 + a6a49f7
commit b60fde0
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="0.8.0-rc.7"></a>
+# [0.8.0-rc.7](https://github.com/SAP/fundamental-styles/compare/v0.8.0-rc.6...v0.8.0-rc.7) (2020-03-03)
+
+
+### Features
+
+* ActionBar: rework description class names ([#745](https://github.com/SAP/fundamental-styles/issues/745)) ([ae75b33](https://github.com/SAP/fundamental-styles/commit/ae75b33))
+
+
+
+<a name="0.8.0-rc.6"></a>
+# [0.8.0-rc.6](https://github.com/SAP/fundamental-styles/compare/v0.8.0-rc.5...v0.8.0-rc.6) (2020-03-03)
+
+
+### Bug Fixes
+
+* radio button alignment in RTL mode ([115ff32](https://github.com/SAP/fundamental-styles/commit/115ff32))
+* revert accidental pushes to master ([#751](https://github.com/SAP/fundamental-styles/issues/751)) ([fbac0fe](https://github.com/SAP/fundamental-styles/commit/fbac0fe))
+
+
+
 <a name="0.8.0-rc.5"></a>
 # [0.8.0-rc.5](https://github.com/SAP/fundamental-styles/compare/v0.8.0-rc.4...v0.8.0-rc.5) (2020-03-03)
 

diff --git a/docs/_sass/_docs-display-component.scss b/docs/_sass/_docs-display-component.scss
@@ -164,10 +164,6 @@
         .fd-breadcrumb {
             margin-left: 0;
         }
-
-        .fd-action-bar__description {
-            padding: 0;
-        }
     }
 
     &__page {
@@ -312,7 +308,7 @@
         text-decoration: none;
     }
 
-    .fd-panel__description, .fd-action-bar__description {
+    .fd-panel__description {
         padding: 0;
     }
 

diff --git a/docs/pages/components/action-bar.md b/docs/pages/components/action-bar.md
@@ -25,7 +25,7 @@ The Action Bar is located at the top of the page and is used for the following:
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description </p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description </p>
 </div>
 <br><br>
 <h3>RTL Support</h3>
@@ -41,7 +41,7 @@ The Action Bar is located at the top of the page and is used for the following:
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description </p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description </p>
 </div>
 {% endcapture %}
 {% include display-component.html component=default-action-bar %}
@@ -123,7 +123,7 @@ The Action Bar is located at the top of the page and is used for the following:
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long
     </p>
 </div>
 <br><br>
@@ -142,7 +142,7 @@ The Action Bar is located at the top of the page and is used for the following:
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-     <p class="fd-action-bar__description--with-backBtn">Action bar Description Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long
+     <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long
      </p>
 </div>
 {% endcapture %}
@@ -195,7 +195,7 @@ When there are several main actions for a page, consider displaying them under a
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description</p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description</p>
 </div>
 <br><br>
 <h3>RTL Support</h3>
@@ -211,7 +211,7 @@ When there are several main actions for a page, consider displaying them under a
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description</p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description</p>
 </div>
 {% endcapture %}
 {% include display-component.html component=default-action-bar %}
@@ -229,7 +229,7 @@ When there are several main actions for a page, consider displaying them under a
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description </p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description </p>
 </div>
 <br><br>
 <h3>RTL Support</h3>
@@ -245,7 +245,7 @@ When there are several main actions for a page, consider displaying them under a
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div>
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description </p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description </p>
 </div>
 {% endcapture %}
 {% include display-component.html component=default-action-bar %}
@@ -263,7 +263,7 @@ When there are several main actions for a page, consider displaying them under a
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div> 
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description </p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description </p>
 </div>
 <br><br>
 <h3>RTL Support</h3>
@@ -279,7 +279,7 @@ When there are several main actions for a page, consider displaying them under a
             <button class="fd-button fd-button--compact fd-button--emphasized">Button</button>
         </div> 
     </div>
-    <p class="fd-action-bar__description--with-backBtn">Action bar Description </p>
+    <p class="fd-action-bar__description fd-action-bar__description--back">Action bar Description </p>
 </div>
 {% endcapture %}
 {% include display-component.html component=default-action-bar %}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fundamental-styles",
-  "version": "0.8.0-rc.5",
+  "version": "0.8.0-rc.7",
   "description": "Fundamental Styles is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with the SAP look and feel. Learn more about this project at - http://sap.github.io/fundamental-styles/",
   "main": "dist/fundamental-styles.css",
   "scripts": {

diff --git a/src/action-bar.scss b/src/action-bar.scss
@@ -104,16 +104,14 @@ $block: #{$fd-namespace}-action-bar;
 
   &__description {
     @include fd-action-bar-description();
-  }
-
-  &__description--with-backBtn {
-    @include fd-action-bar-description();
 
-    padding-left: 2.5rem;
+    &--back {
+      padding-left: 2.5rem;
 
-    @include fd-rtl() {
-      padding-left: 0;
-      padding-right: 2.5rem;
+      @include fd-rtl() {
+        padding-left: 0;
+        padding-right: 2.5rem;
+      }
     }
   }
 

diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss
@@ -149,7 +149,7 @@
 
   @include fd-rtl() {
     &::after {
-      left: $fd-radio-label-padding;
+      left: $fd-radio-label-padding - $fd-radio-focus-offset;
       right: $margin - $fd-radio-focus-offset;
     }
   }

diff --git a/src/radio.scss b/src/radio.scss
@@ -65,19 +65,11 @@ $block: #{$fd-namespace}-radio;
       font-family: "SAP-icons";
       background-color: var(--sapField_Background);
       margin-right: $fd-radio-outer-circle-margin;
-      margin-left: 0;
       color: var(--sapSelectedColor);
       border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
       border-radius: 50%;
     }
 
-    @include fd-rtl() {
-      &::before {
-        margin-left: $fd-radio-outer-circle-margin;
-        margin-right: 0;
-      }
-    }
-
     @include fd-hover() {
       &::before {
         background-color: var(--sapField_Hover_Background);

diff --git a/test/templates/action-bar/component.njk b/test/templates/action-bar/component.njk
@@ -21,7 +21,7 @@
                 </div>
 
                  {%- if properties.description %}
-                                <p class="fd-action-bar__description--with-backBtn">{{ properties.description }}</p>
+                                <p class="fd-action-bar__description fd-action-bar__description--back">{{ properties.description }}</p>
                 {%- endif %}
         </div>
 {%- endmacro %}

diff --git a/test/visual-regression-tests/reference_images/FS_radio_6_backstop__n6_0_.png b/test/visual-regression-tests/reference_images/FS_radio_6_backstop__n6_0_.png