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];
+ }
+}
+