fix(modal): styles with sass upgrade (#10237)

* fix(modal): styles with sass upgrade

* fix(modal): add transition styles

* fix(modal): remove modal trigger button from story

---------

Co-authored-by: Anna Wen <[email protected]>

packages/carbon-web-components/src/components/modal/modal-story.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,7 +20,6 @@ import './modal-label';
 import './modal-body';
 import './modal-footer';
 import './modal-footer-button';
-import styles from './modal-story.scss';
 import storyDocs from './modal-story.mdx';
 
 const sizes = {
@@ -39,6 +38,7 @@ export const Default = (args) => {
       event.preventDefault();
     }
   };
+
   return html`
     <bx-modal
       ?open="${open}"
@@ -129,14 +129,7 @@ ThreeButtons.storyName = 'Three buttons';
 
 export default {
   title: 'Components/Modal',
-  decorators: [
-    (story) => html`
-      <style type="text/css">
-        ${styles.cssText}
-      </style>
-      ${story()}
-    `,
-  ],
+  decorators: [(story) => html` ${story()} `],
   parameters: {
     ...storyDocs.parameters,
     knobs: {

packages/carbon-web-components/src/components/modal/modal.scss

@@ -74,6 +74,15 @@
 
 :host(#{$prefix}-modal[open]) {
   @extend .#{$prefix}--modal, .is-visible;
+
+  opacity: 1;
+  transition: visibility 0ms linear,
+    opacity $duration--moderate-02 motion(entrance, expressive);
+  visibility: inherit;
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 :host(#{$prefix}-modal-header) {