Merge pull request #1130 from dpc-sdp/bugfix/R20-1875-tabs-feedback

[R20-1875] Updated tabs component based on design feedback
dpc-sdp · Apr 23, 2024 · 19afb43 · 19afb43
2 parents 1959bda + 82de86f
commit 19afb43
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 50 deletions.
diff --git a/packages/ripple-test-utils/step_definitions/components/maps.ts b/packages/ripple-test-utils/step_definitions/components/maps.ts
@@ -11,7 +11,7 @@ Then(`the data map component tabs should exist`, () => {
 
 Then(`the data map tabs should be labelled:`, (dataTable) => {
   const items = dataTable.raw()
-  cy.get('.rpl-tabs .rpl-tab .rpl-button__label').as('items')
+  cy.get('.rpl-tabs .rpl-tab').as('items')
   items.forEach((row, i: number) => {
     cy.get('@items')
       .eq(i)
@@ -23,7 +23,7 @@ Then(`the data map tabs should be labelled:`, (dataTable) => {
 })
 
 When(`I click the tab labelled {string}`, (label) => {
-  cy.get('.rpl-tabs .rpl-tab .rpl-button__label').contains(label).click()
+  cy.get('.rpl-tabs .rpl-tab').contains(label).click()
 })
 
 When(`I enter the term {string} into the location search input`, (term) => {

diff --git a/packages/ripple-ui-core/src/components/tabs/RplTabs.css b/packages/ripple-ui-core/src/components/tabs/RplTabs.css
@@ -2,65 +2,85 @@
 
 .rpl-tabs {
   border-bottom: var(--rpl-border-1) solid var(--rpl-clr-neutral-300);
+  display: flex;
 }
 
 .rpl-tab {
-  display: inline-block;
+  display: flex;
   position: relative;
+  padding: var(--rpl-sp-4);
+  gap: var(--rpl-sp-2);
+  align-items: center;
+  text-decoration: underline;
+  cursor: pointer;
+  margin-bottom: -1px;
 
-  .rpl-button--default {
-    --local-white-type-clr: var(--rpl-clr-type-default);
-    --local-white-type-clr-hover: var(--rpl-clr-type-primary-accessible);
-  }
-
-  .rpl-type-label {
-    font-weight: var(--rpl-type-weight-regular);
-  }
-
+  &:hover,
+  &:focus,
+  &:active,
   &--active {
-    --local-active-clr: var(--rpl-clr-link);
-
-    .rpl-u-focusable-block::after {
-      content: '';
-      position: absolute;
-      z-index: var(--rpl-layer-1);
-      height: var(--rpl-border-3);
-      width: calc(100% + var(--rpl-focusable-border-width, 0%) * 2);
-      background-color: var(--local-active-clr);
-      bottom: 0;
-    }
+    text-decoration: none;
+  }
+}
 
-    .rpl-u-focusable-block:focus-visible::after {
-      background-color: var(--rpl-clr-dark);
-    }
+.rpl-tab:active,
+.rpl-tab--active {
+  color: var(--rpl-clr-link);
 
-    .rpl-button--default {
-      --local-white-type-clr: var(--local-active-clr);
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: var(--rpl-layer-1);
+    height: var(--rpl-border-3);
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    background: var(--rpl-clr-link);
+  }
 
-      text-decoration: none;
+  &:focus-visible {
+    &::after {
+      display: none;
     }
   }
 }
 
 .rpl-tabs--vertical {
+  display: inline-flex;
+  flex-direction: column;
   border-bottom: 0;
   border-left: var(--rpl-border-1) solid var(--rpl-clr-neutral-300);
 
+  /* stylelint-disable-next-line no-descending-specificity */
   .rpl-tab {
-    display: block;
-    border-left: var(--rpl-border-3) solid transparent;
-
-    .rpl-button {
-      justify-content: flex-start;
-      width: 100%;
-    }
+    justify-content: flex-start;
+    margin-bottom: 0;
+    margin-left: -1px;
 
+    &:active,
     &--active {
       border-color: var(--local-active-clr);
 
-      .rpl-u-focusable-block::after {
+      &::after {
         display: none;
       }
+
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: var(--rpl-layer-1);
+        width: var(--rpl-border-3);
+        height: 100%;
+        left: 0;
+        bottom: 0;
+        background: var(--rpl-clr-link);
+      }
+
+      &:focus-visible {
+        &::before {
+          display: none;
+        }
+      }
     }
   }
 }
diff --git a/packages/ripple-ui-core/src/components/tabs/RplTabs.vue b/packages/ripple-ui-core/src/components/tabs/RplTabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import RplButton from '../button/RplButton.vue'
+import RplIcon from '../icon/RplIcon.vue'
 import {
   useRippleEvent,
   rplEventPayload
@@ -38,6 +38,8 @@ const componentClasses = computed(() => [
 
 const activeClasses = (key: string) => [
   'rpl-tab',
+  'rpl-type-p',
+  'rpl-u-focusable-block',
   props.activeTab === key ? 'rpl-tab--active' : null
 ]
 
@@ -60,22 +62,20 @@ const updateActive = (key: string) => {
 
 <template>
   <div :class="componentClasses" role="tablist">
-    <div
+    <button
       v-for="(item, index) in tabs"
+      :id="`tab-${item.key}`"
       :key="index"
       :class="activeClasses(item.key)"
+      type="button"
+      role="tab"
+      :aria-selected="activeTab === item.key ? 'true' : undefined"
+      :aria-controls="`panel-${item.key}`"
+      @click="updateActive(item.key)"
     >
-      <RplButton
-        :id="`tab-${item.key}`"
-        :icon-name="item.icon ? `icon-${item.icon}` : null"
-        :aria-selected="activeTab === item.key ? 'true' : null"
-        :aria-controls="`panel-${item.key}`"
-        role="tab"
-        variant="transparent"
-        @click="updateActive(item.key)"
-        >{{ item.title }}</RplButton
-      >
-    </div>
+      {{ item.title }}
+      <RplIcon v-if="item.icon" :name="`icon-${item.icon}`" />
+    </button>
   </div>
 </template>