fix(core): fix disabled button

disabled outlined button does not have the right color due to css selector specify
CheeseGrinder · Sep 29, 2024 · 66a072d · 66a072d
1 parent b48b122
commit 66a072d
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 8 deletions.
diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -246,7 +246,7 @@
 :host([disabled]) {
   cursor: not-allowed;
 
-  button {
+  button:disabled {
     --background: #{get-color("neutral.base", 0.2)};
     color: #{get-color("base.content", 0.2)};
 

diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
@@ -97,7 +97,7 @@ <h2>Button - disabled (basic)</h2>
                 <pop-button disabled color="success">success</pop-button>
                 <pop-button disabled color="warning">warning</pop-button>
                 <pop-button disabled color="error">error</pop-button>
-                <pop-button disabled color="ghost">error</pop-button>
+                <pop-button disabled color="ghost">ghost</pop-button>
             </div>
         </section>
         <section>

diff --git a/packages/core/src/components/button/test/theme/dark.html b/packages/core/src/components/button/test/theme/dark.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Input Basic | Poppy-ui</title>
+    <link rel="stylesheet" href="/css/poppy.bundle.css">
+    <link rel="stylesheet" href="/css/themes/dark.always.css">
+
+    <script nomodule src="/dist/poppy/poppy.js"></script>
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <style>
+        main {
+            width: 100vw;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+
+            background-color: var(--base-300);
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: .35rem;
+        }
+        div {
+            display: flex;
+            gap: .5rem;
+        }
+        /* :root {
+            --base-100-oklch: 27.81% 0.03 256.85;
+            --base-200-oklch: 25.8613% 0.027524 256.847952;
+            --base-300-oklch: 23.9147% 0.025452 256.847952;
+            --primary-oklch: 66.09% 0.27688032105281896 348.83779297164955;
+            --secondary-oklch: 43.83% 0.198 303.72;
+            --accent-oklch: 80.91% 0.096 251.81;
+            --neutral-oklch: 21.01% 0.032 264.6;
+            --neutral-content-oklch: oklch(21.01% 0.032 264.6);
+            --info-oklch: 75.35% 0.139 232.66;
+            --success-oklch: 77.33% 0.153 163.1;
+            --warning-oklch: 86.33% 0.176 89.91;
+            --error-oklch: 68.4% 0.208 14.59;
+        } */
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h2>Button - basic</h2>
+            <div>
+                <pop-button>no color</pop-button>
+                <pop-button color="primary">primary</pop-button>
+                <pop-button color="secondary">secondary</pop-button>
+                <pop-button color="accent">accent</pop-button>
+                <pop-button color="info">info</pop-button>
+                <pop-button color="success">success</pop-button>
+                <pop-button color="warning">warning</pop-button>
+                <pop-button color="error">error</pop-button>
+                <pop-button color="ghost">ghost</pop-button>
+            </div>
+        </section>
+        <section>
+            <h2>Button - outlined</h2>
+            <div>
+                <pop-button outlined>no color</pop-button>
+                <pop-button outlined color="primary">primary</pop-button>
+                <pop-button outlined color="secondary">secondary</pop-button>
+                <pop-button outlined color="accent">accent</pop-button>
+                <pop-button outlined color="info">info</pop-button>
+                <pop-button outlined color="success">success</pop-button>
+                <pop-button outlined color="warning">warning</pop-button>
+                <pop-button outlined color="error">error</pop-button>
+            </div>
+        </section>
+        <section>
+            <h2>Button - active</h2>
+            <div>
+                <pop-button active>no color</pop-button>
+                <pop-button active color="primary">primary</pop-button>
+                <pop-button active color="secondary">secondary</pop-button>
+                <pop-button active color="accent">accent</pop-button>
+                <pop-button active color="info">info</pop-button>
+                <pop-button active color="success">success</pop-button>
+                <pop-button active color="warning">warning</pop-button>
+                <pop-button active color="error">error</pop-button>
+                <pop-button active color="ghost">ghost</pop-button>
+            </div>
+        </section>
+        <section>
+            <h2>Button - outlined active</h2>
+            <div>
+                <pop-button outlined active>no color</pop-button>
+                <pop-button outlined active color="primary">primary</pop-button>
+                <pop-button outlined active color="secondary">secondary</pop-button>
+                <pop-button outlined active color="accent">accent</pop-button>
+                <pop-button outlined active color="info">info</pop-button>
+                <pop-button outlined active color="success">success</pop-button>
+                <pop-button outlined active color="warning">warning</pop-button>
+                <pop-button outlined active color="error">error</pop-button>
+            </div>
+        </section>
+        <section>
+            <h2>Button - disabled (basic)</h2>
+            <div>
+                <pop-button disabled>no color</pop-button>
+                <pop-button disabled color="primary">primary</pop-button>
+                <pop-button disabled color="secondary">secondary</pop-button>
+                <pop-button disabled color="accent">accent</pop-button>
+                <pop-button disabled color="info">info</pop-button>
+                <pop-button disabled color="success">success</pop-button>
+                <pop-button disabled color="warning">warning</pop-button>
+                <pop-button disabled color="error">error</pop-button>
+                <pop-button disabled color="ghost">ghost</pop-button>
+            </div>
+        </section>
+        <section>
+            <h2>Button - outlined disabled</h2>
+            <div>
+                <pop-button outlined disabled>no color</pop-button>
+                <pop-button outlined disabled color="primary">primary</pop-button>
+                <pop-button outlined disabled color="secondary">secondary</pop-button>
+                <pop-button outlined disabled color="accent">accent</pop-button>
+                <pop-button outlined disabled color="info">info</pop-button>
+                <pop-button outlined disabled color="success">success</pop-button>
+                <pop-button outlined disabled color="warning">warning</pop-button>
+                <pop-button outlined disabled color="error">error</pop-button>
+                <pop-button outlined disabled color="ghost">error</pop-button>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts
@@ -80,11 +80,6 @@ export const config: Config = {
     apiSpecGenerator({
       file: 'api.txt',
     }),
-    {
-      type: 'www',
-      serviceWorker: null, // disable service workers
-      copy: [{ src: '**/*.html' }, { src: '**/*.css' }]
-    },
     {
       type: 'dist',
       esmLoaderPath: '../loader',

diff --git a/packages/core/stencil.test.config.ts b/packages/core/stencil.test.config.ts
@@ -1,4 +1,4 @@
-import { Config } from '@stencil/core';
+import type { Config } from '@stencil/core';
 import { config as base } from './stencil.config';
 
 export const config: Config = {
@@ -7,4 +7,13 @@ export const config: Config = {
     port: 2222,
     openBrowser: false,
   },
+  outputTargets: [
+    // biome-ignore lint/style/noNonNullAssertion: <explanation>
+    ...base.outputTargets!,
+    {
+      type: 'www',
+      serviceWorker: null, // disable service workers
+      copy: [{ src: '**/*.html' }, { src: '**/*.css' }]
+    },
+  ]
 };