fix: button fixes (#249)

aotearoan · Dec 26, 2024 · 57880bb · 57880bb
1 parent c7ad618
commit 57880bb
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 2 deletions.
diff --git a/src/app/views/user-input/button/Button.ts b/src/app/views/user-input/button/Button.ts
@@ -61,6 +61,11 @@ export default defineComponent({
 <neon-button target="_blank" href="/" label="Link button" />
 <neon-button :full-width="true" button-style="outline" label="Full width button" />`;
 
+    const responsiveExample = `<div class="neon-button-group">
+  <neon-button button-style="text" color="primary" label="Cancel"/>
+  <neon-button color="primary" label="Accept"/>
+</div>`;
+
     const withIconExamples = `<neon-button icon="plus" label="With icon" />
 <neon-button icon="plus" icon-position="right" label="Positioned right" />`;
 
@@ -98,6 +103,7 @@ export default defineComponent({
       functionalColorExamples,
       gradientExamples,
       styleExamples,
+      responsiveExample,
       withIconExamples,
       iconOnlyExamples,
       stateExamples,

diff --git a/src/app/views/user-input/button/Button.vue b/src/app/views/user-input/button/Button.vue
@@ -92,6 +92,22 @@
           <editor v-model="styleExamples" />
         </neon-stack>
       </neon-card-body>
+      <neon-card-body>
+        <h2 class="neon-h3">Responsive buttons</h2>
+        <neon-stack>
+          <neon-note color="info">
+            <span
+              >Use the <em>neon-button-group</em> class to wrap a group of buttons to make them responsive. On mobile
+              they will switch to a reverse column layout & become full width.</span
+            >
+          </neon-note>
+          <div class="neon-button-group">
+            <neon-button button-style="text" color="primary" label="Cancel" />
+            <neon-button color="primary" label="Accept" />
+          </div>
+          <editor v-model="responsiveExample" />
+        </neon-stack>
+      </neon-card-body>
       <neon-card-body>
         <h2 class="neon-h3">Buttons with icons</h2>
         <neon-stack>

diff --git a/src/components/user-input/button/NeonButton.spec.ts b/src/components/user-input/button/NeonButton.spec.ts
@@ -188,6 +188,13 @@ describe('NeonButton', () => {
     expect(emitted().click).toBeDefined();
   });
 
+  it('does not emit click event when disabled', async () => {
+    const { getByText, emitted, rerender } = harness;
+    await rerender({ disabled: true });
+    await fireEvent.click(getByText(label));
+    expect(emitted().click).toBeUndefined();
+  });
+
   it('blurs element on click', async () => {
     const { getByText } = harness;
     const button = getByText(label).parentElement as HTMLButtonElement;

diff --git a/src/components/user-input/button/NeonButton.ts b/src/components/user-input/button/NeonButton.ts
@@ -139,12 +139,15 @@ export default defineComponent({
     const clickLink = () => button.value?.click();
 
     const sanitizedAttributes = computed(() => {
-      const { _onClick, ...sanitized } = attrs;
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { onClick, ...sanitized } = attrs;
       return sanitized;
     });
 
     const clickButton = () => {
-      emit('click');
+      if (!props.disabled) {
+        emit('click');
+      }
       button.value?.blur();
     };
 

diff --git a/src/sass/components/_button.scss b/src/sass/components/_button.scss
@@ -173,6 +173,10 @@
   }
 }
 
+@mixin neon-full-width-button {
+  @include neon-full-width-button;
+}
+
 @mixin button {
   .neon-button {
     margin-left: 0;
@@ -384,5 +388,14 @@
     justify-content: flex-end;
     align-items: center;
     gap: var(--neon-space-16);
+
+    @include responsive.responsive(mobile-large) {
+      flex-direction: column-reverse;
+      gap: calc(3 * var(--neon-base-space));
+
+      & > .neon-button {
+        @include neon-full-width-button;
+      }
+    }
   }
 }