feat: button group (#2473)

docs/structure.ts

@@ -478,6 +478,15 @@ export const structure = [
           'NbButtonComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Button Group',
+        icon: 'button-group.svg',
+        source: [
+          'NbButtonGroupComponent',
+          'NbButtonToggleDirective',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Checkbox',

src/app/playground-components.ts

@@ -235,6 +235,65 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'button-group',
+    children: [
+      {
+        path: 'button-group-showcase.component',
+        link: '/button-group/button-group-showcase.component',
+        component: 'ButtonGroupShowcaseComponent',
+        name: 'Button Group Showcase',
+      },
+      {
+        path: 'button-group-multiple.component',
+        link: '/button-group/button-group-multiple.component',
+        component: 'ButtonGroupMultipleComponent',
+        name: 'Button Group Multiple',
+      },
+      {
+        path: 'button-group-sizes.component',
+        link: '/button-group/button-group-sizes.component',
+        component: 'ButtonGroupSizesComponent',
+        name: 'Button Group Sizes',
+      },
+      {
+        path: 'button-group-appearances.component',
+        link: '/button-group/button-group-appearances.component',
+        component: 'ButtonGroupAppearancesComponent',
+        name: 'Button Group Appearances',
+      },
+      {
+        path: 'button-group-shapes.component',
+        link: '/button-group/button-group-shapes.component',
+        component: 'ButtonGroupShapesComponent',
+        name: 'Button Group Shapes',
+      },
+      {
+        path: 'button-and-button-toggle-groups.component',
+        link: '/button-group/button-and-button-toggle-groups.component',
+        component: 'ButtonAndButtonToggleGroupsComponent',
+        name: 'Button And Button Toggle Groups',
+      },
+      {
+        path: 'button-group-interactive.component',
+        link: '/button-group/button-group-interactive.component',
+        component: 'ButtonGroupInteractiveComponent',
+        name: 'Button Group Interactive',
+      },
+      {
+        path: 'button-group-disabled.component',
+        link: '/button-group/button-group-disabled.component',
+        component: 'ButtonGroupDisabledComponent',
+        name: 'Button Group Disabled',
+      },
+      {
+        path: 'button-group-statuses.component',
+        link: '/button-group/button-group-statuses.component',
+        component: 'ButtonGroupStatusesComponent',
+        name: 'Button Group Statuses',
+      },
+    ],
+  },
   {
     path: 'calendar',
     children: [

src/framework/theme/components/button-group/_button-group.component.theme.scss

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-buttons-group-theme() {
+  nb-button-group {
+    display: inline-flex;
+
+    [nbButton],
+    [nbButtonToggle] {
+      @include nb-ltr() {
+        &:first-child:not(:last-child) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        &:last-child:not(:first-child) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+      @include nb-rtl() {
+        &:first-child:not(:last-child) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        &:last-child:not(:first-child) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+
+      &.appearance-filled,
+      &.appearance-ghost {
+        // Makes border same color as background. We need to keep the border so that buttons inside and outside
+        // the group have the same height.
+        border-color: transparent;
+      }
+
+      &.appearance-filled {
+        .status-basic {
+          color: nb-theme(button-group-filled-button-basic-text-color);
+        }
+
+        @each $status in nb-get-statuses() {
+          // I can't figure out any sane selector to turn the start border into a divider for buttons
+          // in the default state only (not hovered, focused, etc.). So I went with this horrible thing.
+          // Another way was to copy button styles here, but then we need to keep track of button styles
+          // all the time. Also, it would increase the number of duplicate button styles.
+          &.status-#{$status}:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
+            @include nb-ltr(border-left-color, nb-theme(button-group-filled-#{$status}-divider-color));
+            @include nb-rtl(border-right-color, nb-theme(button-group-filled-#{$status}-divider-color));
+          }
+        }
+      }
+
+      // See the comment on the selector above
+      &.appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) {
+        @include nb-ltr(border-left-color, nb-theme(button-group-ghost-divider-color));
+        @include nb-rtl(border-right-color, nb-theme(button-group-ghost-divider-color));
+      }
+    }
+  }
+}

src/framework/theme/components/button-group/_button-toggle.component.theme.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-buttons-toggle-theme() {
+  [nbButtonToggle] {
+    @extend [nbButton];
+  }
+}
+