From 5bd3a7743ee03d458b960ea2eba33ec2e504690e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 12 Jun 2020 07:04:14 -0400 Subject: [PATCH] Rename tab-group => tab-list --- docs/_sidebar.md | 3 +- docs/components/select.md | 31 +++++++++ docs/components/{tab-group.md => tab-list.md} | 28 ++++----- docs/components/tab-panel.md | 2 +- docs/components/tab.md | 2 +- docs/overview/roadmap.md | 2 +- src/components.d.ts | 63 ++++++++++++++----- src/components/select/select.scss | 9 +++ src/components/select/select.tsx | 30 +++++++++ .../tab-group.scss => tab-list/tab-list.scss} | 48 +++++++------- .../tab-group.tsx => tab-list/tab-list.tsx} | 40 ++++++------ src/components/tab/tab.tsx | 2 +- 12 files changed, 180 insertions(+), 80 deletions(-) create mode 100644 docs/components/select.md rename docs/components/{tab-group.md => tab-list.md} (93%) create mode 100644 src/components/select/select.scss create mode 100644 src/components/select/select.tsx rename src/components/{tab-group/tab-group.scss => tab-list/tab-list.scss} (80%) rename src/components/{tab-group/tab-group.tsx => tab-list/tab-list.tsx} (85%) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 435bba436..3d53f5ee3 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -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) diff --git a/docs/components/select.md b/docs/components/select.md new file mode 100644 index 000000000..fb07a2d25 --- /dev/null +++ b/docs/components/select.md @@ -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 + + Option 1 + Option 2 + Option 3 + + Option 4 + Option 5 + Option 6 + +``` + +[component-metadata:sl-select] + +## Examples + +### Single + +TODO + +### Multi + +TODO diff --git a/docs/components/tab-group.md b/docs/components/tab-list.md similarity index 93% rename from docs/components/tab-group.md rename to docs/components/tab-list.md index 64611d819..b35ce625a 100644 --- a/docs/components/tab-group.md +++ b/docs/components/tab-list.md @@ -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 - + General Custom Advanced @@ -17,17 +17,17 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Custom Advanced Disabled - + ``` -[component-metadata:sl-tab-group] +[component-metadata:sl-tab-list] ## Examples ### Tabs on Bottom ```html preview - + General Custom Advanced @@ -37,12 +37,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Custom Advanced Disabled - + ``` ### Tabs on Left ```html preview - + General Custom Advanced @@ -52,13 +52,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Custom Advanced Disabled - + ``` ### Tabs on Right ```html preview - + General Custom Advanced @@ -68,13 +68,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Custom Advanced Disabled - + ``` ### Scrolling Tabs ```html preview - + Tab 1 Tab 2 Tab 3 @@ -116,5 +116,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Tab panel 18 Tab panel 19 Tab panel 20 - + ``` diff --git a/docs/components/tab-panel.md b/docs/components/tab-panel.md index 9e47478e3..4832c6320 100644 --- a/docs/components/tab-panel.md +++ b/docs/components/tab-panel.md @@ -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] diff --git a/docs/components/tab.md b/docs/components/tab.md index 39a465fba..a18451095 100644 --- a/docs/components/tab.md +++ b/docs/components/tab.md @@ -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] diff --git a/docs/overview/roadmap.md b/docs/overview/roadmap.md index 3fa93d8e7..48db5bc87 100644 --- a/docs/overview/roadmap.md +++ b/docs/overview/roadmap.md @@ -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 diff --git a/src/components.d.ts b/src/components.d.ts index 463774be4..838ef7ae3 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -349,9 +349,9 @@ export namespace Components { */ "setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise; /** - * 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; } - 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; "sl-radio": LocalJSX.SlRadio & JSXBase.HTMLAttributes; "sl-range": LocalJSX.SlRange & JSXBase.HTMLAttributes; + "sl-select": LocalJSX.SlSelect & JSXBase.HTMLAttributes; "sl-spinner": LocalJSX.SlSpinner & JSXBase.HTMLAttributes; "sl-switch": LocalJSX.SlSwitch & JSXBase.HTMLAttributes; "sl-tab": LocalJSX.SlTab & JSXBase.HTMLAttributes; - "sl-tab-group": LocalJSX.SlTabGroup & JSXBase.HTMLAttributes; + "sl-tab-list": LocalJSX.SlTabList & JSXBase.HTMLAttributes; "sl-tab-panel": LocalJSX.SlTabPanel & JSXBase.HTMLAttributes; "sl-textarea": LocalJSX.SlTextarea & JSXBase.HTMLAttributes; "sl-tooltip": LocalJSX.SlTooltip & JSXBase.HTMLAttributes; diff --git a/src/components/select/select.scss b/src/components/select/select.scss new file mode 100644 index 000000000..382ad3a22 --- /dev/null +++ b/src/components/select/select.scss @@ -0,0 +1,9 @@ +@import 'component'; + +:host { + display: block; +} + +.sl-select { + outline: dotted 1px pink; +} diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx new file mode 100644 index 000000000..07c914373 --- /dev/null +++ b/src/components/select/select.tsx @@ -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 ( + +
+ Select +
+ + + ); + } +} diff --git a/src/components/tab-group/tab-group.scss b/src/components/tab-list/tab-list.scss similarity index 80% rename from src/components/tab-group/tab-group.scss rename to src/components/tab-list/tab-list.scss index 0a18f66b6..0c3a72d86 100644 --- a/src/components/tab-group/tab-group.scss +++ b/src/components/tab-list/tab-list.scss @@ -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; } diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-list/tab-list.tsx similarity index 85% rename from src/components/tab-group/tab-group.tsx rename to src/components/tab-list/tab-list.tsx index 17be89e62..9bf8308eb 100644 --- a/src/components/tab-group/tab-group.tsx +++ b/src/components/tab-list/tab-list.tsx @@ -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 (
(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} > -
(this.nav = el)} class="sl-tab-group__nav" tabindex="-1"> -
(this.tabs = el)} class="sl-tab-group__tabs" role="tablist"> -
(this.activeTabIndicator = el)} class="sl-tab-group__active-tab-indicator" /> +
(this.nav = el)} class="sl-tab-list__nav" tabindex="-1"> +
(this.tabs = el)} class="sl-tab-list__tabs" role="tablist"> +
(this.activeTabIndicator = el)} class="sl-tab-list__active-tab-indicator" />
-
(this.body = el)} class="sl-tab-group__body"> +
(this.body = el)} class="sl-tab-list__body">
diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx index 9a879c3f3..2b4d1a84e 100644 --- a/src/components/tab/tab.tsx +++ b/src/components/tab/tab.tsx @@ -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. */