Merge pull request #210 from kobaltedev/develop

chore: changeset v0.9.5
kobaltedev · May 4, 2023 · 939965e · 939965e
2 parents c2d8406 + db7cc8d
commit 939965e
Show file tree

Hide file tree

Showing 70 changed files with 1,470 additions and 800 deletions.
diff --git a/.changeset/itchy-pens-thank.md b/.changeset/itchy-pens-thank.md
@@ -0,0 +1,11 @@
+---
+"@kobalte/tailwindcss": patch
+"@kobalte/core": patch
+---
+
+fix:
+
+- #205
+- #206
+- #207
+- remove Kobalte UI colors
diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -21,6 +21,7 @@ export const CORE_VERSIONS = [
   "0.9.2",
   "0.9.3",
   "0.9.4",
+  "0.9.5",
 ].reverse();
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

diff --git a/apps/docs/src/examples/alert-dialog.tsx b/apps/docs/src/examples/alert-dialog.tsx
@@ -5,7 +5,7 @@ import style from "./alert-dialog.module.css";
 
 export function BasicExample() {
   return (
-    <AlertDialog.Root>
+    <AlertDialog.Root modal={false} preventScroll>
       <AlertDialog.Trigger class={style["alert-dialog__trigger"]}>Open</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Overlay class={style["alert-dialog__overlay"]} />

diff --git a/apps/docs/src/examples/checkbox.module.css b/apps/docs/src/examples/checkbox.module.css
@@ -22,13 +22,31 @@
   color: white;
 }
 
+.checkbox__control[data-invalid] {
+  border-color: hsl(0 72% 51%);
+}
+
 .checkbox__label {
   margin-left: 6px;
   color: hsl(240 6% 10%);
   font-size: 14px;
   user-select: none;
 }
 
+.checkbox__description {
+  margin-left: 6px;
+  color: hsl(240 5% 26%);
+  font-size: 12px;
+  user-select: none;
+}
+
+.checkbox__error-message {
+  margin-left: 6px;
+  color: hsl(0 72% 51%);
+  font-size: 12px;
+  user-select: none;
+}
+
 [data-kb-theme="dark"] .checkbox__control {
   border-color: hsl(240 5% 34%);
   background-color: hsl(240 5% 26%);
@@ -40,6 +58,15 @@
   color: hsl(0 100% 100% / 0.9);
 }
 
+[data-kb-theme="dark"] .checkbox__control[data-invalid] {
+  border-color: hsl(0 72% 51%);
+}
+
 [data-kb-theme="dark"] .checkbox__label {
   color: hsl(240 5% 84%);
 }
+
+[data-kb-theme="dark"] .checkbox__description {
+  color: hsl(240 5% 65%);
+}
+
diff --git a/apps/docs/src/examples/checkbox.tsx b/apps/docs/src/examples/checkbox.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from "@kobalte/core";
+import { clsx } from "clsx";
 import { createSignal } from "solid-js";
 
 import { CheckIcon } from "../components";
@@ -51,6 +52,51 @@ export function ControlledExample() {
   );
 }
 
+export function DescriptionExample() {
+  return (
+    <Checkbox.Root class={clsx(style["checkbox"], "!items-start")}>
+      <Checkbox.Input class={style["checkbox__input"]} />
+      <Checkbox.Control class={style["checkbox__control"]}>
+        <Checkbox.Indicator>
+          <CheckIcon />
+        </Checkbox.Indicator>
+      </Checkbox.Control>
+      <div class="flex flex-col items-start -mt-0.5">
+        <Checkbox.Label class={style["checkbox__label"]}>Subscribe</Checkbox.Label>
+        <Checkbox.Description class={style["checkbox__description"]}>
+          You will receive our weekly newsletter.
+        </Checkbox.Description>
+      </div>
+    </Checkbox.Root>
+  );
+}
+
+export function ErrorMessageExample() {
+  const [checked, setChecked] = createSignal(false);
+
+  return (
+    <Checkbox.Root
+      class={clsx(style["checkbox"], "!items-start")}
+      checked={checked()}
+      onChange={setChecked}
+      validationState={!checked() ? "invalid" : "valid"}
+    >
+      <Checkbox.Input class={style["checkbox__input"]} />
+      <Checkbox.Control class={style["checkbox__control"]}>
+        <Checkbox.Indicator>
+          <CheckIcon />
+        </Checkbox.Indicator>
+      </Checkbox.Control>
+      <div class="flex flex-col items-start -mt-0.5">
+        <Checkbox.Label class={style["checkbox__label"]}>Subscribe</Checkbox.Label>
+        <Checkbox.ErrorMessage class={style["checkbox__error-message"]}>
+          You must agree to our Terms and Conditions.
+        </Checkbox.ErrorMessage>
+      </div>
+    </Checkbox.Root>
+  );
+}
+
 export function HTMLFormExample() {
   let formRef: HTMLFormElement | undefined;
 

diff --git a/apps/docs/src/examples/switch.module.css b/apps/docs/src/examples/switch.module.css
@@ -25,6 +25,10 @@
   background-color: hsl(200 98% 39%);
 }
 
+.switch__control[data-invalid] {
+  border-color: hsl(0 72% 51%);
+}
+
 .switch__thumb {
   height: 20px;
   width: 20px;
@@ -44,6 +48,20 @@
   user-select: none;
 }
 
+.switch__description {
+  margin-right: 6px;
+  color: hsl(240 5% 26%);
+  font-size: 12px;
+  user-select: none;
+}
+
+.switch__error-message {
+  margin-right: 6px;
+  color: hsl(0 72% 51%);
+  font-size: 12px;
+  user-select: none;
+}
+
 [data-kb-theme="dark"] .switch__control {
   border-color: hsl(240 5% 34%);
   background-color: hsl(240 5% 26%);
@@ -54,10 +72,19 @@
   background-color: hsl(200 98% 39%);
 }
 
+[data-kb-theme="dark"] .switch__control[data-invalid] {
+  border-color: hsl(0 72% 51%);
+}
+
 [data-kb-theme="dark"] .switch__thumb {
   background-color: hsl(240 5% 84%);
 }
 
 [data-kb-theme="dark"] .switch__label {
   color: hsl(240 5% 84%);
 }
+
+[data-kb-theme="dark"] .switch__description {
+  color: hsl(240 5% 65%);
+}
+
diff --git a/apps/docs/src/examples/switch.tsx b/apps/docs/src/examples/switch.tsx
@@ -1,4 +1,5 @@
 import { Switch } from "@kobalte/core";
+import { clsx } from "clsx";
 import { createSignal } from "solid-js";
 
 import style from "./switch.module.css";
@@ -44,6 +45,47 @@ export function ControlledExample() {
   );
 }
 
+export function DescriptionExample() {
+  return (
+    <Switch.Root class={style["switch"]}>
+      <div class="flex flex-col items-start  mr-2">
+        <Switch.Label class={style["switch__label"]}>Airplane mode</Switch.Label>
+        <Switch.Description class={style["switch__description"]}>
+          Disable all network connections.
+        </Switch.Description>
+      </div>
+      <Switch.Input class={style["switch__input"]} />
+      <Switch.Control class={style["switch__control"]}>
+        <Switch.Thumb class={style["switch__thumb"]} />
+      </Switch.Control>
+    </Switch.Root>
+  );
+}
+
+export function ErrorMessageExample() {
+  const [checked, setChecked] = createSignal(false);
+
+  return (
+    <Switch.Root
+      class={style["switch"]}
+      checked={checked()}
+      onChange={setChecked}
+      validationState={!checked() ? "invalid" : "valid"}
+    >
+      <div class="flex flex-col items-start mr-2">
+        <Switch.Label class={style["switch__label"]}>Airplane mode</Switch.Label>
+        <Switch.ErrorMessage class={style["switch__error-message"]}>
+          You must enable airplane mode.
+        </Switch.ErrorMessage>
+      </div>
+      <Switch.Input class={style["switch__input"]} />
+      <Switch.Control class={style["switch__control"]}>
+        <Switch.Thumb class={style["switch__thumb"]} />
+      </Switch.Control>
+    </Switch.Root>
+  );
+}
+
 export function HTMLFormExample() {
   let formRef: HTMLFormElement | undefined;
 

diff --git a/apps/docs/src/routes/docs/changelog/0-9-5.mdx b/apps/docs/src/routes/docs/changelog/0-9-5.mdx
@@ -0,0 +1,9 @@
+# v0.9.5
+
+**May 4, 2023**.
+
+## Bug fixes
+
+- [#205](https://github.com/kobaltedev/kobalte/pull/205)
+- [#206](https://github.com/kobaltedev/kobalte/pull/206)
+- [#207](https://github.com/kobaltedev/kobalte/pull/207)
diff --git a/apps/docs/src/routes/docs/core.tsx b/apps/docs/src/routes/docs/core.tsx
@@ -59,6 +59,7 @@ const CORE_NAV_SECTIONS: NavSection[] = [
       {
         title: "Checkbox",
         href: "/docs/core/components/checkbox",
+        status: "updated",
       },
       {
         title: "Collapsible",
@@ -67,7 +68,6 @@ const CORE_NAV_SECTIONS: NavSection[] = [
       {
         title: "Combobox",
         href: "/docs/core/components/combobox",
-        status: "new",
       },
       {
         title: "Context Menu",
@@ -104,11 +104,11 @@ const CORE_NAV_SECTIONS: NavSection[] = [
       {
         title: "Radio Group",
         href: "/docs/core/components/radio-group",
+        status: "updated",
       },
       {
         title: "Select",
         href: "/docs/core/components/select",
-        status: "updated",
       },
       {
         title: "Separator",
@@ -117,6 +117,7 @@ const CORE_NAV_SECTIONS: NavSection[] = [
       {
         title: "Switch",
         href: "/docs/core/components/switch",
+        status: "updated",
       },
       {
         title: "Tabs",
@@ -137,7 +138,6 @@ const CORE_NAV_SECTIONS: NavSection[] = [
       {
         title: "Tooltip",
         href: "/docs/core/components/tooltip",
-        status: "new",
       },
       {
         title: "I18nProvider",

diff --git a/apps/docs/src/routes/docs/core/components/alert-dialog.mdx b/apps/docs/src/routes/docs/core/components/alert-dialog.mdx
@@ -260,14 +260,15 @@ function ControlledExample() {
 
 ### AlertDialog.Root
 
-| Prop         | Description                                                                                                                                                                                                                                                                                                                                          |
-| :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| open         | `boolean` <br/> The controlled open state of the dialog.                                                                                                                                                                                                                                                                                             |
-| defaultOpen  | `boolean` <br/> The default open state when initially rendered. Useful when you do not need to control the open state.                                                                                                                                                                                                                               |
-| onOpenChange | `(open: boolean) => void` <br/> Event handler called when the open state of the dialog changes.                                                                                                                                                                                                                                                      |
-| id           | `string` <br/> A unique identifier for the component. The id is used to generate id attributes for nested components. If no id prop is provided, a generated id will be used.                                                                                                                                                                        |
-| modal        | `boolean` <br/> Whether the dialog should be the only visible content for screen readers, when set to `true`: <br/> - interaction with outside elements will be disabled. <br/> - scroll will be locked. <br/> - focus will be locked inside the dialog content. <br/> - elements outside the dialog content will not be visible for screen readers. |
-| forceMount   | `boolean` <br/> Used to force mounting the dialog (portal, overlay and content) when more control is needed. Useful when controlling animation with SolidJS animation libraries.                                                                                                                                                                     |
+| Prop          | Description                                                                                                                                                                                                                                                                                                                                          |
+| :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| open          | `boolean` <br/> The controlled open state of the dialog.                                                                                                                                                                                                                                                                                             |
+| defaultOpen   | `boolean` <br/> The default open state when initially rendered. Useful when you do not need to control the open state.                                                                                                                                                                                                                               |
+| onOpenChange  | `(open: boolean) => void` <br/> Event handler called when the open state of the dialog changes.                                                                                                                                                                                                                                                      |
+| id            | `string` <br/> A unique identifier for the component. The id is used to generate id attributes for nested components. If no id prop is provided, a generated id will be used.                                                                                                                                                                        |
+| modal         | `boolean` <br/> Whether the dialog should be the only visible content for screen readers, when set to `true`: <br/> - interaction with outside elements will be disabled. <br/> - scroll will be locked. <br/> - focus will be locked inside the dialog content. <br/> - elements outside the dialog content will not be visible for screen readers. |
+| preventScroll | `boolean` <br/> Whether the scroll should be locked even if the alert dialog is not modal.                                                                                                                                                                                                                                                           |
+| forceMount    | `boolean` <br/> Used to force mounting the dialog (portal, overlay and content) when more control is needed. Useful when controlling animation with SolidJS animation libraries.                                                                                                                                                                     |
 
 ### AlertDialog.Trigger