tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Budibase is an open-source low-code platform for creating internal apps in minutes. Supports PostgreSQL, MySQL, MSSQL, MongoDB, Rest API, Docker, K8s 🚀
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8029 Commits
2 Branches
842 Tags
313 MiB
 
 
 
 
 
 
Tree: c8b772b8c1
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c8b772b8c1'
${ noResults }
budibase/packages/standard-components/node_modules/@spectrum-css/button/metadata/button-primary.yml

176 lines
8.0 KiB
Raw Blame History

name: Button - Primary
status: Verified
description: The primary button is used for medium emphasis.
SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Primary
sections:
- name: Migration Guide
description: |
### T-shirt sizing
Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
### Change workflow icon size
Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
| Button classname | Workflow icon classname |
| -------------------------- | --------------------------------- |
| `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` |
| `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` |
| `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
| `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
examples:
- id: button-primary
name: Sizing
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeS">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeS">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeM">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeM">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeL">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeL">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeXL">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeXL">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
</div>
- id: button-primary
name: Standard - Disabled
markup: |
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary" disabled>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
- id: button-quiet-primary
name: Primary (quiet)
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeS">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeS">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeM">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeM">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeL">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeL">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeXL">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeXL">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
</div>
</div>
- id: button-quiet-primary
name: Primary (quiet) - Disabled
markup: |
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-Button--quiet" disabled>
<span class="spectrum-Button-label">Button</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-Button--quiet" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>