fix(modal): use contextual layer tokens (#16860)

* fix(modal): use contextual layer tokens * fix(modal): restore fluid input overwrites * fix(composed-modal): use contextual layer tokens
carbon-design-system · Jun 25, 2024 · db0978e · db0978e
1 parent 5e000ea
commit db0978e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 49 deletions.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react';
 import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
+import { Layer } from '../Layer';
 import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 import { ModalFooter, type ModalFooterProps } from './ModalFooter';
 import debounce from 'lodash.debounce';
@@ -96,13 +97,13 @@ export const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
         : {};
 
     return (
-      <div
+      <Layer
         className={contentClass}
         {...hasScrollingContentProps}
         {...rest}
         ref={mergeRefs(contentRef, ref)}>
         {children}
-      </div>
+      </Layer>
     );
   }
 );
@@ -415,8 +416,9 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
     }
 
     return (
-      <div
+      <Layer
         {...rest}
+        level={0}
         role="presentation"
         ref={ref}
         aria-hidden={!open}
@@ -453,7 +455,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
             </button>
           )}
         </div>
-      </div>
+      </Layer>
     );
   }
 );

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
@@ -51,47 +51,6 @@
       }
     }
 
-    // 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,