Revise docs (#416)

* chore: add license badge to README

* perf(docs): ignore node_modules in markdown preprocessor

* docs: remove tabs for install commands on homepage

* docs(button-set): improve copy

* docs(button): improve usage for icon-only, link buttons

* docs: various copy improvements
This commit is contained in:
Eric Liu 2020-11-26 11:51:24 -08:00 committed by GitHub
commit b7bf9ea1f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 48 additions and 41 deletions

View file

@ -42,10 +42,18 @@ description: High-level description
### Icon-only button
<Button icon={Add16} hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" />
Set `hasIconOnly` to `true` to use the icon-only button variant.
**Note:** you must provide an `iconDescription` for the button tooltip.
The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively.
<Button hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} />
### Link button
If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.
<Button href="#">Link button</Button>
### Custom element

View file

@ -8,7 +8,9 @@ source: Button/ButtonSet.svelte
import Preview from "../../components/Preview.svelte";
</script>
### Default (juxtaposed)
### Default
Buttons in a button set are juxtaposed by default.
<ButtonSet>
<Button kind="secondary">Cancel</Button>
@ -17,6 +19,8 @@ source: Button/ButtonSet.svelte
### Stacked
Set `stacked` to `true` to use the stacked variant.
<ButtonSet stacked>
<Button icon={Login16}>Log in</Button>
<Button kind="ghost">Sign up</Button>

View file

@ -5,7 +5,7 @@
### Default
The `Search` component is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
<Search />