Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/feature-sectio…

…n-v2
carbon-design-system · Sep 26, 2023 · b5ecd5f · b5ecd5f
2 parents d9ca4c5 + 6e5aef5
commit b5ecd5f
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 44 deletions.
diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -18,7 +18,14 @@
 
 :host(#{$prefix}-modal[open]) {
   @extend .#{$prefix}--modal;
-  @extend .is-visible;
+  opacity: 1;
+  transition: opacity $duration-moderate-02 motion(entrance, expressive),
+    visibility 0ms linear;
+  visibility: inherit;
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 :host(#{$prefix}-modal) {

diff --git a/packages/styles/scss/components/leaving-ibm/_index.scss b/packages/styles/scss/components/leaving-ibm/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'leaving-ibm';
+@use 'leaving-ibm';
+
+@include leaving-ibm.leaving-ibm;
diff --git a/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss b/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss
@@ -0,0 +1,63 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../../../carbon-web-components/src/components/modal/modal' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin leaving-ibm {
+  :host(#{$c4d-prefix}-leaving-ibm-composite),
+  :host(#{$c4d-prefix}-leaving-ibm-container) {
+    width: 100%;
+  }
+
+  :host(#{$c4d-prefix}-leaving-ibm-modal) {
+    @extend :host(#{$prefix}-modal);
+
+    max-height: 100%;
+  }
+  :host(#{$c4d-prefix}-leaving-ibm-modal)[open] {
+    @extend :host(#{$prefix}-modal[open]);
+  }
+
+  :host(#{$c4d-prefix}-leaving-ibm-modal-heading) {
+    @include type-style('fluid-heading-04', true);
+  }
+
+  :host(#{$c4d-prefix}-leaving-ibm-modal-body) {
+    @extend :host(#{$prefix}-modal-body);
+
+    padding-right: 20%;
+    z-index: 1;
+
+    ::slotted(#{$c4d-prefix}-leaving-ibm-modal-supplemental),
+    ::slotted(slot[name='supplemental']) {
+      display: block;
+      margin-top: $spacing-07;
+      color: $text-secondary;
+      @include type-style('label-02');
+    }
+
+    > p {
+      padding-right: 0;
+      margin: 0;
+    }
+    ::slotted(:last-child) {
+      padding-bottom: 0;
+    }
+    #{$prefix}-link {
+      min-height: 24px;
+      display: inline-block;
+    }
+  }
+  .#{$prefix}--modal-container {
+    transform: translate3d(0, 0, 0);
+  }
+}
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts
@@ -155,11 +155,11 @@ class C4DLeavingIbmComposite extends HostListenerMixin(
           >
         </c4d-leaving-ibm-modal-body>
         <cds-modal-footer>
-          <cds-btn
+          <cds-button
             data-autoid="${c4dPrefix}--leaving-ibm-cta"
             href="${href}"
             kind="primary"
-            >${leavingIbmButtonLabel}</cds-btn
+            >${leavingIbmButtonLabel}</cds-button
           >
         </cds-modal-footer>
       </c4d-leaving-ibm-modal>

diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss b/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss
@@ -5,44 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '../../../../carbon-web-components/src/components/modal/modal';
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
-:host(#{$c4d-prefix}-leaving-ibm-composite),
-:host(#{$c4d-prefix}-leaving-ibm-container) {
-  width: 100%;
-}
-
-:host(#{$c4d-prefix}-leaving-ibm-modal) {
-  // @extend :host(#{$prefix}-modal);
-  max-height: 100%;
-
-  &[open] {
-    // @extend :host(#{$prefix}-modal[open]);
-  }
-}
-
-:host(#{$c4d-prefix}-leaving-ibm-modal-heading) {
-  // @include type-style('fluid-heading-04');
-}
-
-:host(#{$c4d-prefix}-leaving-ibm-modal-body) {
-  // @extend :host(#{$prefix}-modal-body);
-  padding-right: 20%;
-
-  ::slotted(#{$c4d-prefix}-leaving-ibm-modal-supplemental),
-  ::slotted(slot[name='supplemental']) {
-    display: block;
-    margin-top: $spacing-07;
-    color: $text-secondary;
-    @include type-style('label-02');
-  }
-
-  > p {
-    padding-right: 0;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/leaving-ibm';