feat(button): add bal-button-group component

baloise · Jan 9, 2022 · deb9394 · deb9394
1 parent f7eab49
commit deb9394
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 25 deletions.
diff --git a/packages/components/src/components/bal-button/bal-button-group/bal-button-group.tsx b/packages/components/src/components/bal-button/bal-button-group/bal-button-group.tsx
@@ -0,0 +1,26 @@
+import { Component, h, Prop, Host, ComponentInterface } from '@stencil/core'
+
+@Component({
+  tag: 'bal-button-group',
+})
+export class ButtonGroup implements ComponentInterface {
+  /**
+   * The value of the button, which is submitted with the form data.
+   */
+  @Prop() position: 'right' | 'center' | '' = ''
+
+  render() {
+    return (
+      <Host
+        class={{
+          'field': true,
+          'is-grouped': true,
+          'is-grouped-right': this.position === 'right',
+          'is-grouped-centered': this.position === 'center',
+        }}
+      >
+        <slot />
+      </Host>
+    )
+  }
+}
diff --git a/packages/components/src/components/bal-button/bal-button.scss b/packages/components/src/components/bal-button/bal-button.scss
@@ -357,12 +357,24 @@ bal-button.is-fullwidth {
   }
 }
 
-@include mobile() {
-  .field.is-grouped p.control {
-    flex: 1;
+.field.is-grouped bal-button.control:not(:last-child) {
+  margin-right: 8px;
+}
 
-    bal-button {
-      width: 100%;
+@include mobile() {
+  .field.is-grouped {
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    bal-button.control {
+      flex-grow: 1;
+      flex-shrink: 1;
+      min-width: 100%;
+      margin-right: 0 !important;
+
+      &:not(:last-child) {
+        margin-bottom: 8px;
+      }
     }
   }
 }
diff --git a/packages/components/src/components/bal-button/bal-button.tsx b/packages/components/src/components/bal-button/bal-button.tsx
@@ -270,6 +270,7 @@ export class Button implements ComponentInterface {
         onClick={this.handleClick}
         aria-disabled={this.disabled ? 'true' : null}
         class={{
+          'control': true,
           'is-fullwidth': this.expanded,
           'is-disabled': this.disabled,
         }}

diff --git a/packages/components/src/components/bal-button/stories/bal-button.docs.mdx b/packages/components/src/components/bal-button/stories/bal-button.docs.mdx
@@ -1,6 +1,7 @@
 import { Story, Canvas, Description } from '@storybook/addon-docs'
 import { html } from '../../../stories/utils'
 import readme from '../readme.md'
+import buttonGroup from '../bal-button-group/readme.md'
 import { basic, links, colors, expanded, icons, square, buttonLink, group } from './bal-button.templates.ts'
 
 <span id="story--components-button--basic" style={{ opacity: 0 }}></span>
@@ -59,15 +60,14 @@ Buttons provide a clickable element, which can be used in forms, or anywhere tha
 
 ### Button Group
 
-The .bal-buttons css class helps to place button groups together. The buttons stretche on mobile devices according to their css class like .is-full , .is-half , .is-one-third or .is-two-thirds .
-
 <Canvas mdxSource={group}>
   <bal-doc-app>{html(group)}</bal-doc-app>
 </Canvas>
 
 ## Component Api
 
 <Description markdown={readme} />
+<Description markdown={buttonGroup} />
 
 <br />
 

diff --git a/packages/components/src/components/bal-button/stories/bal-button.templates.ts b/packages/components/src/components/bal-button/stories/bal-button.templates.ts
@@ -40,22 +40,16 @@ export const buttonLink = `
 
 export const group = `
 <div>
-  <div class="bal-buttons is-center">
-    <bal-button class="is-full" color="primary">Primary</bal-button>
-    <div class="break"></div>
-    <bal-button class="is-full" color="link">Secondary</bal-button>
-  </div>
-  <div class="bal-buttons is-center">
-    <bal-button class="is-full" color="primary">Full</bal-button>
-    <bal-button class="is-full" color="info">Full</bal-button>
-  </div>
-  <div class="bal-buttons is-center">
-    <bal-button class="is-half" color="primary">Half</bal-button>
-    <bal-button class="is-half" color="info">Half</bal-button>
-  </div>
-  <div class="bal-buttons is-center">
-    <bal-button class="is-one-third" color="primary">Third</bal-button>
-    <bal-button class="is-one-third" color="info">Third</bal-button>
-    <bal-button class="is-one-third" outlined color="info">Third</bal-button>
-  </div>
+  <bal-button-group>
+    <bal-button>Left</bal-button>
+    <bal-button outlined color="info">Group</bal-button>
+  </bal-button-group>
+  <bal-button-group position="center">
+    <bal-button>Centered</bal-button>
+    <bal-button outlined color="info">Group</bal-button>
+  </bal-button-group>
+  <bal-button-group position="right">
+  <bal-button>Right</bal-button>
+  <bal-button outlined color="info">Group</bal-button>
+</bal-button-group>
 </div>`