js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename tab-group => tab-list

Browse Source
This commit is contained in:
Cory LaViska
2020-06-12 07:04:14 -04:00
parent 005ca551bd
commit 5bd3a7743e
12 changed files with 180 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_sidebar.md
View File

@@ -30,9 +30,10 @@
- [Progress Ring](/components/progress-ring.md)
- [Radio](/components/radio.md)
- [Range](/components/range.md)
- [Select](/components/select.md)
- [Spinner](/components/spinner.md)
- [Switch](/components/switch.md)
- [Tab Group](/components/tab-group.md)
- [Tab List](/components/tab-list.md)
- [Tab](/components/tab.md)
- [Tab Panel](/components/tab-panel.md)
- [Textarea](/components/textarea.md)

31
docs/components/select.md Normal file
View File

@@ -0,0 +1,31 @@
# Select
[component-header:sl-select]
Selects...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```html preview
<sl-select>
<sl-dropdown-item>Option 1</sl-dropdown-item>
<sl-dropdown-item>Option 2</sl-dropdown-item>
<sl-dropdown-item>Option 3</sl-dropdown-item>
<sl-dropdown-divider></sl-dropdown-divider>
<sl-dropdown-item>Option 4</sl-dropdown-item>
<sl-dropdown-item>Option 5</sl-dropdown-item>
<sl-dropdown-item>Option 6</sl-dropdown-item>
</sl-select>
```
[component-metadata:sl-select]
## Examples
### Single
TODO
### Multi
TODO

28
docs/components/tab-group.md → docs/components/tab-list.md
View File

@@ -1,13 +1,13 @@
# Tab Group
# Tab List
[component-header:sl-tab-group]
[component-header:sl-tab-list]
Tab groups...
Tab lists...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```html preview
<sl-tab-group placement="top">
<sl-tab-list placement="top">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
@@ -17,17 +17,17 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
</sl-tab-list>
```
[component-metadata:sl-tab-group]
[component-metadata:sl-tab-list]
## Examples
### Tabs on Bottom
```html preview
<sl-tab-group placement="bottom">
<sl-tab-list placement="bottom">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
@@ -37,12 +37,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
</sl-tab-list>
```
### Tabs on Left
```html preview
<sl-tab-group placement="left">
<sl-tab-list placement="left">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
@@ -52,13 +52,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
</sl-tab-list>
```
### Tabs on Right
```html preview
<sl-tab-group placement="right">
<sl-tab-list placement="right">
<sl-tab slot="nav" panel="general">General</sl-tab>
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
@@ -68,13 +68,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tab-panel name="custom">Custom</sl-tab-panel>
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
</sl-tab-group>
</sl-tab-list>
```
### Scrolling Tabs
```html preview
<sl-tab-group>
<sl-tab-list>
<sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
<sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
<sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
@@ -116,5 +116,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
<sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
<sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
</sl-tab-group>
</sl-tab-list>
```

2
docs/components/tab-panel.md
View File

@@ -4,6 +4,6 @@
Tab panels...
A demonstration of this component can be found in the [tab group examples](/components/tab-group.md).
A demonstration of this component can be found in the [tab list examples](/components/tab-list.md).
[component-metadata:sl-tab-panel]

2
docs/components/tab.md
View File

@@ -4,6 +4,6 @@
Tabs...
A demonstration of this component can be found in the [tab group examples](/components/tab-group.md).
A demonstration of this component can be found in the [tab list examples](/components/tab-list.md).
[component-metadata:sl-tab]

2
docs/overview/roadmap.md
View File

@@ -26,7 +26,7 @@ The roadmap tracks the status of components and features that are planned, in de
- [ ] Select (single + multi)
- [x] Spinner
- [x] Switch
- [x] Tab Group
- [x] Tab List
- [x] Tab
- [x] Tab Panel
- [x] Textarea

63
src/components.d.ts vendored
View File

@@ -349,9 +349,9 @@ export namespace Components {
*/
"setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
/**
* The input's size, one of `small`, `medium`, or `large`.
* The input's size.
*/
"size": string;
"size": 'small' | 'medium' | 'large';
/**
* The input's step attribute.
*/
@@ -361,7 +361,7 @@ export namespace Components {
*/
"togglePassword": boolean;
/**
* The input's type, one of `text`, `number`, `email`, etc.
* The input's type.
*/
"type": 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
/**
@@ -461,6 +461,16 @@ export namespace Components {
*/
"value": number;
}
interface SlSelect {
/**
* Set to true to disable the select control.
*/
"disabled": boolean;
/**
* The select's size.
*/
"size": 'small' | 'medium' | 'large';
}
interface SlSpinner {
/**
* The spinner's size.
@@ -507,7 +517,7 @@ export namespace Components {
*/
"disabled": boolean;
/**
* The name of the tab panel the tab will control. The panel must exist in the same tab group.
* The name of the tab panel the tab will control. The panel must be located in the same tab list.
*/
"panel": string;
/**
@@ -519,7 +529,7 @@ export namespace Components {
*/
"setFocus": () => Promise<void>;
}
interface SlTabGroup {
interface SlTabList {
/**
* The placement of the tabs.
*/
@@ -768,6 +778,12 @@ declare global {
prototype: HTMLSlRangeElement;
new (): HTMLSlRangeElement;
};
interface HTMLSlSelectElement extends Components.SlSelect, HTMLStencilElement {
}
var HTMLSlSelectElement: {
prototype: HTMLSlSelectElement;
new (): HTMLSlSelectElement;
};
interface HTMLSlSpinnerElement extends Components.SlSpinner, HTMLStencilElement {
}
var HTMLSlSpinnerElement: {
@@ -786,11 +802,11 @@ declare global {
prototype: HTMLSlTabElement;
new (): HTMLSlTabElement;
};
interface HTMLSlTabGroupElement extends Components.SlTabGroup, HTMLStencilElement {
interface HTMLSlTabListElement extends Components.SlTabList, HTMLStencilElement {
}
var HTMLSlTabGroupElement: {
prototype: HTMLSlTabGroupElement;
new (): HTMLSlTabGroupElement;
var HTMLSlTabListElement: {
prototype: HTMLSlTabListElement;
new (): HTMLSlTabListElement;
};
interface HTMLSlTabPanelElement extends Components.SlTabPanel, HTMLStencilElement {
}
@@ -827,10 +843,11 @@ declare global {
"sl-progress-ring": HTMLSlProgressRingElement;
"sl-radio": HTMLSlRadioElement;
"sl-range": HTMLSlRangeElement;
"sl-select": HTMLSlSelectElement;
"sl-spinner": HTMLSlSpinnerElement;
"sl-switch": HTMLSlSwitchElement;
"sl-tab": HTMLSlTabElement;
"sl-tab-group": HTMLSlTabGroupElement;
"sl-tab-list": HTMLSlTabListElement;
"sl-tab-panel": HTMLSlTabPanelElement;
"sl-textarea": HTMLSlTextareaElement;
"sl-tooltip": HTMLSlTooltipElement;
@@ -1236,9 +1253,9 @@ declare namespace LocalJSX {
*/
"required"?: boolean;
/**
* The input's size, one of `small`, `medium`, or `large`.
* The input's size.
*/
"size"?: string;
"size"?: 'small' | 'medium' | 'large';
/**
* The input's step attribute.
*/
@@ -1248,7 +1265,7 @@ declare namespace LocalJSX {
*/
"togglePassword"?: boolean;
/**
* The input's type, one of `text`, `number`, `email`, etc.
* The input's type.
*/
"type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
/**
@@ -1356,6 +1373,16 @@ declare namespace LocalJSX {
*/
"value"?: number;
}
interface SlSelect {
/**
* Set to true to disable the select control.
*/
"disabled"?: boolean;
/**
* The select's size.
*/
"size"?: 'small' | 'medium' | 'large';
}
interface SlSpinner {
/**
* The spinner's size.
@@ -1406,11 +1433,11 @@ declare namespace LocalJSX {
*/
"disabled"?: boolean;
/**
* The name of the tab panel the tab will control. The panel must exist in the same tab group.
* The name of the tab panel the tab will control. The panel must be located in the same tab list.
*/
"panel"?: string;
}
interface SlTabGroup {
interface SlTabList {
/**
* Emitted when a tab is hidden.
*/
@@ -1586,10 +1613,11 @@ declare namespace LocalJSX {
"sl-progress-ring": SlProgressRing;
"sl-radio": SlRadio;
"sl-range": SlRange;
"sl-select": SlSelect;
"sl-spinner": SlSpinner;
"sl-switch": SlSwitch;
"sl-tab": SlTab;
"sl-tab-group": SlTabGroup;
"sl-tab-list": SlTabList;
"sl-tab-panel": SlTabPanel;
"sl-textarea": SlTextarea;
"sl-tooltip": SlTooltip;
@@ -1615,10 +1643,11 @@ declare module "@stencil/core" {
"sl-progress-ring": LocalJSX.SlProgressRing & JSXBase.HTMLAttributes<HTMLSlProgressRingElement>;
"sl-radio": LocalJSX.SlRadio & JSXBase.HTMLAttributes<HTMLSlRadioElement>;
"sl-range": LocalJSX.SlRange & JSXBase.HTMLAttributes<HTMLSlRangeElement>;
"sl-select": LocalJSX.SlSelect & JSXBase.HTMLAttributes<HTMLSlSelectElement>;
"sl-spinner": LocalJSX.SlSpinner & JSXBase.HTMLAttributes<HTMLSlSpinnerElement>;
"sl-switch": LocalJSX.SlSwitch & JSXBase.HTMLAttributes<HTMLSlSwitchElement>;
"sl-tab": LocalJSX.SlTab & JSXBase.HTMLAttributes<HTMLSlTabElement>;
"sl-tab-group": LocalJSX.SlTabGroup & JSXBase.HTMLAttributes<HTMLSlTabGroupElement>;
"sl-tab-list": LocalJSX.SlTabList & JSXBase.HTMLAttributes<HTMLSlTabListElement>;
"sl-tab-panel": LocalJSX.SlTabPanel & JSXBase.HTMLAttributes<HTMLSlTabPanelElement>;
"sl-textarea": LocalJSX.SlTextarea & JSXBase.HTMLAttributes<HTMLSlTextareaElement>;
"sl-tooltip": LocalJSX.SlTooltip & JSXBase.HTMLAttributes<HTMLSlTooltipElement>;

9
src/components/select/select.scss Normal file
View File

@@ -0,0 +1,9 @@
@import 'component';
:host {
display: block;
}
.sl-select {
outline: dotted 1px pink;
}

30
src/components/select/select.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Component, Prop, h } from '@stencil/core';
/**
* @since 1.0.0
* @status ready
*/
@Component({
tag: 'sl-select',
styleUrl: 'select.scss',
shadow: true
})
export class Select {
/** Set to true to disable the select control. */
@Prop() disabled = false;
/** The select's size. */
@Prop() size: 'small' | 'medium' | 'large' = 'medium';
render() {
return (
<sl-dropdown>
<div slot="trigger" class="sl-select__input" role="button" tabIndex={this.disabled ? -1 : 0}>
Select
</div>
<slot />
</sl-dropdown>
);
}
}

48
src/components/tab-group/tab-group.scss → src/components/tab-list/tab-list.scss
View File

@@ -5,23 +5,23 @@
display: block;
}
.sl-tab-group {
.sl-tab-list {
display: flex;
border: solid 1px transparent;
border-radius: 0;
.sl-tab-group__tabs {
.sl-tab-list__tabs {
display: flex;
position: relative;
}
.sl-tab-group__active-tab-indicator {
.sl-tab-list__active-tab-indicator {
position: absolute;
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
}
// Show a focus ring if the user is interacting with a keyboard
&:not(.sl-tab-group--using-keyboard) ::slotted(sl-tab) {
&:not(.sl-tab-list--using-keyboard) ::slotted(sl-tab) {
--focus-ring-box-shadow: none;
}
}
@@ -30,29 +30,29 @@
// Top + bottom
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-tab-group--top {
.sl-tab-list--top {
flex-direction: column;
.sl-tab-group__nav {
.sl-tab-list__nav {
display: flex;
order: 1;
overflow-x: auto;
@include hide-scrollbar();
}
.sl-tab-group__tabs {
.sl-tab-list__tabs {
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-bottom: solid 2px var(--sl-color-gray-90);
}
.sl-tab-group__active-tab-indicator {
.sl-tab-list__active-tab-indicator {
bottom: -2px;
border-bottom: solid 2px var(--sl-color-primary-50);
}
.sl-tab-group__body {
.sl-tab-list__body {
order: 2;
}
}
@@ -61,29 +61,29 @@
// Bottom
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-tab-group--bottom {
.sl-tab-list--bottom {
flex-direction: column;
.sl-tab-group__nav {
.sl-tab-list__nav {
display: flex;
order: 2;
overflow-x: auto;
@include hide-scrollbar();
}
.sl-tab-group__tabs {
.sl-tab-list__tabs {
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-top: solid 2px var(--sl-color-gray-90);
}
.sl-tab-group__active-tab-indicator {
.sl-tab-list__active-tab-indicator {
top: calc(-1 * 2px);
border-top: solid 2px var(--sl-color-primary-50);
}
.sl-tab-group__body {
.sl-tab-list__body {
order: 1;
}
}
@@ -92,25 +92,25 @@
// Left
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-tab-group--left {
.sl-tab-list--left {
flex-direction: row;
.sl-tab-group__nav {
.sl-tab-list__nav {
order: 1;
}
.sl-tab-group__tabs {
.sl-tab-list__tabs {
flex: 0 0 auto;
flex-direction: column;
border-right: solid 2px var(--sl-color-gray-90);
}
.sl-tab-group__active-tab-indicator {
.sl-tab-list__active-tab-indicator {
right: calc(-1 * 2px);
border-right: solid 2px var(--sl-color-primary-50);
}
.sl-tab-group__body {
.sl-tab-list__body {
flex: 1 1 auto;
order: 2;
}
@@ -120,25 +120,25 @@
// Right
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-tab-group--right {
.sl-tab-list--right {
flex-direction: row;
.sl-tab-group__nav {
.sl-tab-list__nav {
order: 2;
}
.sl-tab-group__tabs {
.sl-tab-list__tabs {
flex: 0 0 auto;
flex-direction: column;
border-left: solid 2px var(--sl-color-gray-90);
}
.sl-tab-group__active-tab-indicator {
.sl-tab-list__active-tab-indicator {
left: calc(-1 * 2px);
border-left: solid 2px var(--sl-color-primary-50);
}
.sl-tab-group__body {
.sl-tab-list__body {
flex: 1 1 auto;
order: 1;
}

40
src/components/tab-group/tab-group.tsx → src/components/tab-list/tab-list.tsx
View File

@@ -7,22 +7,22 @@ import { scrollIntoView } from '../../utilities/scroll';
* @since 1.0.0
* @status ready
*
* @slot nav - Used for grouping tabs in the tabs.
* @slot - Used for grouping tab panels in the tabs.
* @slot nav - Used for grouping tabs in the tab list.
* @slot - Used for grouping tab panels in the tab list.
*/
@Component({
tag: 'sl-tab-group',
styleUrl: 'tab-group.scss',
tag: 'sl-tab-list',
styleUrl: 'tab-list.scss',
shadow: true
})
export class Tab {
export class TabList {
activeTab: HTMLSlTabElement;
activeTabIndicator: HTMLElement;
body: HTMLElement;
keyboardDetector: KeyboardDetector;
nav: HTMLElement;
tabGroup: HTMLElement;
tabList: HTMLElement;
tabs: HTMLElement;
observer: MutationObserver;
@@ -31,7 +31,7 @@ export class Tab {
this.handleKeyDown = this.handleKeyDown.bind(this);
}
@Element() host: HTMLSlTabGroupElement;
@Element() host: HTMLSlTabListElement;
@State() isUsingKeyboard = false;
@@ -62,12 +62,12 @@ export class Tab {
whenUsing: () => (this.isUsingKeyboard = true),
whenNotUsing: () => (this.isUsingKeyboard = false)
});
this.keyboardDetector.observe(this.tabGroup);
this.keyboardDetector.observe(this.tabList);
}
componentDidUnload() {
this.observer.disconnect();
this.keyboardDetector.unobserve(this.tabGroup);
this.keyboardDetector.unobserve(this.tabList);
}
/** Shows the specified tab panel. */
@@ -210,28 +210,28 @@ export class Tab {
render() {
return (
<div
ref={el => (this.tabGroup = el)}
ref={el => (this.tabList = el)}
class={{
'sl-tab-group': true,
'sl-tab-group--using-keyboard': this.isUsingKeyboard,
'sl-tab-list': true,
'sl-tab-list--using-keyboard': this.isUsingKeyboard,
// Placements
'sl-tab-group--top': this.placement === 'top',
'sl-tab-group--bottom': this.placement === 'bottom',
'sl-tab-group--left': this.placement === 'left',
'sl-tab-group--right': this.placement === 'right'
'sl-tab-list--top': this.placement === 'top',
'sl-tab-list--bottom': this.placement === 'bottom',
'sl-tab-list--left': this.placement === 'left',
'sl-tab-list--right': this.placement === 'right'
}}
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
>
<div ref={el => (this.nav = el)} class="sl-tab-group__nav" tabindex="-1">
<div ref={el => (this.tabs = el)} class="sl-tab-group__tabs" role="tablist">
<div ref={el => (this.activeTabIndicator = el)} class="sl-tab-group__active-tab-indicator" />
<div ref={el => (this.nav = el)} class="sl-tab-list__nav" tabindex="-1">
<div ref={el => (this.tabs = el)} class="sl-tab-list__tabs" role="tablist">
<div ref={el => (this.activeTabIndicator = el)} class="sl-tab-list__active-tab-indicator" />
<slot name="nav" />
</div>
</div>
<div ref={el => (this.body = el)} class="sl-tab-group__body">
<div ref={el => (this.body = el)} class="sl-tab-list__body">
<slot />
</div>
</div>

2
src/components/tab/tab.tsx
View File

@@ -20,7 +20,7 @@ export class Tab {
@Element() host: HTMLSlTabElement;
/** The name of the tab panel the tab will control. The panel must exist in the same tab group. */
/** The name of the tab panel the tab will control. The panel must be located in the same tab list. */
@Prop() panel = '';
/** Set to true to draw the tab in an active state. */