spectrum-web-components

spectrum-web-components copied to clipboard

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

Progress Bar, Dialog Wrapper

Expected behavior

The Progress Bar should not skip when animating its indeterminate state.

Actual behavior

When in a Dialog Wrapper the animation skips in the middle.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to https://webcomponents.dev/edit/07cCgcA7BqupVXwJRmsk/src/index.ts
2. Click on 'Toggle Dialog'
3. See animation skip

Sample code that illustrates the problem

// By Westbrook Johnson @westbrookj

import {
  LitElement,
  html,
  customElement,
  TemplateResult,
} from "lit-element";
import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
import "@spectrum-web-components/button/sp-button.js";
import "@spectrum-web-components/overlay/overlay-trigger.js";
import "@spectrum-web-components/progress-bar/sp-progress-bar.js";

@customElement("my-dialog")
export default class MyActionGroup extends LitElement {
  protected render(): TemplateResult {
    return html`
      <overlay-trigger type="modal" placement="none">
          <sp-dialog-wrapper
              slot="click-content"
              headline="Dialog title"
              dismissable
              underlay
          >
              Content of the dialog
              <sp-progress-bar side-label="" indeterminate="" label="Label Beside" dir="ltr" size="m" role="progressbar" aria-label="Label Beside"></sp-progress-bar>
          </sp-dialog-wrapper>
          <sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
      </overlay-trigger>
    `;
  }
}

Logs taken while reproducing problem

No response