reworks buttons to use more ergonomic interface

himanshudhami · Apr 9, 2021 · d304728 · d304728
1 parent d0a655f
commit d304728
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/link": "^3.1.1",
+    "@spectrum-css/menu": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1"
   }
 }
diff --git a/packages/bbui/src/Menu/ActionMenu.svelte → ...ges/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/Menu/ActionMenu.svelte → ...ges/bbui/src/ActionMenu/ActionMenu.svelte
diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
@@ -1,47 +1,39 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
 
-  export let href = false
   export let disabled = false
 
   /** @type {('S', 'M', 'L', 'XL')} Size of button */
   export let size = "M";
-  /** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
-  export let type = "primary"
+
+  // Types
+  export let cta, primary, secondary, warning, overBackground;
 
   export let quiet = false
   
   export let icon = undefined;
 </script>
 
 
-{#if href}
-  <a
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()}"
-    {href}
-    {disabled}>
-    {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
+<button
+  class:spectrum-Button--cta={cta}
+  class:spectrum-Button--primary={primary}
+  class:spectrum-Button--secondary={secondary}
+  class:spectrum-Button--warning={warning}
+  class:spectrum-Button--overBackground={overBackground}
+  class:spectrum-Button--quiet={quiet}
+  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+  {disabled}
+  on:click|preventDefault>
+  {#if icon}
+    <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots} 
     <span class="spectrum-Button-label"><slot /></span>
-  </a>
-{:else}
-  <button
-    class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()} {quiet && 'spectrum-Button--quiet'}"
-    {disabled}
-    on:click|preventDefault>
-    {#if icon}
-      <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    {#if $$slots} 
-      <span class="spectrum-Button-label"><slot /></span>
-    {/if}
-  </button>
-{/if}
+  {/if}
+</button>
 
 <style>
 

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte
@@ -0,0 +1,38 @@
+<script>
+    import "@spectrum-css/menu/dist/index-vars.css"
+</script>
+
+<ul class="spectrum-Menu" role="menu">
+    <li role="presentation">
+      <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section Heading</span>
+      <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+          <span class="spectrum-Menu-itemLabel">Action 1</span>
+        </li>
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+          <span class="spectrum-Menu-itemLabel">Action 2</span>
+        </li>
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+          <span class="spectrum-Menu-itemLabel">Action 3</span>
+        </li>
+      </ul>
+    </li>
+    <li class="spectrum-Menu-divider" role="separator"></li>
+    <li role="presentation">
+      <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
+      <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
+            <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
+          </svg>
+          <span class="spectrum-Menu-itemLabel">Save</span>
+        </li>
+        <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
+            <use xlink:href="#spectrum-icon-18-DataDownload"></use>
+          </svg>
+          <span class="spectrum-Menu-itemLabel">Download</span>
+        </li>
+      </ul>
+    </li>
+</ul>
diff --git a/packages/bbui/src/Menu/Section.svelte b/packages/bbui/src/Menu/Section.svelte
@@ -0,0 +1,15 @@
+<span class="spectrum-Menu-sectionHeading"><slot /></span>
+<li role="presentation">
+<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section Heading</span>
+    <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+            <span class="spectrum-Menu-itemLabel">Action 1</span>
+        </li>
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+            <span class="spectrum-Menu-itemLabel">Action 2</span>
+        </li>
+        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+            <span class="spectrum-Menu-itemLabel">Action 3</span>
+        </li>
+    </ul>
+</li>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
@@ -10,6 +10,7 @@ export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
@@ -25,6 +26,9 @@ export { default as Heading } from "./Styleguide/Heading.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
+export { default as Menu } from "./Menu/Menu.svelte"
+export { default as MenuSection } from "./Menu/Section.svelte"
+export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"

diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Menu, MenuSection, MenuItem } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -75,6 +75,10 @@
   <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
+
+  <div class="just-a-menu-test">
+    <Menu />
+  </div>
 </div>
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>

diff --git a/yarn.lock b/yarn.lock
@@ -839,6 +839,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
   integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
 
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
+  integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"