MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reworks buttons to use more ergonomic interface

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-09 15:21:51 +02:00
parent d0a655f75f
commit d304728a05
9 changed files with 89 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
}
}

0
packages/bbui/src/Menu/ActionMenu.svelte → packages/bbui/src/ActionMenu/ActionMenu.svelte
View File

50
packages/bbui/src/Button/Button.svelte
View File

@ -1,13 +1,13 @@
<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
@ -15,33 +15,25 @@
</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>

0
packages/bbui/src/Menu/Item.svelte Normal file
View File

38
packages/bbui/src/Menu/Menu.svelte
View File

@ -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>

15
packages/bbui/src/Menu/Section.svelte Normal file
View File

@ -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>

4
packages/bbui/src/index.js
View File

@ -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"

6
packages/builder/src/pages/builder/index.svelte
View File

@ -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}>

5
yarn.lock
View File

@ -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"