feat: Remove usage of segmented button in docs (#3209)

* docs: Remove usage of segmented button in docs BREAKING CHANGES: Remove segmented button directive
SAP · Sep 9, 2020 · ed2f058 · ed2f058
1 parent 1cf4b79
commit ed2f058
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 168 deletions.
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -20,7 +20,7 @@ export const API_FILES = {
     breadcrumb: ['BreadcrumbComponent', 'BreadcrumbItemDirective', 'BreadcrumbLinkDirective'],
     busyIndicator: ['BusyIndicatorComponent'],
     button: ['ButtonComponent'],
-    segmentedButton: ['SegmentedButtonComponent', 'SegmentedButtonDirective'],
+    segmentedButton: ['SegmentedButtonComponent'],
     calendar: [
         'CalendarComponent',
         'CalendarDayViewComponent',

diff --git a/.../src/app/core/component-docs/calendar/examples/calendar--i18n-moment-example.component.ts b/.../src/app/core/component-docs/calendar/examples/calendar--i18n-moment-example.component.ts
@@ -33,28 +33,28 @@ export class CustomI18nMomentCalendar extends CalendarI18n {
     selector: 'fd-calendar-i18n-moment-example',
     template: ` <label fd-form-label for="language">Select language:</label>
         <fd-segmented-button id="language" style="margin-bottom:20px">
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('en-gb')" [state]="isSelected('en-gb')">
+            <button fd-button (click)="setLocale('en-gb')" [class]="isSelected('en-gb')">
                 English
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('fr')" [state]="isSelected('fr')">
+            <button fd-button (click)="setLocale('fr')" [class]="isSelected('fr')">
                 French
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('de')" [state]="isSelected('de')">
+            <button fd-button (click)="setLocale('de')" [class]="isSelected('de')">
                 German
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('es')" [state]="isSelected('es')">
+            <button fd-button (click)="setLocale('es')" [class]="isSelected('es')">
                 Spanish
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('bg')" [state]="isSelected('bg')">
+            <button fd-button (click)="setLocale('bg')" [class]="isSelected('bg')">
                 Bulgarian
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('zh-cn')" [state]="isSelected('zh-cn')">
+            <button fd-button (click)="setLocale('zh-cn')" [class]="isSelected('zh-cn')">
                 Chinese CN
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('zh-hk')" [state]="isSelected('zh-hk')">
+            <button fd-button (click)="setLocale('zh-hk')" [class]="isSelected('zh-hk')">
                 Chinese HK
             </button>
-            <button fd-segmented-button [size]="'xs'" (click)="setLocale('zh-tw')" [state]="isSelected('zh-tw')">
+            <button fd-button (click)="setLocale('zh-tw')" [class]="isSelected('zh-tw')">
                 Chinese TW
             </button>
         </fd-segmented-button>
@@ -76,7 +76,7 @@ export class CalendarI18nMomentExampleComponent {
     }
 
     isSelected(language: string): string {
-        return moment.locale() === language ? 'selected' : '';
+        return moment.locale() === language ? 'is-selected' : '';
     }
 
     setLocale(language: string): void {

diff --git a/...examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component.html b/...examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component.html
@@ -1,12 +1,12 @@
 <label fd-form-label>Languages</label>
 <fd-segmented-button id="language" style="margin-bottom: 20px;">
-    <button fd-segmented-button [size]="'xs'" (click)="setLocale('en-gb')" [state]="isSelected('en-gb')">
+    <button fd-button (click)="setLocale('en-gb')" [class]="isSelected('en-gb')">
         English
     </button>
-    <button fd-segmented-button [size]="'xs'" (click)="setLocale('fr')" [state]="isSelected('fr')">French</button>
-    <button fd-segmented-button [size]="'xs'" (click)="setLocale('de')" [state]="isSelected('de')">German</button>
-    <button fd-segmented-button [size]="'xs'" (click)="setLocale('bg')" [state]="isSelected('bg')">Bulgarian</button>
-    <button fd-segmented-button [size]="'xs'" (click)="setLocale('pl')" [state]="isSelected('pl')">Polish</button>
+    <button fd-button (click)="setLocale('fr')" [class]="isSelected('fr')">French</button>
+    <button fd-button (click)="setLocale('de')" [class]="isSelected('de')">German</button>
+    <button fd-button (click)="setLocale('bg')" [class]="isSelected('bg')">Bulgarian</button>
+    <button fd-button (click)="setLocale('pl')" [class]="isSelected('pl')">Polish</button>
 </fd-segmented-button>
 
 <br />

diff --git a/...r/examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component.ts b/...r/examples/date-picker-complex-i18n-example/date-picker-complex-i18n-example.component.ts
@@ -80,6 +80,6 @@ export class DatePickerComplexI18nExampleComponent {
     }
 
     public isSelected(momentJsLang: string): string {
-        return this.actualMomentJsLang === momentJsLang ? 'selected' : '';
+        return this.actualMomentJsLang === momentJsLang ? 'is-selected' : '';
     }
 }
diff --git a/...cs/src/app/core/component-docs/date-picker/examples/date-picker-i18n-example.component.ts b/...cs/src/app/core/component-docs/date-picker/examples/date-picker-i18n-example.component.ts
@@ -124,9 +124,9 @@ export class CustomI18nLabels extends CalendarI18nLabels {
     template: `
         <label fd-form-label for="language">Select language:</label>
         <fd-segmented-button id="language" style="margin-bottom:20px">
-            <button fd-segmented-button [size]="'xs'" (click)="setFrench()" [state]="isSelected('fr')">French</button>
-            <button fd-segmented-button [size]="'xs'" (click)="setGerman()" [state]="isSelected('de')">German</button>
-            <button fd-segmented-button [size]="'xs'" (click)="setBulgarian()" [state]="isSelected('bg')">
+            <button fd-button (click)="setFrench()" [class]="isSelected('fr')">French</button>
+            <button fd-button (click)="setGerman()" [class]="isSelected('de')">German</button>
+            <button fd-button (click)="setBulgarian()" [class]="isSelected('bg')">
                 Bulgarian
             </button>
         </fd-segmented-button>
@@ -160,13 +160,13 @@ export class DatePickerI18nExampleComponent implements AfterViewInit {
     isSelected(language: string): string {
         switch (language) {
             case 'fr': {
-                return this.selected === 1 ? 'selected' : '';
+                return this.selected === 1 ? 'is-selected' : '';
             }
             case 'de': {
-                return this.selected === 2 ? 'selected' : '';
+                return this.selected === 2 ? 'is-selected' : '';
             }
             case 'bg': {
-                return this.selected === 3 ? 'selected' : '';
+                return this.selected === 3 ? 'is-selected' : '';
             }
         }
     }

diff --git a/libs/core/src/lib/segmented-button/public_api.ts b/libs/core/src/lib/segmented-button/public_api.ts
@@ -1,3 +1,2 @@
 export * from './segmented-button.module';
 export * from './segmented-button.component';
-export * from './segmented-button.directive';
diff --git a/libs/core/src/lib/segmented-button/segmented-button.component.html~feat b/libs/core/src/lib/segmented-button/segmented-button.component.html~feat
diff --git a/libs/core/src/lib/segmented-button/segmented-button.component.spec.ts~feat b/libs/core/src/lib/segmented-button/segmented-button.component.spec.ts~feat
diff --git a/libs/core/src/lib/segmented-button/segmented-button.directive.spec.ts b/libs/core/src/lib/segmented-button/segmented-button.directive.spec.ts
diff --git a/libs/core/src/lib/segmented-button/segmented-button.directive.ts b/libs/core/src/lib/segmented-button/segmented-button.directive.ts
diff --git a/libs/core/src/lib/segmented-button/segmented-button.module.ts b/libs/core/src/lib/segmented-button/segmented-button.module.ts
@@ -2,11 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { SegmentedButtonComponent } from './segmented-button.component';
-import { SegmentedButtonDirective } from './segmented-button.directive';
 
 @NgModule({
     imports: [CommonModule],
-    exports: [SegmentedButtonComponent, SegmentedButtonDirective],
-    declarations: [SegmentedButtonComponent, SegmentedButtonDirective]
+    exports: [SegmentedButtonComponent],
+    declarations: [SegmentedButtonComponent]
 })
 export class SegmentedButtonModule {}