feat(components/tabs): tokenize sectioned form styles

apps/e2e/tabs-storybook-e2e/src/e2e/sectioned-form.component.cy.ts

@@ -58,5 +58,5 @@ describe('sectioned form', () => {
         });
       });
     });
-  });
+  }, true);
 });

libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form-section.component.html

@@ -1,9 +1,7 @@
 <sky-vertical-tab
   [active]="active"
   [errorIndicator]="fieldInvalid"
-  [ngClass]="{
-    'sky-tab-field-required': fieldRequired
-  }"
+  [requiredIndicator]="fieldRequired"
   [showTabRightArrow]="true"
   [tabHeaderCount]="itemCount"
   [tabHeading]="heading"

libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form-section.component.ts

@@ -24,7 +24,6 @@ let nextId = 0;
   selector: 'sky-sectioned-form-section',
   templateUrl: './sectioned-form-section.component.html',
   providers: [SkySectionedFormService],
-  styleUrls: ['./sectioned-form-section.component.scss'],
   standalone: false,
 })
 export class SkySectionedFormSectionComponent implements OnInit, OnDestroy {

libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.scss

@@ -1,5 +1,22 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-sectioned-form') {
+  --sky-override-sectioned-form-content-border-left: 1px solid
+    var(--sky-border-color-neutral-medium);
+  --sky-override-sectioned-form-content-padding: var(--sky-padding-even-md)
+    var(--sky-padding-even-xl);
+  --sky-override-sectioned-form-modal-margin-adjustment: -15px;
+  --sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);
+  --sky-override-sectioned-form-tabs-padding: 0;
+}
+
+@include compatMixins.sky-modern-overrides('.sky-sectioned-form') {
+  --sky-override-sectioned-form-content-padding: var(--sky-padding-even-md)
+    var(--sky-padding-even-xl);
+  --sky-override-sectioned-form-tabs-padding: 0;
+}
 
 @include mixins.sky-host-responsive-container-xs-min() {
   .sky-sectioned-form {
@@ -10,23 +27,37 @@
   .sky-sectioned-form-content {
     flex-basis: auto;
     overflow-y: visible;
+    padding: var(
+      --sky-override-sectioned-form-content-padding,
+      var(--sky-space-inset-floated-top-m)
+        var(--sky-space-inset-floated-right-m)
+        var(--sky-space-inset-floated-bottom-m)
+        var(--sky-space-inset-floated-left-m)
+    );
   }
 
   .sky-sectioned-form-tabs {
     flex-basis: auto;
     overflow-y: visible;
+    padding: var(
+      --sky-override-sectioned-form-tabs-padding,
+      var(--sky-space-inset-vertical-top-m) 0
+        var(--sky-space-inset-vertical-bottom-m)
+    );
   }
 
   .sky-sectioned-form-tabs + .sky-sectioned-form-content {
-    border-left: 1px solid var(--sky-border-color-neutral-medium);
-  }
-
-  .sky-sectioned-form-content {
-    padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);
+    border-left: var(
+      --sky-override-sectioned-form-content-border-left,
+      var(--sky-border-width-divider) solid var(--sky-color-border-divider)
+    );
   }
 
   .sky-sectioned-form-tabs-only {
-    padding: var(--sky-padding-even-md);
+    padding: var(
+      --sky-override-sectioned-form-tabs-only-padding,
+      var(--sky-space-inset-balanced-m)
+    );
   }
 }
 
@@ -56,7 +87,13 @@
 :host-context(sky-modal-content) > {
   :host .sky-sectioned-form,
   form :host .sky-sectioned-form {
-    margin: -$sky-margin-plus-half;
+    margin: var(
+      --sky-override-sectioned-form-modal-margin-adjustment,
+      calc(var(--sky-space-inset-floated-top-m) * -1)
+        calc(var(--sky-space-inset-floated-right-m) * -1)
+        calc(var(--sky-space-inset-floated-bottom-m) * -1)
+        calc(var(--sky-space-inset-floated-left-m) * -1)
+    );
   }
 }
 
@@ -67,13 +104,3 @@
 .sky-sectioned-form-content-hidden {
   display: none;
 }
-
-@include mixins.sky-theme-modern {
-  :host-context(sky-modal-content) > {
-    :host .sky-sectioned-form,
-    form :host .sky-sectioned-form {
-      margin: (-$sky-theme-modern-space-sm) (-$sky-theme-modern-space-xl)
-        (-$sky-theme-modern-space-xl) (-$sky-theme-modern-space-xl);
-    }
-  }
-}

libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.spec.ts

@@ -170,7 +170,11 @@ describe('Sectioned form component', () => {
     expect(tabs.length).toBe(2);
 
     const activeTab = tabs[1];
-    expect(activeTab.classList.contains('sky-tab-field-required')).toBe(false);
+    expect(
+      activeTab
+        .querySelector('.sky-vertical-tab-heading')
+        .classList.contains('sky-control-label-required'),
+    ).toBe(false);
 
     // mark required
     const checkbox = el.querySelector('#requiredTestCheckbox input');
@@ -180,7 +184,11 @@ describe('Sectioned form component', () => {
     // check section is required
     tabs = el.querySelectorAll('sky-vertical-tab');
     const requiredTab = tabs[0];
-    expect(requiredTab.classList.contains('sky-tab-field-required')).toBe(true);
+    expect(
+      requiredTab
+        .querySelector('.sky-vertical-tab-heading')
+        .classList.contains('sky-control-label-required'),
+    ).toBe(true);
   });
 
   it('section should respect required field change after switching tabs', () => {
@@ -200,7 +208,11 @@ describe('Sectioned form component', () => {
     expect(tabs.length).toBe(2);
 
     const activeTab = tabs[0];
-    expect(activeTab.classList.contains('sky-tab-field-required')).toBe(false);
+    expect(
+      activeTab
+        .querySelector('.sky-vertical-tab-heading')
+        .classList.contains('sky-control-label-required'),
+    ).toBe(false);
 
     // mark required
     const checkbox = el.querySelector('#requiredTestCheckbox input');
@@ -210,7 +222,11 @@ describe('Sectioned form component', () => {
     // check section is required
     tabs = el.querySelectorAll('sky-vertical-tab');
     const requiredTab = tabs[0];
-    expect(requiredTab.classList.contains('sky-tab-field-required')).toBe(true);
+    expect(
+      requiredTab
+        .querySelector('.sky-vertical-tab-heading')
+        .classList.contains('sky-control-label-required'),
+    ).toBe(true);
   });
 
   it('should fire the active index changed event when tab changed', () => {

libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tab.component.html

@@ -18,7 +18,10 @@
   (keyup.space)="tabButtonActivate($event)"
 >
   <div class="sky-vertical-tab-display">
-    <div class="sky-vertical-tab-heading">
+    <div
+      class="sky-vertical-tab-heading"
+      [ngClass]="{ 'sky-control-label-required': requiredIndicator }"
+    >
       <span class="sky-vertical-tab-heading-value">{{ tabHeading }}</span>
       @if (tabHeaderCount || tabHeaderCount === 0) {
         <span class="sky-vertical-tab-count"> ({{ tabHeaderCount }}) </span>

libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tab.component.scss

@@ -14,12 +14,14 @@
     solid #{$sky-highlight-color-info};
   --sky-override-vertical-tab-box-shadow-focus: none;
   --sky-override-vertical-tab-count-margin-left: #{$sky-margin-half};
+  --sky-override-vertical-tab-display-align-items: normal;
   --sky-override-vertical-tab-font-color: #{$sky-text-color-default};
   --sky-override-vertical-tab-font-color-disabled: var(
     --sky-text-color-deemphasized
   );
   --sky-override-vertical-tab-font-selected-color: #{$sky-text-color-default};
   --sky-override-vertical-tab-gap: #{$sky-margin-half};
+  --sky-override-vertical-tab-heading-error-line-height: normal;
   --sky-override-vertical-tab-heading-error-padding-left: #{$sky-padding-half};
   --sky-override-vertical-tab-hover-font-color: #{$sky-text-color-default};
   --sky-override-vertical-tab-margin: #{$sky-margin-half} 0 #{$sky-margin-half}
@@ -30,6 +32,11 @@
   --sky-override-vertical-tab-padding-left-active: #{$sky-padding};
   --sky-override-vertical-tab-padding-left-selected: 6px;
   --sky-override-vertical-tab-padding-left-hover: #{$sky-padding};
+  --sky-override-vertical-tab-right-arrow-color: #{$sky-text-color-icon-borderless};
+  --sky-override-vertical-tab-right-arrow-color-active: #{$sky-text-color-icon-borderless};
+  --sky-override-vertical-tab-right-arrow-color-hover: #979ba2;
+  --sky-override-vertical-tab-right-arrow-color-selected: #{$sky-text-color-icon-borderless};
+  --sky-override-vertical-tab-right-arrow-padding: 3px #{$sky-padding} 0 0;
 }
 
 @include compatMixins.sky-modern-overrides('.sky-vertical-tab') {
@@ -40,12 +47,27 @@
   --sky-override-vertical-tab-border-left-hover: var(--modern-size-1) solid
     var(--modern-color-blue-50);
   --sky-override-vertical-tab-content-pane-margin-bottom: 0;
+  --sky-override-vertical-tab-display-align-items: normal;
   --sky-override-vertical-tab-gap: var(--modern-size-15);
+  --sky-override-vertical-tab-heading-error-margin-right: calc(
+    var(--modern-size-10) * -1
+  );
+  --sky-override-vertical-tab-heading-error-line-height: normal;
   --sky-override-vertical-tab-heading-error-padding-left: var(--modern-size-10);
+  --sky-override-vertical-tab-heading-error-position: relative;
   --sky-override-vertical-tab-margin: var(--modern-size-15) 0
     var(--modern-size-15) var(--modern-size-10);
-  --sky-override-vertical-tab-padding: var(--modern-size-10) 0
-    var(--modern-size-10) var(--modern-size-15);
+  --sky-override-vertical-tab-padding: var(--modern-size-10)
+    var(--modern-size-10) var(--modern-size-10) var(--modern-size-15);
+  --sky-override-vertical-tab-right-arrow-color: var(--modern-color-gray-20);
+  --sky-override-vertical-tab-right-arrow-color-active: var(
+    --modern-color-gray-20
+  );
+  --sky-override-vertical-tab-right-arrow-color-hover: #979ba2;
+  --sky-override-vertical-tab-right-arrow-color-selected: var(
+    --modern-color-gray-20
+  );
+  --sky-override-vertical-tab-right-arrow-padding: var(--modern-size-3) 0 0 0;
 }
 
 :host {
@@ -96,9 +118,11 @@
       var(--sky-color-background-nav-hover)
     );
 
-    // TODO: Tokenize with sectioned form
     .sky-vertical-tab-right-arrow {
-      color: darken($sky-text-color-icon-borderless, 20%);
+      color: var(
+        --sky-override-vertical-tab-right-arrow-color-hover,
+        var(--sky-color-icon-default)
+      );
     }
   }
 
@@ -123,6 +147,13 @@
           )
       )
     );
+
+    .sky-vertical-tab-right-arrow {
+      color: var(
+        --sky-override-vertical-tab-right-arrow-color-active,
+        var(--sky-color-icon-default)
+      );
+    }
   }
 
   &:not(:active):focus-visible {
@@ -142,6 +173,24 @@
       --sky-override-vertical-tab-box-shadow-focus,
       var(--sky-elevation-focus)
     );
+
+    &.sky-vertical-tab-active {
+      background-color: var(
+        --sky-override-vertical-tab-background-color-selected,
+        var(--sky-color-background-selected-soft)
+      );
+      color: var(
+        --sky-override-vertical-tab-selected-font-color,
+        var(--sky-color-text-default)
+      );
+
+      .sky-vertical-tab-right-arrow {
+        color: var(
+          --sky-override-vertical-tab-right-arrow-color-selected,
+          var(--sky-color-icon-default)
+        );
+      }
+    }
   }
 
   &:not(.sky-vertical-tab-active):not(:active):hover {
@@ -181,6 +230,13 @@
     --sky-override-vertical-tab-border-left-selected,
     var(--sky-border-width-selected-l) solid var(--sky-color-border-selected)
   );
+
+  .sky-vertical-tab-right-arrow {
+    color: var(
+      --sky-override-vertical-tab-right-arrow-color-selected,
+      var(--sky-color-icon-default)
+    );
+  }
 }
 
 .sky-vertical-tab-hidden {
@@ -191,13 +247,21 @@
   display: flex;
   justify-content: space-between;
   flex-grow: 1;
+  align-items: var(--sky-override-vertical-tab-display-align-items, center);
 }
 
 .sky-vertical-tab-heading-error {
   padding-left: var(
     --sky-override-vertical-tab-heading-error-padding-left,
     var(--sky-space-gap-text_action-s)
   );
+  margin-right: var(--sky-override-vertical-tab-heading-error-margin-right);
+
+  // TODO: The position, top, and line height rules are due to a bug in icons where icon stacks display larger than their inner icons current.
+  // Remove these two rules when we move to SVG icons
+  position: var(--sky-override-vertical-tab-heading-error-position);
+  top: -2px;
+  line-height: var(--sky-override-vertical-tab-heading-error-line-height, 1);
 }
 
 .sky-vertical-tab-count {
@@ -220,10 +284,12 @@
   pointer-events: none;
 }
 
-// TODO: Tokenize with sectioned form
 .sky-vertical-tab-right-arrow {
-  padding: 3px $sky-padding 0 0;
-  color: $sky-text-color-icon-borderless;
+  padding: var(--sky-override-vertical-tab-right-arrow-padding, 0);
+  color: var(
+    --sky-override-vertical-tab-right-arrow-color,
+    var(--sky-color-icon-deemphasized)
+  );
 }
 
 .sky-vertical-tab-content-pane {
@@ -246,16 +312,6 @@
   }
 }
 
-@include mixins.sky-theme-modern {
-  .sky-vertical-tab {
-    // TODO: This is due to a bug in icons where icon stacks display larger than their inner icons current.
-    .sky-vertical-tab-heading-error {
-      position: relative;
-      top: -2px;
-    }
-  }
-}
-
 :host-context(.sky-sectioned-form-tabs-only) {
   .sky-vertical-tab {
     margin-left: 0;

libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tab.component.ts

@@ -91,6 +91,13 @@ export class SkyVerticalTabComponent implements OnInit, OnDestroy {
   @Input()
   public errorIndicator: boolean | undefined = false;
 
+  /**
+   * Whether to indicate that the tab has required content.
+   * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
+   */
+  @Input()
+  public requiredIndicator: boolean | undefined = false;
+
   /**
    * Displays an item count alongside the tab header to indicate how many list items the tab contains.
    */