fix(modal): use contextual layer tokens

carbon-design-system · Jun 25, 2024 · 612f501 · 612f501
1 parent fb2dfdb
commit 612f501
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 97 deletions.
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -13,6 +13,7 @@ import toggleClass from '../../tools/toggleClass';
 import Button from '../Button';
 import ButtonSet from '../ButtonSet';
 import InlineLoading from '../InlineLoading';
+import { Layer } from '../Layer';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
 import wrapFocus, {
   wrapFocusWithoutSentinels,
@@ -528,13 +529,13 @@ const Modal = React.forwardRef(function Modal(
         {normalizedSlug}
         {!passiveModal && modalButton}
       </div>
-      <div
+      <Layer
         ref={contentRef}
         id={modalBodyId}
         className={contentClasses}
         {...hasScrollingContentProps}>
         {children}
-      </div>
+      </Layer>
       {!passiveModal && (
         <ButtonSet className={footerClasses} aria-busy={loadingActive}>
           {Array.isArray(secondaryButtons) && secondaryButtons.length <= 2
@@ -581,8 +582,9 @@ const Modal = React.forwardRef(function Modal(
   );
 
   return (
-    <div
+    <Layer
       {...rest}
+      level={0}
       onKeyDown={handleKeyDown}
       onMouseDown={handleMousedown}
       onBlur={!focusTrapWithoutSentinels ? handleBlur : () => {}}
@@ -610,7 +612,7 @@ const Modal = React.forwardRef(function Modal(
           Focus sentinel
         </span>
       )}
-    </div>
+    </Layer>
   );
 });
 

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -50,99 +50,6 @@
         transition: none;
       }
     }
-
-    // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?
-    .#{$prefix}--pagination,
-    .#{$prefix}--pagination__control-buttons,
-    .#{$prefix}--text-input,
-    .#{$prefix}--text-area,
-    .#{$prefix}--search-input,
-    .#{$prefix}--select-input,
-    .#{$prefix}--dropdown,
-    .#{$prefix}--dropdown-list,
-    .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input,
-    .#{$prefix}--multi-select,
-    .#{$prefix}--number__control-btn::before,
-    .#{$prefix}--number__control-btn::after,
-    .#{$prefix}--list-box input[role='combobox'] {
-      background-color: $field-02;
-    }
-
-    // Override to align layer token with field
-    .#{$prefix}--list-box__menu {
-      background-color: $layer-02;
-    }
-
-    .#{$prefix}--number__rule-divider {
-      background-color: $border-subtle-02;
-    }
-
-    .#{$prefix}--list-box__menu-item__option {
-      border-block-start-color: $border-subtle-02;
-    }
-
-    .#{$prefix}--list-box__menu-item:hover
-      .#{$prefix}--list-box__menu-item__option {
-      border-block-start-color: $layer-hover-02;
-    }
-
-    .#{$prefix}--list-box__menu-item--active:hover
-      .#{$prefix}--list-box__menu-item__option {
-      border-block-start-color: $layer-selected-hover-02;
-    }
-
-    // Fluid inputs
-    .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
-    .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
-    .#{$prefix}--text-area--fluid .#{$prefix}--text-area,
-    .#{$prefix}--search--fluid .#{$prefix}--search-input,
-    .#{$prefix}--select--fluid .#{$prefix}--select-input,
-    .#{$prefix}--text-area--fluid
-      .#{$prefix}--text-area__wrapper[data-invalid]
-      .#{$prefix}--text-area__divider
-      + .#{$prefix}--form-requirement,
-    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
-    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
-    .#{$prefix}--number-input--fluid input[type='number'],
-    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
-    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
-    .#{$prefix}--date-picker--fluid
-      .c#{$prefix}ds--date-picker-input__wrapper
-      .#{$prefix}--date-picker__input {
-      background-color: $field-01;
-    }
-
-    // Override to align layer token with field
-    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
-      background-color: $layer-01;
-    }
-
-    .#{$prefix}--list-box__menu-item:hover {
-      background-color: $layer-hover-02;
-    }
-
-    .#{$prefix}--list-box__menu-item--active {
-      background-color: $layer-selected-02;
-    }
-
-    .#{$prefix}--list-box__menu-item--active:hover {
-      background-color: $layer-selected-hover-02;
-    }
-
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:hover::before,
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:hover::after {
-      background-color: $field-hover;
-    }
-
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:focus::before,
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:focus::after {
-      border-inline-start: 2px solid $focus;
-    }
   }
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {