fix: allow customizing ProgressBar width, fixes #1064

docs: add examples with custom widths
adobe · Dec 1, 2020 · 5b39f67 · 5b39f67
1 parent 81c94a0
commit 5b39f67
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
@@ -60,7 +60,7 @@ governing permissions and limitations under the License.
 .spectrum-ProgressBar-track {
  /* Visually apply border radius to child elements */
  overflow: hidden;
- inline-size: var(--spectrum-progressbar-width);
+ inline-size: 100%;
  block-size: var(--spectrum-progressbar-height);
  border-radius: var(--spectrum-progressbar-border-radius);
  z-index: 1; /* to fix a weird webkit bug with rounded corners and masking */
@@ -83,7 +83,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ProgressBar-label {
- flex: 1 1 0%;
+ flex: 0 1 0%;
 }
 
 .spectrum-ProgressBar-percentage {
@@ -97,6 +97,10 @@ governing permissions and limitations under the License.
  justify-content: space-between;
  inline-size: auto;
 
+ .spectrum-ProgressBar-track {
+ flex: 1 1 var(--spectrum-progressbar-width);
+ }
+
  .spectrum-ProgressBar-label {
  margin-inline-end: var(--spectrum-progressbar-label-gap-x);
  margin-block-end: 0;

diff --git a/components/progressbar/metadata/progressbar.yml b/components/progressbar/metadata/progressbar.yml
@@ -117,4 +117,24 @@ examples:
  <div class="spectrum-ProgressBar-fill"></div>
  </div>
  </div>
+ - id: progressbar
+ name: Custom width
+ markup: |
+ <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 500px;">
+ <div class="spectrum-ProgressBar-label">Loading</div>
+ <div class="spectrum-ProgressBar-percentage">50%</div>
+ <div class="spectrum-ProgressBar-track">
+ <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
+ </div>
+ </div>
+ - id: progressbar
+ name: Custom width (side label)
+ markup: |
+ <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM spectrum-ProgressBar--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 500px;">
+ <div class="spectrum-ProgressBar-label">Loading</div>
+ <div class="spectrum-ProgressBar-percentage">50%</div>
+ <div class="spectrum-ProgressBar-track">
+ <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
+ </div>
+ </div>