Skip to content

Commit

Permalink
fix(tabs): add "quiet", "compact", and "emphasized" "direction=vertical"
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook Johnson authored and Westbrook committed Sep 1, 2022
1 parent 283d10a commit 26fff53
Show file tree
Hide file tree
Showing 6 changed files with 274 additions and 40 deletions.
190 changes: 154 additions & 36 deletions packages/tabs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,36 @@ import {
</sp-tab-panel>
</sp-tabs>

### Disabled
## Horizontal Tabs

An `<sp-tabs>` element will display horizontally by default. It can be modified with states like `compact`, `disabled`, and `quiet`, or with content like icons, etc.

<sp-tabs selected="compact" auto label="Horizontal Tabs variants">
<sp-tab value="compact">Compact</sp-tab>
<sp-tab-panel value="compact">

Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.

```html demo
<sp-tabs selected="1" compact>
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
<sp-tab label="Tab 4" value="4"></sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

</sp-tab-panel>
<sp-tab value="disabled">Disabled</sp-tab>
<sp-tab-panel value="disabled">

When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` children will be disabled as well, preventing a visitor from changing the selected tab. By default, `<sp-tab-panel>` children will not be addressed and the available content of the currently selected tab will be fully visible.

```html
```html demo
<sp-tabs selected="2" disabled>
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
Expand All @@ -120,10 +145,37 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
</sp-tabs>
```

### Vertical
</sp-tab-panel>
<sp-tab value="icons">Icons</sp-tab>
<sp-tab-panel value="icons">

```html
<sp-tabs selected="1" direction="vertical">
```html demo
<sp-tabs selected="1">
<sp-tab label="Tab 1" value="1">
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab label="Tab 2" value="2">
<sp-icon-close slot="icon"></sp-icon-close>
</sp-tab>
<sp-tab label="Tab 3" value="3">
<sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
</sp-tab>
<sp-tab label="Tab 4" value="4">
<sp-icon-help slot="icon"></sp-icon-help>
</sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

</sp-tab-panel>
<sp-tab value="quiet">Quiet</sp-tab>
<sp-tab-panel value="quiet">

```html demo
<sp-tabs selected="1" quiet>
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
Expand All @@ -135,12 +187,38 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
</sp-tabs>
```

## Variants
</sp-tab-panel>
<sp-tab value="quiet+compact">Quiet + Compact</sp-tab>
<sp-tab-panel value="quiet+compact">

### Quiet
```html demo
<sp-tabs selected="1" quiet compact>
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
<sp-tab label="Tab 4" value="4"></sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

```html
<sp-tabs selected="1" quiet>
</sp-tab-panel>
</sp-tabs>

## Vertical Tabs

An `<sp-tabs>` element will display horizontally by default. It can be modified with states like `compact`, `disabled`, and `quiet`, or with content like icons, etc.

<sp-tabs selected="compact" auto label="Horizontal Tabs variants">
<sp-tab value="compact">Compact</sp-tab>
<sp-tab-panel value="compact">

Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead.

```html demo
<sp-tabs selected="1" compact direction="vertical">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
Expand All @@ -152,47 +230,87 @@ When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` chi
</sp-tabs>
```

### Compact
</sp-tab-panel>
<sp-tab value="disabled">Disabled</sp-tab>
<sp-tab-panel value="disabled">

```html
<sp-tabs selected="1" compact>
When an `<sp-tabs>` element is given the `disabled` attribute its `<sp-tab>` children will be disabled as well, preventing a visitor from changing the selected tab. By default, `<sp-tab-panel>` children will not be addressed and the available content of the currently selected tab will be fully visible.

```html demo
<sp-tabs selected="2" disabled direction="vertical">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
<sp-tab label="Tab 4" value="4"></sp-tab>
<sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
</sp-tabs>
```

</sp-tab-panel>
<sp-tab value="icons">Icons</sp-tab>
<sp-tab-panel value="icons">

```html demo
<sp-tabs selected="1" direction="vertical">
<sp-tab label="Tab 1" value="1">
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab label="Tab 2" value="2">
<sp-icon-close slot="icon"></sp-icon-close>
</sp-tab>
<sp-tab label="Tab 3" value="3">
<sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
</sp-tab>
<sp-tab label="Tab 4" value="4">
<sp-icon-help slot="icon"></sp-icon-help>
</sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

## With icons

```html
<div>
<sp-icons-medium></sp-icons-medium>
<sp-tabs selected="1" direction="horizontal">
<sp-tab label="Tab 1" value="1">
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
</sp-tab>
<sp-tab label="Tab 2" value="2">
<sp-icon-close slot="icon"></sp-icon-close>
</sp-tab>
<sp-tab label="Tab 3" value="3">
<sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
</sp-tab>
<sp-tab label="Tab 4" value="4">
<sp-icon-help slot="icon"></sp-icon-help>
</sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
</div>
</sp-tab-panel>
<sp-tab value="quiet">Quiet</sp-tab>
<sp-tab-panel value="quiet">

```html demo
<sp-tabs selected="1" quiet direction="vertical">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
<sp-tab label="Tab 4" value="4"></sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

</sp-tab-panel>
<sp-tab value="quiet+compact">Quiet + Compact</sp-tab>
<sp-tab-panel value="quiet+compact">

```html demo
<sp-tabs selected="1" quiet compact direction="vertical">
<sp-tab label="Tab 1" value="1"></sp-tab>
<sp-tab label="Tab 2" value="2"></sp-tab>
<sp-tab label="Tab 3" value="3"></sp-tab>
<sp-tab label="Tab 4" value="4"></sp-tab>
<sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
<sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
<sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

</sp-tab-panel>
</sp-tabs>

## Accessibility

When an `<sp-tabs>` has a `selected` value, the `<sp-tab>` child of that `value` will be given `[tabindex="0"]` and will receive initial focus when tabbing into the `<sp-tabs>` element. When no `selected` value is present, the first `<sp-tab>` child will be treated in this way. When focus is currently within the `<sp-tabs>` element, the left and right arrows will move that focus back and forth through the available `<sp-tab>` children.
1 change: 1 addition & 0 deletions packages/tabs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^1.0.1",
"@spectrum-web-components/base": "^0.7.0",
"@spectrum-web-components/reactive-controllers": "^0.3.0",
"@spectrum-web-components/shared": "^0.15.0",
Expand Down
29 changes: 27 additions & 2 deletions packages/tabs/src/Tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
query,
} from '@spectrum-web-components/base/src/decorators.js';
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
import { IntersectionController } from '@lit-labs/observers/intersection_controller.js';
import { Tab } from './Tab.js';
import { Focusable } from '@spectrum-web-components/shared';
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
Expand All @@ -36,8 +37,6 @@ const noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';
*
* @slot - Tab elements to manage as a group
* @slot tab-panel - Tab Panel elements related to the listed Tab elements
* @attr {Boolean} quiet - The tabs border is a lot smaller
* @attr {Boolean} compact - The collection of tabs take up less space
* @csspart tablist - Container element for the slotted sp-tab elements
*
* @fires change - The selected Tab child has changed.
Expand All @@ -58,6 +57,12 @@ export class Tabs extends SizedMixin(Focusable) {
@property({ type: Boolean })
public auto = false;

/**
* The tab items are displayed closer together.
*/
@property({ type: Boolean, reflect: true })
public compact = false;

@property({ reflect: true })
public direction: 'vertical' | 'vertical-right' | 'horizontal' =
'horizontal';
Expand All @@ -68,6 +73,12 @@ export class Tabs extends SizedMixin(Focusable) {
@property()
public label = '';

/**
* The tab list is displayed without a border.
*/
@property({ type: Boolean, reflect: true })
public quiet = false;

@property({ attribute: false })
public selectionIndicatorStyle = noSelectionStyle;

Expand Down Expand Up @@ -108,6 +119,20 @@ export class Tabs extends SizedMixin(Focusable) {

private _tabs: Tab[] = [];

constructor() {
super();
new IntersectionController(this, {
config: {
root: null,
rootMargin: "0px",
threshold: [0, 1]
},
callback: () => {
this.updateSelectionIndicator();
}
});
}

rovingTabindexController = new RovingTabindexController<Tab>(this, {
focusInIndex: (elements) => {
let focusInIndex = 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/tabs/src/tabs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ governing permissions and limitations under the License.
);
}

:host([direction^='vertical']) #list {
:host(:not([quiet])[direction^='vertical']) #list {
--sp-tabs-list-background-color: var(
--spectrum-tabs-vertical-textonly-divider-background-color
);
Expand Down
Loading

0 comments on commit 26fff53

Please sign in to comment.