fix(modal): update styles for button skeleton in modal footer

packages/react/src/components/ComposedModal/ComposedModal.stories.js

@@ -16,6 +16,7 @@ import Select from '../Select';
 import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
 import Button from '../Button';
+import ButtonSkeleton from '../Button/Button.Skeleton';
 import {
   StructuredListWrapper,
   StructuredListHead,
@@ -43,6 +44,30 @@ export default {
   },
 };
 
+export const Test = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
+
+      <ComposedModal
+        open={open}
+        onClose={() => setOpen(false)}
+        modalHeading="Testing Modal"
+        modalLabel="Test">
+        <ModalHeader>This modal is loading</ModalHeader>
+        <ModalBody>
+          <p>Loading...</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary">Cancel</Button>
+          <ButtonSkeleton />
+        </ModalFooter>
+      </ComposedModal>
+    </>
+  );
+};
+
 export const Default = () => {
   const [open, setOpen] = useState(true);
   return (

packages/styles/scss/components/modal/_modal.scss

@@ -37,15 +37,13 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     opacity: 0;
-    transition:
-      opacity $duration-moderate-02 motion(exit, expressive),
+    transition: opacity $duration-moderate-02 motion(exit, expressive),
       visibility 0ms linear $duration-moderate-02;
     visibility: hidden;
 
     &.is-visible {
       opacity: 1;
-      transition:
-        opacity $duration-moderate-02 motion(entrance, expressive),
+      transition: opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
 
@@ -297,6 +295,9 @@
     margin: 0;
     block-size: convert.to-rem(64px);
     max-inline-size: none;
+  }
+
+  .#{$prefix}--modal-footer .#{$prefix}--btn:not(.#{$prefix}--skeleton) {
     padding-block: calc($spacing-05 - convert.to-rem(2px)) $spacing-07;
   }
 
@@ -372,17 +373,15 @@
 
     border: 1px solid transparent;
     background-color: $layer;
-    box-shadow:
-      inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }
 
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
     @include ai-popover-gradient('default', 64px, 'layer');
 
-    box-shadow:
-      inset 0 -80px 0 -16px $layer,
+    box-shadow: inset 0 -80px 0 -16px $layer,
       inset 0 -160px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }