Refactored TabView Styles

components/lib/calendar/style/CalendarStyle.js

@@ -29,12 +29,12 @@ const classes = {
     group: 'p-datepicker-calendar-container',
     calendar: 'p-datepicker-calendar',
     header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-navigator p-datepicker-prev',
+    previousButton: 'p-datepicker-prev-button',
     title: 'p-datepicker-title',
     monthTitle: 'p-datepicker-view-month p-link',
     yearTitle: 'p-datepicker-view-year p-link',
     decadeTitle: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-navigator p-datepicker-next',
+    nextButton: 'p-datepicker-next-button',
     grid: 'p-datepicker-day-view',
     weekHeader: 'p-datepicker-weekheader p-disabled',
     weekNumber: 'p-datepicker-weeknumber',

components/lib/tabview/style/TabViewStyle.js

@@ -7,25 +7,25 @@ const classes = {
             'p-tabview-scrollable': props.scrollable
         }
     ],
-    navContainer: 'p-tabview-nav-container',
-    previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
-    navContent: 'p-tabview-nav-content',
-    nav: 'p-tabview-nav',
+    navContainer: 'p-tabview-tablist-container',
+    previousButton: 'p-tabview-prev-button',
+    navContent: 'p-tabview-tablist-scroll-container',
+    nav: 'p-tabview-tablist',
     tab: {
         header: ({ instance, tab, index }) => [
-            'p-tabview-header',
+            'p-tabview-tablist-item',
             instance.getTabProp(tab, 'headerClass'),
             {
-                'p-highlight': instance.d_activeIndex === index,
+                'p-tabview-tablist-item-active': instance.d_activeIndex === index,
                 'p-disabled': instance.getTabProp(tab, 'disabled')
             }
         ],
-        headerAction: 'p-tabview-nav-link p-tabview-header-action',
-        headerTitle: 'p-tabview-title',
+        headerAction: 'p-tabview-tab-header',
+        headerTitle: 'p-tabview-tab-title',
         content: ({ instance, tab }) => ['p-tabview-panel', instance.getTabProp(tab, 'contentClass')]
     },
     inkbar: 'p-tabview-ink-bar',
-    nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
+    nextButton: 'p-tabview-next-button',
     panelContainer: 'p-tabview-panels'
 };
 

components/lib/themes/primeone/base/tabview/index.js

@@ -1,14 +1,14 @@
 export default {
     css: ({ dt }) => `
-.p-tabview-nav-container {
+.p-tabview-tablist-container {
     position: relative;
 }
 
-.p-tabview-scrollable > .p-tabview-nav-container {
+.p-tabview-scrollable > .p-tabview-tablist-container {
     overflow: hidden;
 }
 
-.p-tabview-nav-content {
+.p-tabview-tablist-scroll-container {
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
@@ -16,7 +16,11 @@ export default {
     overscroll-behavior: contain auto;
 }
 
-.p-tabview-nav {
+.p-tabview-tablist-scroll-container::-webkit-scrollbar {
+    display: none;
+}
+
+.p-tabview-tablist {
     display: flex;
     margin: 0;
     padding: 0;
@@ -28,7 +32,7 @@ export default {
     position: relative;
 }
 
-.p-tabview-nav-link {
+.p-tabview-tab-header {
     cursor: pointer;
     user-select: none;
     display: flex;
@@ -49,27 +53,30 @@ export default {
     outline-color: transparent;
 }
 
-.p-tabview-header:not(.p-disabled) .p-tabview-nav-link:focus-visible {
+.p-tabview-tablist-item:not(.p-disabled) .p-tabview-tab-header:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: -1px;
 }
 
-.p-tabview-header:not(.p-highlight):not(.p-disabled):hover >.p-tabview-nav-link {
+.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header {
     color: ${dt('tabview.header.hover.color')};
 }
 
-.p-tabview-header.p-highlight > .p-tabview-nav-link {
+.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header {
     color: ${dt('tabview.header.active.color')};
 }
 
-.p-tabview-title {
+.p-tabview-tab-title {
     line-height: 1;
     white-space: nowrap;
 }
 
-.p-tabview-nav-btn {
+.p-tabview-next-button,
+.p-tabview-prev-button {
     position: absolute;
     top: 0;
+    margin: 0;
+    padding: 0;
     z-index: 2;
     height: 100%;
     display: flex;
@@ -82,29 +89,30 @@ export default {
     outline-color: transparent;
     transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     box-shadow: ${dt('tabview.navigator.icon.box.shadow')};
+    border: none;
+    cursor: pointer;
+    user-select: none;
 }
 
-.p-tabview-nav-btn:focus-visible {
+.p-tabview-next-button:focus-visible,
+.p-tabview-prev-button:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-tabview-nav-btn:hover {
+.p-tabview-next-button:hover,
+.p-tabview-prev-button:hover {
     color: ${dt('tabview.navigator.icon.hover.color')};
 }
 
-.p-tabview-nav-prev {
+.p-tabview-prev-button {
     left: 0;
 }
 
-.p-tabview-nav-next {
+.p-tabview-next-button {
     right: 0;
 }
 
-.p-tabview-nav-content::-webkit-scrollbar {
-    display: none;
-}
-
 .p-tabview-panels {
     background: ${dt('tabview.navigator.content.background')};
     color: ${dt('tabview.navigator.content.color')};