fix: rerelease menubar (#308)

kobaltedev · Jan 18, 2024 · 86827c8 · 86827c8
1 parent 05e043a
commit 86827c8
Show file tree

Hide file tree

Showing 23 changed files with 10,058 additions and 3,811 deletions.
diff --git a/.changeset/chilly-eels-kiss.md b/.changeset/chilly-eels-kiss.md
@@ -0,0 +1,9 @@
+---
+"@kobalte/core": patch
+---
+
+## v0.12.1 (January 18, 2024)
+
+**Bug fixes**
+
+- Rerelease [`Menubar`](https://kobalte.dev/docs/core/components/menubar), removed by mistake in `0.12.0`.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ For full documentation, visit [kobalte.dev](https://kobalte.dev/).
 
 ## Roadmap
 
-View roadmap, give feedback and vote for new features at https://kobalte.canny.io/.
+View roadmap, give feedback and vote for new features at https://github.com/orgs/kobaltedev/projects/4.
 
 ## Acknowledgment
 

diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -15,4 +15,4 @@ export const CORE_VERSIONS = [
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;
 
-export const LATEST_CORE_VERSION_NAME = "v0.12.0";
+export const LATEST_CORE_VERSION_NAME = "v0.12.1";
diff --git a/apps/docs/src/examples/menubar.module.css b/apps/docs/src/examples/menubar.module.css
@@ -0,0 +1,193 @@
+.menubar__root {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menubar__trigger {
+  appearance: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: auto;
+  outline: none;
+  padding: 0 16px;
+  background-color: #f6f6f7;
+  color: hsl(240 4% 16%);
+  font-size: 16px;
+  gap: 8px;
+  line-height: 0;
+  transition: 250ms background-color;
+}
+
+.menubar__trigger[data-highlighted="true"] {
+  background-color: hsl(200 98% 39%);
+  color: white;
+}
+
+.menubar__trigger:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.menubar__trigger:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.menubar__content,
+.menubar__sub-content {
+  min-width: 220px;
+  padding: 8px;
+  background-color: white;
+  border-radius: 6px;
+  border: 1px solid hsl(240 6% 90%);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  outline: none;
+  transform-origin: var(--kb-menu-content-transform-origin);
+  animation: contentHide 250ms ease-in forwards;
+}
+
+.menubar__content[data-expanded],
+.menubar__sub-content[data-expanded] {
+  animation: contentShow 250ms ease-out;
+}
+
+.menubar__item,
+.menubar__checkbox-item,
+.menubar__radio-item,
+.menubar__sub-trigger {
+  font-size: 16px;
+  line-height: 1;
+  color: hsl(240 4% 16%);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px 0 24px;
+  position: relative;
+  user-select: none;
+  outline: none;
+}
+
+.menubar__sub-trigger[data-expanded] {
+  background-color: hsl(204 94% 94%);
+  color: hsl(201 96% 32%);
+}
+
+.menubar__item[data-disabled],
+.menubar__checkbox-item[data-disabled],
+.menubar__radio-item[data-disabled],
+.menubar__sub-trigger[data-disabled] {
+  color: hsl(240 5% 65%);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.menubar__item[data-highlighted],
+.menubar__checkbox-item[data-highlighted],
+.menubar__radio-item[data-highlighted],
+.menubar__sub-trigger[data-highlighted] {
+  outline: none;
+  background-color: hsl(200 98% 39%);
+  color: white;
+}
+
+.menubar__group-label {
+  padding: 0 24px;
+  font-size: 14px;
+  line-height: 32px;
+  color: hsl(240 4% 46%);
+}
+
+.menubar__separator {
+  height: 1px;
+  border-top: 1px solid hsl(240 6% 90%);
+  margin: 6px;
+}
+
+.menubar__item-indicator {
+  position: absolute;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menubar__item-right-slot {
+  margin-left: auto;
+  padding-left: 20px;
+  font-size: 14px;
+  color: hsl(240 4% 46%);
+}
+
+[data-highlighted] > .menubar__item-right-slot {
+  color: white;
+}
+
+[data-disabled] .menubar__item-right-slot {
+  color: hsl(240 5% 65%);
+  opacity: 0.5;
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+[data-kb-theme="dark"] .menubar__trigger {
+  background-color: hsl(240 4% 16%);
+  color: hsl(0 100% 100% / 0.9);
+}
+
+[data-kb-theme="dark"] .menubar__content,
+[data-kb-theme="dark"] .menubar__sub-content {
+  border: 1px solid hsl(240 5% 26%);
+  background-color: hsl(240 4% 16%);
+  box-shadow: none;
+}
+
+[data-kb-theme="dark"] .menubar__group-label {
+  color: hsl(0 100% 100% / 0.7);
+}
+
+[data-kb-theme="dark"] .menubar__item,
+[data-kb-theme="dark"] .menubar__checkbox-item,
+[data-kb-theme="dark"] .menubar__radio-item,
+[data-kb-theme="dark"] .menubar__sub-trigger {
+  color: hsl(0 100% 100% / 0.9);
+}
+
+[data-kb-theme="dark"] .menubar__sub-trigger[data-expanded]:not([data-highlighted]) {
+  background-color: hsl(202 80% 24% / 0.7);
+  color: hsl(198 93% 60%);
+}
+
+[data-kb-theme="dark"] .menubar__separator {
+  border-color: hsl(240 5% 34%);
+}
+
+[data-kb-theme="dark"] .menubar__trigger[data-highlighted="true"] {
+  background-color: hsl(201 96% 32%);
+  color: hsla(0 100% 100% / 0.9);
+}
diff --git a/apps/docs/src/examples/menubar.tsx b/apps/docs/src/examples/menubar.tsx
@@ -0,0 +1,175 @@
+import { Menubar } from "@kobalte/core";
+import { createSignal } from "solid-js";
+
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "../components";
+import style from "./menubar.module.css";
+
+export function BasicExample() {
+  const [showGitLog, setShowGitLog] = createSignal(true);
+  const [showHistory, setShowHistory] = createSignal(false);
+  const [branch, setBranch] = createSignal("main");
+
+  return (
+    <Menubar.Root class={style["menubar__root"]}>
+      <Menubar.Menu>
+        <Menubar.Trigger class={style["menubar__trigger"]}>Git</Menubar.Trigger>
+        <Menubar.Portal>
+          <Menubar.Content class={style["menubar__content"]}>
+            <Menubar.Item class={style["menubar__item"]}>
+              Commit <div class={style["menubar__item-right-slot"]}>⌘+K</div>
+            </Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]}>
+              Push <div class={style["menubar__item-right-slot"]}>⇧+⌘+K</div>
+            </Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]} disabled>
+              Update Project <div class={style["menubar__item-right-slot"]}>⌘+T</div>
+            </Menubar.Item>
+            <Menubar.Sub overlap gutter={4} shift={-8}>
+              <Menubar.SubTrigger class={style["menubar__sub-trigger"]}>
+                GitHub
+                <div class={style["menubar__item-right-slot"]}>
+                  <ChevronRightIcon width={20} height={20} />
+                </div>
+              </Menubar.SubTrigger>
+              <Menubar.Portal>
+                <Menubar.SubContent class={style["menubar__sub-content"]}>
+                  <Menubar.Item class={style["menubar__item"]}>Create Pull Request…</Menubar.Item>
+                  <Menubar.Item class={style["menubar__item"]}>View Pull Requests</Menubar.Item>
+                  <Menubar.Item class={style["menubar__item"]}>Sync Fork</Menubar.Item>
+                  <Menubar.Separator class={style["menubar__separator"]} />
+                  <Menubar.Item class={style["menubar__item"]}>Open on GitHub</Menubar.Item>
+                </Menubar.SubContent>
+              </Menubar.Portal>
+            </Menubar.Sub>
+
+            <Menubar.Separator class={style["menubar__separator"]} />
+
+            <Menubar.CheckboxItem
+              class={style["menubar__checkbox-item"]}
+              checked={showGitLog()}
+              onChange={setShowGitLog}
+            >
+              <Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
+                <CheckIcon />
+              </Menubar.ItemIndicator>
+              Show Git Log
+            </Menubar.CheckboxItem>
+            <Menubar.CheckboxItem
+              class={style["menubar__checkbox-item"]}
+              checked={showHistory()}
+              onChange={setShowHistory}
+            >
+              <Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
+                <CheckIcon />
+              </Menubar.ItemIndicator>
+              Show History
+            </Menubar.CheckboxItem>
+
+            <Menubar.Separator class={style["menubar__separator"]} />
+
+            <Menubar.Group>
+              <Menubar.GroupLabel class={style["menubar__group-label"]}>
+                Branches
+              </Menubar.GroupLabel>
+              <Menubar.RadioGroup value={branch()} onChange={setBranch}>
+                <Menubar.RadioItem class={style["menubar__radio-item"]} value="main">
+                  <Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
+                    <DotFilledIcon />
+                  </Menubar.ItemIndicator>
+                  main
+                </Menubar.RadioItem>
+                <Menubar.RadioItem class={style["menubar__radio-item"]} value="develop">
+                  <Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
+                    <DotFilledIcon />
+                  </Menubar.ItemIndicator>
+                  develop
+                </Menubar.RadioItem>
+              </Menubar.RadioGroup>
+            </Menubar.Group>
+          </Menubar.Content>
+        </Menubar.Portal>
+      </Menubar.Menu>
+
+      <Menubar.Menu>
+        <Menubar.Trigger class={style["menubar__trigger"]}>File</Menubar.Trigger>
+        <Menubar.Portal>
+          <Menubar.Content class={style["menubar__content"]}>
+            <Menubar.Item class={style["menubar__item"]}>
+              New Tab <div class={style["menubar__item-right-slot"]}>⌘+T</div>
+            </Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]}>
+              New Window <div class={style["menubar__item-right-slot"]}>⌘+N</div>
+            </Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]} disabled>
+              New Incognito Window
+            </Menubar.Item>
+
+            <Menubar.Separator class={style["menubar__separator"]} />
+
+            <Menubar.Sub overlap gutter={4} shift={-8}>
+              <Menubar.SubTrigger class={style["menubar__sub-trigger"]}>
+                Share
+                <div class={style["menubar__item-right-slot"]}>
+                  <ChevronRightIcon width={20} height={20} />
+                </div>
+              </Menubar.SubTrigger>
+              <Menubar.Portal>
+                <Menubar.SubContent class={style["menubar__sub-content"]}>
+                  <Menubar.Item class={style["menubar__item"]}>Email Link</Menubar.Item>
+                  <Menubar.Item class={style["menubar__item"]}>Messages</Menubar.Item>
+                  <Menubar.Item class={style["menubar__item"]}>Notes</Menubar.Item>
+                </Menubar.SubContent>
+              </Menubar.Portal>
+            </Menubar.Sub>
+
+            <Menubar.Separator class={style["menubar__separator"]} />
+
+            <Menubar.Item class={style["menubar__item"]}>
+              Print... <div class={style["menubar__item-right-slot"]}>⌘+P</div>
+            </Menubar.Item>
+          </Menubar.Content>
+        </Menubar.Portal>
+      </Menubar.Menu>
+
+      <Menubar.Menu>
+        <Menubar.Trigger class={style["menubar__trigger"]}>Edit</Menubar.Trigger>
+        <Menubar.Portal>
+          <Menubar.Content class={style["menubar__content"]}>
+            <Menubar.Item class={style["menubar__item"]}>
+              Undo <div class={style["menubar__item-right-slot"]}>⌘+Z</div>
+            </Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]}>
+              Redo <div class={style["menubar__item-right-slot"]}>⇧+⌘+Z</div>
+            </Menubar.Item>
+
+            <Menubar.Separator class={style["menubar__separator"]} />
+
+            <Menubar.Sub overlap gutter={4} shift={-8}>
+              <Menubar.SubTrigger class={style["menubar__sub-trigger"]}>
+                Find
+                <div class={style["menubar__item-right-slot"]}>
+                  <ChevronRightIcon width={20} height={20} />
+                </div>
+              </Menubar.SubTrigger>
+              <Menubar.Portal>
+                <Menubar.SubContent class={style["menubar__sub-content"]}>
+                  <Menubar.Item class={style["menubar__item"]}>Search The Web</Menubar.Item>
+                  <Menubar.Separator class={style["menubar__separator"]} />
+                  <Menubar.Item class={style["menubar__item"]}>Find...</Menubar.Item>
+                  <Menubar.Item class={style["menubar__item"]}>Find Next</Menubar.Item>
+                  <Menubar.Item class={style["menubar__item"]}>Find Previous</Menubar.Item>
+                </Menubar.SubContent>
+              </Menubar.Portal>
+            </Menubar.Sub>
+
+            <Menubar.Separator class={style["menubar__separator"]} />
+
+            <Menubar.Item class={style["menubar__item"]}>Cut</Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]}>Copy</Menubar.Item>
+            <Menubar.Item class={style["menubar__item"]}>Paste</Menubar.Item>
+          </Menubar.Content>
+        </Menubar.Portal>
+      </Menubar.Menu>
+    </Menubar.Root>
+  );
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@ export const CORE_VERSIONS = [

		export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

		export const LATEST_CORE_VERSION_NAME = "v0.12.0";
		export const LATEST_CORE_VERSION_NAME = "v0.12.1";