Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Organize the Lexicon Core Components session according to the proposal in clayui.com | Fixes #1111 #1195

Merged
merged 47 commits into from
Sep 25, 2018
Merged

Organize the Lexicon Core Components session according to the proposal in clayui.com | Fixes #1111 #1195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
e8418cf
Fixes #1111 | Make buttons page compatible with Lexicon website
diegonvs Sep 18, 2018
63cd387
Fixes #1111 | Change section of "Other Form Elements" to CSS Framework
diegonvs Sep 18, 2018
c8204b2
Fixes #1111 | Move Modals@InlineScroller and Modals@ModalHelpers to C…
diegonvs Sep 18, 2018
c6e9379
Fixes #1111 | Typo
diegonvs Sep 18, 2018
10e9a58
Fixes #1111 | Split Table into Table and Inline Edit Table
diegonvs Sep 18, 2018
f2e1333
Fixes #1111 | Missing button markup example
diegonvs Sep 19, 2018
016934b
Fixes #1111 | Finish moving button-group page to css-framework/satell…
diegonvs Sep 19, 2018
fa36d22
Fixes #1111 | Adds dataset-display page
diegonvs Sep 19, 2018
6cb95a3
Fixes #1111 | Link dataset-display on each dataset-display related co…
diegonvs Sep 19, 2018
9f6c4c4
Fixes #1111 | Missing management toolbar hyperlink
diegonvs Sep 19, 2018
d936ca1
Fixes #1111 | Adds clay-link component documentation
diegonvs Sep 19, 2018
369c2d3
Fixes #1111 | Adds tabs page
diegonvs Sep 20, 2018
d8e02a8
Fixes #1111 | Missing modal-helpers and algolia ids
diegonvs Sep 20, 2018
9f97daf
Fixes #1111 | Move images aspect ratio to css-framework satellites
diegonvs Sep 20, 2018
0086577
Fixes #1111 | Finish moving button-group to css-framework/satellites
diegonvs Sep 20, 2018
501910e
Fixes #1111 | Move nav from lexicon core components to css satellites
diegonvs Sep 20, 2018
e21a434
Fixes #1111 | Missing table redirect
diegonvs Sep 20, 2018
b515564
Fixes #1111 | Move info panel to css-framework satellites
diegonvs Sep 20, 2018
aaf90d0
Fixes #1111 | Missing Dropdown with Other Form Elements satellite exa…
diegonvs Sep 20, 2018
5a8259f
Fixes #1111 - Adding an description and fix icons links to the Datase…
matuzalemsteles Sep 21, 2018
b2602d1
Fixes #1111 - Add Checkbox, Radio, and Toggle page consistent with th…
matuzalemsteles Sep 21, 2018
c2980f8
Fixes #1111 - Move components/header.md --> css-framework/satellites/…
matuzalemsteles Sep 21, 2018
d98b287
Fixes #1111 - Move components/timelines.md --> css-framework/satellit…
matuzalemsteles Sep 21, 2018
c047499
Fixes #1111 - Add css-framework/satellites/navigation section
matuzalemsteles Sep 21, 2018
b5ea433
Fixes #1111 - Add Loading Indicator page
matuzalemsteles Sep 21, 2018
4d3eb61
Fixes #1111 - Remove script unnecessary from List page
matuzalemsteles Sep 21, 2018
c53a8f4
Fixes #1111 - Fix examples of the soy and web componentes from the li…
matuzalemsteles Sep 21, 2018
bd97388
Fixes #1111 - Remove Nav Tabs and Nav Underline page
matuzalemsteles Sep 21, 2018
ea0bc58
Fixes #1111 - Remove unnecessary Panels page
matuzalemsteles Sep 21, 2018
0b4e664
Fixes #1111 - Fix indentation of titles from the Tabs page
matuzalemsteles Sep 21, 2018
67fadf2
Fixes #1111 - Fix indentation of titles from the Breadcrumbs page
matuzalemsteles Sep 21, 2018
6c761d3
Fixes #1111 - Move the Info Panel page to the new Sidebar section
matuzalemsteles Sep 21, 2018
1eaf387
Fixes #1111 - Remove the unnecessary script and add description to th…
matuzalemsteles Sep 21, 2018
aac7bcf
Fixes #1111 - Add description to Popovers and Tooltips page
matuzalemsteles Sep 21, 2018
27f9fa1
Fixes #1111 - Adds Text Input page
matuzalemsteles Sep 21, 2018
bf847ea
Fixes #1111 - Remove Toggle Switch from the Components section
matuzalemsteles Sep 21, 2018
6f2a61f
Fixes #1111 - Add description to the Pagination page
matuzalemsteles Sep 21, 2018
4e4963b
Fixes #1111 - Adds Text Input Group page
matuzalemsteles Sep 24, 2018
efce672
Fixes #1111 - Adds Text Input Localizable page
matuzalemsteles Sep 24, 2018
7fbd666
Fixes #1111 - Adds Text Input Variations page
matuzalemsteles Sep 24, 2018
3b2d28f
Fixes #1111 - Adds Forms page
matuzalemsteles Sep 24, 2018
b3f7083
Fixes #1111 - Adds Forms Navigation page
matuzalemsteles Sep 24, 2018
7798c5c
Fixes #1111 - Update the section title of the pages and replace butto…
matuzalemsteles Sep 24, 2018
d988503
Fixes #1111 - Adds Selectors page
matuzalemsteles Sep 24, 2018
9f7c726
Fixes #1111 - Move Form Elements (Input Groups), Form Elements (Valid…
matuzalemsteles Sep 24, 2018
7d82f3e
Fixes #1111 - Rename the forms.md file to form-elements.md
matuzalemsteles Sep 24, 2018
546eb2b
Fixes #1111 - Fix sort from menu
matuzalemsteles Sep 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 77 additions & 7 deletions clayui.com/content/docs/components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,66 @@ Buttons communicate an action to happen on user interaction.

<div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/buttons.html">Buttons Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>

<article id="clay-button">
<article id="types">

### Types

#### Primary

<button class="btn btn-primary" type="button">Primary</button>

```soy
{call ClayButton.render}
{param label: 'Primary' /}
{param type: 'button' /}
{/call}
```
```html
<clay-button label="Primary" type="button"></clay-button>
```
```html
<button class="btn btn-primary" type="button">Primary</button>
```

#### Secondary

<button class="btn btn-secondary" type="button">Secondary</button>

```soy
{call ClayButton.render}
{param label: 'Secondary' /}
{param style: 'secondary' /}
{param type: 'button' /}
{/call}
```
```html
<clay-button label="Secondary" style="secondary" type="button"></clay-button>
```
```html
<button class="btn btn-secondary" type="button">Secondary</button>
```

#### Link

<button class="btn btn-link" type="button">Link</button>

```soy
{call ClayButton.render}
{param label: 'Link' /}
{param style: 'link' /}
{param type: 'button' /}
{/call}
```
```html
<clay-button label="Link" style="link" type="button"></clay-button>
```
```html
<button class="btn btn-link" type="button">Link</button>
```

</article>

<article id="states">

### States

Expand Down Expand Up @@ -171,28 +230,39 @@ Buttons communicate an action to happen on user interaction.

### Sizes

#### Small

<button class="btn btn-primary btn-sm" type="button">Small</button>
<button class="btn btn-primary" type="button">Default</button>

```soy
{call ClayButton.render}
{param label: 'Small' /}
{param size: 'sm' /}
{/call}
```
```html
<clay-button label="Small" size="sm"></clay-button>
```
```html
<button class="btn btn-secondary btn-sm" type="button">Small</button>

<button class="btn btn-secondary" type="button">Default</button>
```

#### Default

<button class="btn btn-primary" type="button">Default</button>

```soy
{call ClayButton.render}
{param label: 'Default' /}
{/call}
```
```html
<clay-button label="Small" size="sm"></clay-button>

<clay-button label="Default"></clay-button>
```
```html
<button class="btn btn-secondary btn-sm" type="button">Small</button>

<button class="btn btn-secondary" type="button">Default</button>
<button class="btn btn-primary" type="button">Default</button>
```

</article>
Expand Down
4 changes: 4 additions & 0 deletions clayui.com/content/docs/components/cards.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1248,4 +1248,8 @@ Cards are a very specific visual representation of data.
[APITable "clay-card/src/ClayHorizontalCard.js"]
</div>

</article>

<article id="more-examples">
More examples can be found in <a href="/docs/components/dataset-display.html">dataset template</a>.
</article>
629 changes: 629 additions & 0 deletions clayui.com/content/docs/components/dataset-display.md
View file
Open in desktop

Large diffs are not rendered by default.

72 changes: 0 additions & 72 deletions clayui.com/content/docs/components/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,78 +272,6 @@ A dropdown is a list of options related to the element that triggers it.
</div>
```

#### Dropdown with Other Form Elements

<div class="clay-site-dropdown-menu-container">
<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
<li class="dropdown-section form-group">
<label for="basicInputTypeText1">
Text 1
</label>
<input class="form-control form-control-sm" id="basicInputTypeText1" placeholder="Placeholder" type="text">
</li>
<li class="dropdown-subheader">Form Section</li>
<li class="dropdown-section">
<div class="form-group">
<label for="basicInputTypeText2">
Text 2
</label>
<input class="form-control form-control-sm" id="basicInputTypeText2" placeholder="Placeholder" type="text">
</div>
</li>
<li class="dropdown-section">
<div class="form-group">
<label for="basicInputTypeText3">
Text 3
</label>
<input class="form-control form-control-sm" id="basicInputTypeText3" placeholder="Placeholder" type="text">
</div>
<div class="form-group">
<label for="basicInputTypeTextarea">Textarea</label>
<textarea class="form-control form-control-sm" id="basicInputTypeTextarea" placeholder="Placeholder"></textarea>
</div>
</li>
<li class="dropdown-subheader">Order by</li>
<li><a class="active dropdown-item" href="#1">Author</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
</ul>
</div>

```html
<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
<li class="dropdown-section form-group">
<label for="basicInputTypeText1">
Text 1
</label>
<input class="form-control form-control-sm" id="basicInputTypeText1" placeholder="Placeholder" type="text">
</li>
<li class="dropdown-subheader">Form Section</li>
<li class="dropdown-section">
<div class="form-group">
<label for="basicInputTypeText2">
Text 2
</label>
<input class="form-control form-control-sm" id="basicInputTypeText2" placeholder="Placeholder" type="text">
</div>
</li>
<li class="dropdown-section">
<div class="form-group">
<label for="basicInputTypeText3">
Text 3
</label>
<input class="form-control form-control-sm" id="basicInputTypeText3" placeholder="Placeholder" type="text">
</div>
<div class="form-group">
<label for="basicInputTypeTextarea">Textarea</label>
<textarea class="form-control form-control-sm" id="basicInputTypeTextarea" placeholder="Placeholder"></textarea>
</div>
</li>
<li class="dropdown-subheader">Order by</li>
<li><a class="active dropdown-item" href="#1">Author</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
</ul>
```

#### Dropdown with search field

> Sometimes action menus face problems with the number of elements they contain. This dropdown menu variation helps in those contexts where the set of options is large and a search mechanism helps to reduce the search time and task complexity.
Expand Down
Loading