fix(styles): dialog updates [ci visual]

SAP · Nov 3, 2023 · c132b1a · c132b1a
1 parent c710d37
commit c132b1a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 36 deletions.
diff --git a/packages/styles/stories/Components/dialog/default-dialog.example.html b/packages/styles/stories/Components/dialog/default-dialog.example.html
@@ -1,37 +1,28 @@
 
 <section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
-    <div class="fd-dialog__content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1">
+    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1">
         <span class="fd-dialog__resize-handle"></span>
-        <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
+        <header class="fd-dialog__header fd-bar">
             <div class="fd-bar__left">
-                <div class="fd-bar__element">
-                    Dialog header
-                </div>
                 <div class="fd-bar__element">
                     <h2 class="fd-title fd-title--h5" id="dialog-title-1">
                         Dialog title
                     </h2>
                 </div>
             </div>
         </header>
-        <div class="fd-dialog__subheader fd-bar fd-bar--subheader">
-            <div class="fd-bar__left">
-                <div class="fd-bar__element">
-                    Dialog subheader
-                </div>
-            </div>
-        </div>
         <div class="fd-dialog__body">
-            Dialog body
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...
             <div class="fd-dialog__loader">
-                Dialog loader
+                <div class="fd-busy-indicator fd-busy-indicator--m" aria-hidden="false" aria-label="Loading">
+                    <div class="fd-busy-indicator__circle"></div>
+                    <div class="fd-busy-indicator__circle"></div>
+                    <div class="fd-busy-indicator__circle"></div>
+                </div><br /><br />
             </div>
         </div>
         <footer class="fd-dialog__footer fd-bar fd-bar--footer">
             <div class="fd-bar__right">
-                <div class="fd-bar__element">
-                    Dialog footer
-                </div>
                 <div class="fd-bar__element">
                     <button class="fd-dialog__decisive-button fd-button">
                         Begin button

diff --git a/packages/styles/stories/Components/dialog/dialog.stories.js b/packages/styles/stories/Components/dialog/dialog.stories.js
@@ -52,7 +52,6 @@ export default {
   - \`fd-dialog__content\` Dialog window
     - \`fd-dialog__header\` Dialog header
       - \`fd-dialog__title\` Dialog title
-    - \`fd-dialog__subheader\` Dialog subheader
     - \`fd-dialog__body\` Dialog content
     - \`fd-dialog__loader\` Dialog loader
     - \`fd-dialog__footer\` Dialog footer
@@ -185,4 +184,4 @@ TabletAndHybridDeviceSpecification.parameters = {
       story: 'To properly support resizing for all input methods, the optional resize handle is context-dependent. Depending on the device, a full screen button is also shown for touch interaction.'
     }
   }
-};
+};
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -12424,38 +12424,29 @@ exports[`Check stories > Components/Counter > Story Tabs > Should match snapshot
 exports[`Check stories > Components/Dialog > Story DefaultDialog > Should match snapshot 1`] = `
 "
 <section class=\\"fd-dialog-docs-static fd-dialog fd-dialog--active\\">
-    <div class=\\"fd-dialog__content\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\">
+    <div class=\\"fd-dialog__content fd-dialog__content--s\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title-1\\">
         <span class=\\"fd-dialog__resize-handle\\"></span>
-        <header class=\\"fd-dialog__header fd-bar fd-bar--header-with-subheader\\">
+        <header class=\\"fd-dialog__header fd-bar\\">
             <div class=\\"fd-bar__left\\">
-                <div class=\\"fd-bar__element\\">
-                    Dialog header
-                </div>
                 <div class=\\"fd-bar__element\\">
                     <h2 class=\\"fd-title fd-title--h5\\" id=\\"dialog-title-1\\">
                         Dialog title
                     </h2>
                 </div>
             </div>
         </header>
-        <div class=\\"fd-dialog__subheader fd-bar fd-bar--subheader\\">
-            <div class=\\"fd-bar__left\\">
-                <div class=\\"fd-bar__element\\">
-                    Dialog subheader
-                </div>
-            </div>
-        </div>
         <div class=\\"fd-dialog__body\\">
-            Dialog body
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...
             <div class=\\"fd-dialog__loader\\">
-                Dialog loader
+                <div class=\\"fd-busy-indicator fd-busy-indicator--m\\" aria-hidden=\\"false\\" aria-label=\\"Loading\\">
+                    <div class=\\"fd-busy-indicator__circle\\"></div>
+                    <div class=\\"fd-busy-indicator__circle\\"></div>
+                    <div class=\\"fd-busy-indicator__circle\\"></div>
+                </div><br /><br />
             </div>
         </div>
         <footer class=\\"fd-dialog__footer fd-bar fd-bar--footer\\">
             <div class=\\"fd-bar__right\\">
-                <div class=\\"fd-bar__element\\">
-                    Dialog footer
-                </div>
                 <div class=\\"fd-bar__element\\">
                     <button class=\\"fd-dialog__decisive-button fd-button\\">
                         Begin button