fix: (Core|Platform) bring v.0.14.0 of fundamental-styles

apps/docs/src/app/core/component-docs/switch/examples/switch-sizes-example/switch-sizes-example.component.html

@@ -6,3 +6,8 @@
     Compact Switch
 </label>
 <fd-switch [compact]="true" [(ngModel)]="checked"></fd-switch>
+
+<label fd-form-label>
+    Switch with Text
+</label>
+<fd-switch activeText="On" inactiveText="Off"></fd-switch>

apps/docs/src/app/core/component-docs/switch/switch-docs.component.html

@@ -2,10 +2,10 @@
     Default switch with variations
 </fd-docs-section-title>
 
-<description
-    >Default switch which can include a [optionalText] input to remove text. The [optionalText] input is set to true by
-    default. The [compact] input will make the switch compact.</description
->
+<description>
+    Set the [compact] input property to true to render switch in compact mode.
+    An optional text for the active and inactive states of the switch can be set by providing values for the [inactiveText] and [activeText] input properties.
+</description>
 <component-example>
     <fd-switch-sizes-example></fd-switch-sizes-example>
 </component-example>

apps/docs/src/app/documentation/core-helpers/header-tabs/header-tabs.component.scss

@@ -5,6 +5,7 @@
 .fd-tabs {
     margin-bottom: 0;
     margin-top: 24px;
+    box-shadow: none;
 }
 
 .fd-tabs__item {

libs/core/src/lib/button/button.component.scss

@@ -1,24 +1 @@
 @import '~fundamental-styles/dist/button';
-
-// Remove after 0.13.1/0.14 is introduced into NGX
-.fd-button {
-	justify-content: center;
-
-	.fd-button__text {
-		font-weight: inherit;
-	}
-
-	.fd-button--text-alignment-left {
-		justify-content: flex-start;
-	}
-}
-
-.fd-button * + * {
-    margin-left: 0.375rem !important;
-}
-
-.fd-button * + [dir='rtl'],
-[dir='rtl'] .fd-button * + * {
-    margin-left: 0 !important;
-    margin-right: 0.375rem !important;
-}

libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.scss

@@ -1,193 +1,2 @@
-/*!
- * Fundamental Library Styles v0.13.1-rc.5
- * Copyright (c) 2020 SAP SE or an SAP affiliate company.
- * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
- */
-@charset "UTF-8";
 @import '~fundamental-styles/dist/button';
-.fd-flexible-column-layout {
-    font-size: 0.875rem;
-    font-size: var(--sapFontSize, 0.875rem);
-    line-height: 1.4;
-    line-height: var(--sapContent_LineHeight, 1.4);
-    color: #32363a;
-    color: var(--sapTextColor, #32363a);
-    font-family: '72', '72full', Arial, Helvetica, sans-serif;
-    font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif);
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-}
-.fd-flexible-column-layout::after,
-.fd-flexible-column-layout::before {
-    -webkit-box-sizing: inherit;
-    box-sizing: inherit;
-    font-size: inherit;
-}
-.fd-flexible-column-layout__separator {
-    font-size: 0.875rem;
-    font-size: var(--sapFontSize, 0.875rem);
-    line-height: 1.4;
-    line-height: var(--sapContent_LineHeight, 1.4);
-    color: #32363a;
-    color: var(--sapTextColor, #32363a);
-    font-family: '72', '72full', Arial, Helvetica, sans-serif;
-    font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif);
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    position: relative;
-    width: 1rem;
-    min-width: 1rem;
-    background-color: #edeff0;
-    background-color: var(--fdFlexibleColumnBackgroundSolid, var(--sapShell_Background, #edeff0));
-}
-.fd-flexible-column-layout__separator::after,
-.fd-flexible-column-layout__separator::before {
-    -webkit-box-sizing: inherit;
-    box-sizing: inherit;
-    font-size: inherit;
-}
-.fd-flexible-column-layout__separator::after,
-.fd-flexible-column-layout__separator::before {
-    content: '';
-    display: block;
-    width: 0.0625rem;
-    height: 4rem;
-    -webkit-transition: all 0.1s ease-in;
-    transition: all 0.1s ease-in;
-    position: absolute;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-}
-.fd-flexible-column-layout__separator::before {
-    bottom: calc(50% + 2rem / 2);
-    background-image: -webkit-gradient(linear, left bottom, left top, from(#0854a0), to(transparent));
-    background-image: -webkit-gradient(
-        linear,
-        left bottom,
-        left top,
-        from(var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0))),
-        to(transparent)
-    );
-    background-image: linear-gradient(to top, #0854a0, transparent);
-    background-image: linear-gradient(
-        to top,
-        var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0)),
-        transparent
-    );
-}
-.fd-flexible-column-layout__separator::after {
-    top: calc(50% + 2rem / 2);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#0854a0), to(transparent));
-    background-image: -webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        from(var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0))),
-        to(transparent)
-    );
-    background-image: linear-gradient(to bottom, #0854a0, transparent);
-    background-image: linear-gradient(
-        to bottom,
-        var(--fdFlexibleColumnLayoutToggleImageColor, var(--sapHighlightColor, #0854a0)),
-        transparent
-    );
-}
-.fd-flexible-column-layout__separator.is-hover::after,
-.fd-flexible-column-layout__separator.is-hover::before,
-.fd-flexible-column-layout__separator:hover::after,
-.fd-flexible-column-layout__separator:hover::before {
-    height: 7rem;
-}
-.fd-flexible-column-layout .fd-flexible-column-layout__button {
-    height: 2rem;
-    width: 1.5rem;
-    min-width: 1.5rem;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-.fd-flexible-column-layout__column {
-    font-size: 0.875rem;
-    font-size: var(--sapFontSize, 0.875rem);
-    line-height: 1.4;
-    line-height: var(--sapContent_LineHeight, 1.4);
-    color: #32363a;
-    color: var(--sapTextColor, #32363a);
-    font-family: '72', '72full', Arial, Helvetica, sans-serif;
-    font-family: var(--sapFontFamily, '72', '72full', Arial, Helvetica, sans-serif);
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    min-width: 20rem;
-    border-left: none;
-    border-left: var(--fdFlexibleColumnLayoutBorder, none);
-    border-right: none;
-    border-right: var(--fdFlexibleColumnLayoutBorder, none);
-}
-.fd-flexible-column-layout__column::after,
-.fd-flexible-column-layout__column::before {
-    -webkit-box-sizing: inherit;
-    box-sizing: inherit;
-    font-size: inherit;
-}
-.fd-flexible-column-layout__column:first-child {
-    margin-left: 0;
-    border-left: none;
-}
-.fd-flexible-column-layout__column:last-child {
-    margin-bottom: 0;
-    margin-right: 0;
-    border-right: none;
-}
-.fd-flexible-column-layout__column--hidden {
-    border: none;
-    min-width: 0;
-}
-.fd-flexible-column-layout--translucent .fd-flexible-column-layout__separator {
-    background-color: #fff;
-    background-color: var(--fdFlexibleColumnBackgroundTranslucent, var(--sapGroup_ContentBackground, #fff));
-}
-.fd-flexible-column-layout--transparent .fd-flexible-column-layout__separator {
-    background-color: transparent;
-    background-color: var(--fdFlexibleColumnBackgroundTransparent, transparent);
-}
-
-.fd-flexible-column-layout__column {
-    transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
-}
+@import '~fundamental-styles/dist/flexible-column-layout';

libs/core/src/lib/switch/switch.component.html

@@ -1,13 +1,15 @@
-<label class="fd-switch__label" (click)="focus()" [ngStyle]="{ cursor: disabled ? 'auto' : 'pointer'}">
-    <span
-        class="fd-switch"
-        [ngClass]="{
-            'fd-switch--no-text': !optionalText && !semantic,
-            'fd-switch--compact': compact,
-            'fd-switch--semantic': semantic,
-            'is-disabled': disabled
-        }"
-    >
+<label 
+    class="fd-switch" 
+    (click)="focus()" 
+    [ngStyle]="{ cursor: disabled ? 'auto' : 'pointer'}"
+    [class.fd-switch--compact]="compact"
+    [class.fd-switch--semantic]="semantic"
+    [class.is-disabled]="disabled"
+>
+    <span *ngIf="activeText || inactiveText" class="fd-switch__text">
+        {{isChecked ? activeText : inactiveText}}
+    </span>
+    <span class="fd-switch__control">
         <input
             #switchInput
             class="fd-switch__input"
@@ -21,17 +23,17 @@
             [attr.aria-labelledby]="ariaLabelledby"
             [(ngModel)]="isChecked"
         />
-        <div class="fd-switch__wrapper">
+        <div class="fd-switch__slider">
             <div class="fd-switch__track">
                 <i
                     *ngIf="semantic"
                     role="presentation"
-                    class="fd-switch__text fd-switch__icon--on fd-switch__icon sap-icon--accept"></i>
+                    class="fd-switch__icon fd-switch__icon--on sap-icon--accept"></i>
                 <span class="fd-switch__handle" role="presentation"></span>
                 <i
                     *ngIf="semantic"
                     role="presentation"
-                    class="fd-switch__text fd-switch__icon--off fd-switch__icon sap-icon--decline"></i>
+                    class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></i>
             </div>
         </div>
     </span>

libs/core/src/lib/switch/switch.component.scss

@@ -3,16 +3,3 @@
 .fd-switch-custom {
     display: block;
 }
-
-.fd-switch__wrapper {
-    [class*=sap-icon] {
-        line-height: 2rem;
-        &.fd-switch__icon--off {
-            color: var(--sapNegativeElementColor, #b00);
-        }
-
-        &.fd-switch__icon--on {
-            color: var(--sapPositiveElementColor, #107e3e);
-        }
-    }
-}

libs/core/src/lib/switch/switch.component.ts

@@ -41,9 +41,13 @@ export class SwitchComponent implements ControlValueAccessor {
     @ViewChild('switchInput')
     inputElement: ElementRef<HTMLInputElement>;
 
-    /** If the switch should have text in it or not. */
+    /** Optional text for the active state of the switch. */
     @Input()
-    optionalText = false;
+    activeText = '';
+
+    /** Optional text for the inactive state of the switch. */
+    @Input()
+    inactiveText = '';
 
     /** Whether the switch is disabled. */
     @Input()

libs/platform/src/lib/components/form/switch/switch/switch.component.spec.ts

@@ -119,7 +119,7 @@ describe('SwitchComponent', () => {
     });
 
     it('should trigger an event after click', async () => {
-        const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch__label'));
+        const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch'));
 
         expect(component.switch0CurrentValue).toBeNull();
 
@@ -139,7 +139,7 @@ describe('SwitchComponent', () => {
         expect(switches[0].switchCurrentValue).toBeFalse();
         expect(component.customForm.get('switch0').value).toBeFalse();
 
-        const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch__label'));
+        const switchLabel = fixture.debugElement.query(By.css('#switch-0 .fd-switch'));
 
         switchLabel.nativeElement.click();
         fixture.detectChanges();
@@ -174,7 +174,7 @@ describe('SwitchComponent', () => {
         fixture.detectChanges();
 
         const switches = component.fdpSwitch.toArray();
-        const switchLabel = fixture.debugElement.query(By.css('#switch-3 .fd-switch__label'));
+        const switchLabel = fixture.debugElement.query(By.css('#switch-3 .fd-switch'));
 
         fixture.detectChanges();