feat(kbutton): add appearance="none" to button (#2469)

* feat(kbutton): add appearance="none" to button * docs(ktable): add docs * fix(kbutton): add more basestyle, remove href for disabled link * docs(ktable): refine note * fix(kbutton): add style when `icon` is set * docs(kbutton): improve docs, remove icon+text example from sandbox
Kong · Oct 23, 2024 · 30fb03a · 30fb03a
1 parent ada18de
commit 30fb03a
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 45 deletions.
diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs
@@ -12,7 +12,10 @@ export default {
   rules: {
     // Disallow relative font units since we don't know the base font size in other apps
     'unit-disallowed-list': ['rem', 'em'],
-    'order/properties-alphabetical-order': true,
+    'order/properties-order': [
+      ['all'],
+      { 'unspecified': 'bottomAlphabetical' },
+	  ],
     '@kong/design-tokens/use-proper-token': true,
     '@stylistic/indentation': [2, { baseIndentLevel: 0 }],
     // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -13,25 +13,34 @@ and configuration options.
 
 ### appearance
 
-The Button component can take 1 of 4 appearance values:
+The Button component can take 1 of 5 appearance values:
 
 - `primary`
 - `secondary`
 - `tertiary`
 - `danger`
+- `none`
+
+:::tip NOTE
+Use `appearance="none"` to get an unstyled button, making it easier to customize from scratch. This removes the built-in styling but retains the button's functionality.
+
+When `appearance="none"` is set, the `size` prop only works if `icon` is `true`; otherwise, `size` has no effect.
+:::
 
 <div class="spacing-container">
   <KButton appearance="primary">Primary</KButton>
   <KButton appearance="secondary">Secondary</KButton>
   <KButton appearance="tertiary">Tertiary</KButton>
   <KButton appearance="danger">Danger</KButton>
+  <KButton appearance="none">None</KButton>
 </div>
 
 ```html
 <KButton appearance="primary">Primary</KButton>
 <KButton appearance="secondary">Secondary</KButton>
 <KButton appearance="tertiary">Tertiary</KButton>
 <KButton appearance="danger">Danger</KButton>
+<KButton appearance="none">None</KButton>
 ```
 
 ### size

diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -26,6 +26,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
+        api: 'modern',
         // Inject the @kong/design-tokens SCSS variables, kongponents variables and mixins to make them available for all components.
         // This is not needed in host applications.
         additionalData: `

diff --git a/sandbox/pages/SandboxButton.vue b/sandbox/pages/SandboxButton.vue
@@ -13,7 +13,7 @@
         title="appearance"
       >
         <template #description>
-          KButton component takes 1 of 4 appearance values:
+          KButton component takes 1 of 5 appearance values:
           <ul>
             <li>
               <em>primary</em> - default value
@@ -27,6 +27,9 @@
             <li>
               <em>danger</em>
             </li>
+            <li>
+              <em>none</em>
+            </li>
           </ul>
         </template>
         <div class="horizontal-spacing">
@@ -51,6 +54,12 @@
           >
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            @click="test"
+          >
+            None
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton
@@ -80,12 +89,20 @@
           >
             Disabled
           </KButton>
+          <KButton
+            appearance="none"
+            disabled
+            @click="test"
+          >
+            Disabled
+          </KButton>
         </div>
       </SandboxSectionComponent>
       <SandboxSectionComponent
         description="Here we pass an invalid value to the appearance prop (see the error in the console) which the KButton handles by falling back to primary appearance."
         title="invalid value"
       >
+        <!-- @vue-expect-error -->
         <KButton appearance="outline">
           Still Primary
         </KButton>
@@ -188,6 +205,13 @@
           >
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            target="_blank"
+            to="https://kongponents.konghq.com/"
+          >
+            None
+          </KButton>
           <KButton
             disabled
             target="_blank"
@@ -229,6 +253,13 @@
           >
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            target="_blank"
+            :to="{ name: 'home' }"
+          >
+            None
+          </KButton>
           <KButton
             disabled
             target="_blank"
@@ -347,6 +378,13 @@
             Danger
             <ChevronDownIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            size="large"
+          >
+            None
+            <ChevronDownIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton>
@@ -365,6 +403,10 @@
             Danger
             <ChevronDownIcon />
           </KButton>
+          <KButton appearance="none">
+            None
+            <ChevronDownIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton size="small">
@@ -392,6 +434,13 @@
             Danger
             <ChevronDownIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            size="small"
+          >
+            None
+            <ChevronDownIcon />
+          </KButton>
         </div>
       </SandboxSectionComponent>
 
@@ -429,6 +478,13 @@
           >
             <DisabledIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            icon
+            size="large"
+          >
+            <AddCircleIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton icon>
@@ -452,6 +508,12 @@
           >
             <DisabledIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            icon
+          >
+            <AddCircleIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton
@@ -481,6 +543,36 @@
           >
             <DisabledIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            icon
+            size="small"
+          >
+            <AddCircleIcon />
+          </KButton>
+        </div>
+      </SandboxSectionComponent>
+      <SandboxTitleComponent
+        is-subtitle
+        title="Custom button"
+      />
+      <SandboxSectionComponent>
+        <div class="horizontal-spacing">
+          <KButton
+            appearance="none"
+            class="custom-button"
+            @click="test"
+          >
+            Custom
+          </KButton>
+          <KButton
+            appearance="none"
+            class="custom-button"
+            disabled
+            @click="test"
+          >
+            Custom
+          </KButton>
         </div>
       </SandboxSectionComponent>
     </div>
@@ -507,4 +599,23 @@ const test = () => {
     gap: $kui-space-50;
   }
 }
+
+/* Low-specificity styles should be able to override */
+.custom-button {
+  background-color: #42b883;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 8px 16px;
+
+  &:hover:not(:disabled) {
+    background-color: #33a06f;
+    transition-duration: .2s;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}
 </style>