Progress Bar Label Becomes Unreadable at Low Values

DaveL17 commented 1 year ago

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

When the value of a progress bar becomes very low (counting down to zero), the label can become obscured/unreadable.

Suggested fix: when the value becomes low--say 10%--have the label display to the right of the bar in the "vacated" space.

In which browser(s) did the problem occur?

Firefox, Chrome, Safari

Steps To Reproduce

Literally, simply display a progress bar with a value like 5.

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

BeeMargarida commented 1 year ago

This was mentioned in the discord server, I'll leave this open since it's a problem and perhaps we should hide the label or move it outside. Here's a possible workaround that shows the label outside when the value is small:

<script lang="ts">
  import { Flex, Progress, SvelteUIProvider, Text } from "@svelteuidev/core";

  let value = 5;

  function increase() {
    if (value === 100) {
      return;
    }
    value += 5;
  }

  function decrease() {
    if (value === 0) {
      return;
    }
    value -= 5;
  }

  $: label = value <= 5 ? '' : `${value}%`;
</script>

<SvelteUIProvider>
  <Flex>
    <!-- This is necessary since Progress has a position relative, we need
     to set the width of the parent -->
    <div style="width: 100%">
      <Progress bind:value size="lg" {label} />
    </div>
    {#if value <= 5}
      <Text size={12} ml="4">{`${value}%`}</Text>
    {/if}
  </Flex>

  <div style="margin-top: 50px">
    <button on:click={increase}>Increase</button>
    <button on:click={decrease}>Decrease</button>
  </div>
</SvelteUIProvider>

Stackblitz with this: https://stackblitz.com/edit/vitejs-vite-6zjfau?file=src%2FApp.svelte

DaveL17 commented 1 year ago

Here's an html/js/css example of what I think would be ideal (the behavior, not necessarily the style). Have the label inside right until the lowest levels and then have it outside right. Rough code below.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Progress Bar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html {
            font-family: "Lato Heavy", sans-serif;
        }
        .container {
            border: solid 1px black;
            border-radius: 6px;
            height: 24px;
            box-shadow: inset #333333 1px 1px 8px;
            width: 100%;
        }
        .bar {
            background-color: #009fff;
            border-radius:3px;
            float: left;
            height:24px;
            width:90%;
        }
        .value {
            color: slategray;
            float: right;
            padding: 3px;
            position: relative;
        }
    </style>
</head>
<body>
    <div>
        <p>Battery Level</p>
        <div class="container">
            <div class="bar">
                <div class="value" id="barValue">90%</div>
                <script>
                    let value = 90
                    let barText = document.getElementById("barValue");
                    if (value >= 10) {
                        barText.setAttribute("style", "right: 0px; color: white");
                    } else {
                        barText.setAttribute("style", "right: -30px; color: slategrey");
                    }
                </script>
            </div>
        </div>
    </div>
</body>
</html>

DaveL17 commented 1 year ago

This is fixed and will be included in an upcoming PR.

svelteuidev / svelteui