Fix initial transitions; closes #247

docs/getting-started/changelog.md

@@ -8,8 +8,9 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Improved `sl-color-picker` grid and slider handles
-- Updated to Popper 2.5.3 to address a fixed position bug in Firefox
+- Fixed a bug where initial transitions didn't show in `sl-dialog` and `sl-drawer` [#247](https://github.com/shoelace-style/shoelace/issues/247)
+- Improved `sl-color-picker` grid and slider handles [#246](https://github.com/shoelace-style/shoelace/issues/246)
+- Updated to Popper 2.5.3 to address a fixed position bug in Firefox 
 
 ## 2.0.0-beta.20
 

src/components/dialog/dialog.scss

@@ -1,4 +1,5 @@
 @import 'component';
+@import 'mixins/visually-hidden';
 
 /**
  * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
@@ -20,8 +21,8 @@
   left: 0;
   z-index: var(--sl-z-index-dialog);
 
-  &[hidden] {
-    display: none;
+  &:not(.dialog--visible) {
+    @include visually-hidden;
   }
 }
 

src/components/dialog/dialog.tsx

@@ -29,12 +29,12 @@ let id = 0;
 export class Dialog {
   componentId = `dialog-${++id}`;
   dialog: HTMLElement;
-  isShowing = false;
   panel: HTMLElement;
 
   @Element() host: HTMLSlDialogElement;
 
   @State() hasFooter = false;
+  @State() isVisible = false;
 
   /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
   @Prop({ mutable: true, reflect: true }) open = false;
@@ -102,7 +102,7 @@ export class Dialog {
   @Method()
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isShowing) {
+    if (this.open) {
       return;
     }
 
@@ -112,9 +112,7 @@ export class Dialog {
       return;
     }
 
-    this.dialog.hidden = false;
-    this.host.clientWidth; // force a reflow
-    this.isShowing = true;
+    this.isVisible = true;
     this.open = true;
 
     lockBodyScrolling(this.host);
@@ -125,7 +123,7 @@ export class Dialog {
   @Method()
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isShowing) {
+    if (!this.open) {
       return;
     }
 
@@ -135,7 +133,6 @@ export class Dialog {
       return;
     }
 
-    this.isShowing = false;
     this.open = false;
 
     unlockBodyScrolling(this.host);
@@ -173,7 +170,7 @@ export class Dialog {
 
     // Ensure we only emit one event when the target element is no longer visible
     if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
-      this.dialog.hidden = !this.open;
+      this.isVisible = this.open;
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
 
       if (this.open) {
@@ -194,11 +191,11 @@ export class Dialog {
         class={{
           dialog: true,
           'dialog--open': this.open,
+          'dialog--visible': this.isVisible,
           'dialog--has-footer': this.hasFooter
         }}
         onKeyDown={this.handleKeyDown}
         onTransitionEnd={this.handleTransitionEnd}
-        hidden
       >
         <div part="overlay" class="dialog__overlay" onClick={this.handleOverlayClick} />
 

src/components/drawer/drawer.scss

@@ -1,4 +1,5 @@
 @import 'component';
+@import 'mixins/visually-hidden';
 
 /**
  * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
@@ -18,8 +19,8 @@
   pointer-events: none;
   overflow: hidden;
 
-  &[hidden] {
-    display: none;
+  &:not(.drawer--visible) {
+    @include visually-hidden;
   }
 }
 

src/components/drawer/drawer.tsx

@@ -28,12 +28,12 @@ let id = 0;
 export class Drawer {
   componentId = `drawer-${++id}`;
   drawer: HTMLElement;
-  isShowing = false;
   panel: HTMLElement;
 
   @Element() host: HTMLSlDrawerElement;
 
   @State() hasFooter = false;
+  @State() isVisible = false;
 
   /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
   @Prop({ mutable: true, reflect: true }) open = false;
@@ -110,7 +110,7 @@ export class Drawer {
   @Method()
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isShowing) {
+    if (this.open) {
       return;
     }
 
@@ -120,9 +120,7 @@ export class Drawer {
       return;
     }
 
-    this.drawer.hidden = false;
-    this.host.clientWidth; // force a reflow
-    this.isShowing = true;
+    this.isVisible = true;
     this.open = true;
 
     // Lock body scrolling only if the drawer isn't contained
@@ -137,7 +135,7 @@ export class Drawer {
   @Method()
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isShowing) {
+    if (!this.open) {
       return;
     }
 
@@ -147,7 +145,6 @@ export class Drawer {
       return;
     }
 
-    this.isShowing = false;
     this.open = false;
 
     unlockBodyScrolling(this.host);
@@ -186,7 +183,7 @@ export class Drawer {
 
     // Ensure we only emit one event when the target element is no longer visible
     if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {
-      this.drawer.hidden = !this.open;
+      this.isVisible = this.open;
       this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
 
       if (this.open) {
@@ -207,6 +204,7 @@ export class Drawer {
         class={{
           drawer: true,
           'drawer--open': this.open,
+          'drawer--visible': this.isVisible,
           'drawer--top': this.placement === 'top',
           'drawer--right': this.placement === 'right',
           'drawer--bottom': this.placement === 'bottom',
@@ -217,7 +215,6 @@ export class Drawer {
         }}
         onKeyDown={this.handleKeyDown}
         onTransitionEnd={this.handleTransitionEnd}
-        hidden
       >
         <div part="overlay" class="drawer__overlay" onClick={this.handleOverlayClick} />