Merge pull request #11118 from emyarod/fix-tabs-overflow-button-rende…

…ring

fix(tabs): remove overflow button conditional rendering check

packages/carbon-web-components/src/components/tabs/tabs.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit';
+import { TemplateResult, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { prefix } from '../../globals/settings';
@@ -310,7 +310,7 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
   };
 
   /**
-   * Cleans-up and creats the intersection observer for the scrolling container.
+   * Cleans-up and creates the intersection observer for the scrolling container.
    *
    * @param [options] The options.
    * @param [options.create] `true` to create the new intersection observer.
@@ -411,42 +411,72 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
     }
   }
 
-  render() {
+  /**
+   * Render the previous button if tablist is wider than container.
+   */
+  protected renderPreviousButton(): TemplateResult | null {
     const {
       _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent,
-      _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,
-      _assistiveStatusText: assistiveStatusText,
-      _handleSlotchange: handleSlotchange,
     } = this;
-
     const previousButtonClasses = classMap({
       [`${prefix}--tab--overflow-nav-button`]: true,
       [`${prefix}--tabs__nav-caret-left`]: true,
       [`${prefix}--tab--overflow-nav-button--previous`]: true,
       [`${prefix}--tab--overflow-nav-button--hidden`]:
         isIntersectionLeftTrackerInContent,
     });
+    return html`
+      <button
+        part="prev-button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="${previousButtonClasses}"
+        @click=${(_) =>
+          this._handleScrollButtonClick(_, {
+            direction: NAVIGATION_DIRECTION.Left,
+          })}>
+        ${ChevronLeft16()}
+      </button>
+    `;
+  }
+
+  /**
+   * Render the next button if tablist is wider than container.
+   */
+  protected renderNextButton(): TemplateResult | null {
+    const {
+      _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,
+    } = this;
     const nextButtonClasses = classMap({
       [`${prefix}--tab--overflow-nav-button`]: true,
       [`${prefix}--tabs__nav-caret-right`]: true,
       [`${prefix}--tab--overflow-nav-button--next`]: true,
       [`${prefix}--tab--overflow-nav-button--hidden`]:
         isIntersectionRightTrackerInContent,
     });
-
     return html`
       <button
-        part="prev-button"
+        part="next-button"
         tabindex="-1"
         aria-hidden="true"
-        class="${previousButtonClasses}"
+        class="${nextButtonClasses}"
         @click=${(_) =>
           this._handleScrollButtonClick(_, {
-            direction: NAVIGATION_DIRECTION.Left,
+            direction: NAVIGATION_DIRECTION.Right,
           })}>
-        ${ChevronLeft16()}
+        ${ChevronRight16()}
       </button>
+    `;
+  }
+
+  render() {
+    const {
+      _assistiveStatusText: assistiveStatusText,
+      _handleSlotchange: handleSlotchange,
+    } = this;
 
+    return html`
+      ${this.renderPreviousButton()}
       <div class="${prefix}--tabs-nav-content-container">
         <div class="${prefix}--tabs-nav-content">
           <div class="${prefix}--tabs-nav">
@@ -458,18 +488,7 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
           </div>
         </div>
       </div>
-
-      <button
-        part="next-button"
-        tabindex="-1"
-        aria-hidden="true"
-        class="${nextButtonClasses}"
-        @click=${(_) =>
-          this._handleScrollButtonClick(_, {
-            direction: NAVIGATION_DIRECTION.Right,
-          })}>
-        ${ChevronRight16()}
-      </button>
+      ${this.renderNextButton()}
       <div
         class="${prefix}--assistive-text"
         role="status"