From 5b93c6044e702bd6a5c242dd61dfde0ea214e9c3 Mon Sep 17 00:00:00 2001 From: Arnold Sandoval Date: Wed, 29 Jul 2020 17:29:10 -0700 Subject: [PATCH 1/2] updates tab component implementation to remove tab indicator positioned by JS (fixes #564) --- packages/docs/components/tab.md | 175 ++++-------------- .../odyssey/src/scss/components/_tab.scss | 25 +-- .../global-components/OdsTabs.vue | 46 ++--- 3 files changed, 69 insertions(+), 177 deletions(-) diff --git a/packages/docs/components/tab.md b/packages/docs/components/tab.md index 00ec6dc3bf..b2476b002d 100644 --- a/packages/docs/components/tab.md +++ b/packages/docs/components/tab.md @@ -4,44 +4,49 @@ Tabs are a navigational component used to organize content by grouping similar i
- - - - + + + + + +
```html -
-
- - - + +
-
-

Tab Panel: Donuts

+
+

Tabpanel: Applications

+
+ - @@ -63,112 +68,12 @@ Tabs are a navigational component used to organize content by grouping similar i - Have more than 8 tabs in a tablist. - Add an icon to a tab. Icons should be reserved for very specific things. It can be hard to maintain consistency with use of icons as it pertains to their semantic meanings and meaning to Okta. Without an established icon repo, it’s best to not use them for now. - - ## Switching tabs The JS included here is for demo purposes only. For those implementing the Tab component from scratch, be sure to implement the behavior as follows: -1. Update the CSS custom properties to animate the Tab indicator correctly. (See [CSS custom properties](#css-custom-properties)) -2. Set the select tab button's `aria-selected` attribute to `true`. If a different tab was previously selected, that tab button's `aria-selected` attribute must be set to `false`. -3. The tabpanel corresponding to the tab button is shown. This is done by removing the `hidden` attribute on the tabpanel. If a different tabpanel was previously visible, the `hidden` attribute is applied to it. - -### CSS custom properties -The tab indicator's left position and width are changed by updating CSS custom properties on the `.ods-tabs` element. The custom properties are as follow: - -
- - - - - - - - - - - - - - - - - - -
Odyssey takes care to ensure apropriate keyboard navigation for the tab component.
CSS variableDescription
--ods-tabs-indicator-widthThe width of the tab indicator
--ods-tabs-indicator-pos-xThe position of the tab indicator along the x-axis
-
- -

In the following example, you can see the tab indicator position is on the second element:

- -
-
-
-
- - - - -
-
- -
-

Tab Panel 1: People

-
- - -
-
-
- -```html -
-
- - - - -
-
- -
-

Tab Panel 1: People

-
- - -
-
-``` -
+1. Set the select tab button's `aria-selected` attribute to `true`. If a different tab was previously selected, that tab button's `aria-selected` attribute must be set to `false`. +2. The tabpanel corresponding to the tab button is shown. This is done by removing the `hidden` attribute on the tabpanel. If a different tabpanel was previously visible, the `hidden` attribute is applied to it. ## Accessibility @@ -226,12 +131,14 @@ export default { data () { return { tabs: { - id: 'example-0', - active: "donuts-tab", + id: 'user-profile-tabs', + active: "tab-applications", tablist: [ - { id: "donuts-tab", label: 'Donuts' }, - { id: "pastries-tab", label: 'Pastries' }, - { id: "coffee-tab", label: 'Coffee' } + { id: "tab-applications", label: 'Applications' }, + { id: "tab-groups", label: 'Groups' }, + { id: "tab-profile", label: 'Profile' }, + { id: "tab-devices", label: 'Devices' }, + { id: "tab-omm", label: 'OMM' } ] } } diff --git a/packages/odyssey/src/scss/components/_tab.scss b/packages/odyssey/src/scss/components/_tab.scss index d6708cfaaa..3188148e96 100644 --- a/packages/odyssey/src/scss/components/_tab.scss +++ b/packages/odyssey/src/scss/components/_tab.scss @@ -19,18 +19,6 @@ .ods-tabs--tablist { position: relative; - - &::before { - content: ''; - position: absolute; - z-index: 1; - bottom: -1px; - left: var(--ods-tabs-indicator-pos-x); - width: var(--ods-tabs-indicator-width); - height: 3px; - transition: left 230ms ease-in-out, width 230ms ease-in-out; - background: $color-primary-base; - } } .ods-tabs--tab { @@ -43,6 +31,19 @@ color: $text-body; font-family: inherit; font-weight: 600; + + &[aria-selected='true'] { + &::before { + content: ''; + position: absolute; + z-index: 1; + bottom: -1px; + left: 0; + width: 100%; + height: 3px; + background: $color-primary-base; + } + } } .ods-tabs--tabpanel [role='tabpanel'] { diff --git a/packages/vuepress-theme-nimatron/global-components/OdsTabs.vue b/packages/vuepress-theme-nimatron/global-components/OdsTabs.vue index 0d54bd2fe4..f67e7017e1 100644 --- a/packages/vuepress-theme-nimatron/global-components/OdsTabs.vue +++ b/packages/vuepress-theme-nimatron/global-components/OdsTabs.vue @@ -1,6 +1,6 @@