Fix ProgressBar alignment and spacing in aside mode

[lucasn4s]

Fixed an issue in the ProgressBar component where the progress text and the bar were vertically misaligned and lacked spacing when showText and textAside props were active.

The fix involved:

1. Updating the template to conditionally apply progress-bar--aside and progress-bar__text--aside classes.
2. Ensuring progress-bar__left is only applied when the text is NOT in aside mode to avoid alignment conflicts.
3. Updating the SCSS to implement a 4px gap using the gap property on the flex container.
4. Removing default margins on the text element when in aside mode to ensure perfect vertical centering within the flex container.
5. Added a unit test to src/tests/ProgressBar.spec.ts to verify the fix.
6. Verified the changes visually via the local documentation server.

---

PR created automatically by Jules for task 11071333345092221231 started by @lucasn4s

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[greptile-apps]

Greptile Summary

Este PR corrige com sucesso um problema de alinhamento vertical e espaçamento no componente ProgressBar quando as props showText e textAside estão ativas simultaneamente.

Principais mudanças:

• Adição de classes condicionais (progress-bar--aside, progress-bar__text--aside) no template para isolar o estilo do modo aside
• Prevenção do conflito com progress-bar__left ao garantir que ele só é aplicado quando textAside é false
• Implementação de gap: 4px no container flex para o espaçamento entre texto e barra
• Reset do margin no elemento de texto no modo aside
• Bump de versão de 3.154.7 para 3.154.8
• Adição de teste unitário que verifica a aplicação correta das classes no modo aside

A correção é focada, bem delimitada ao componente afetado e não introduz breaking changes. A lógica de classes condicionais está correta e o novo teste cobre o caso de uso principal.

Confidence Score: 5/5

• PR seguro para merge. A correção é focada, bem implementada e não introduz breaking changes.
• A implementação resolve completamente o problema de alinhamento e espaçamento descrito. As classes condicionais são aplicadas corretamente, a lógica de template está sólida, e o novo teste cobre adequadamente o caso de uso. Não há problemas funcionais ou de segurança identificados.
• No files require special attention

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ProgressBar renderizado] --> B{textAside?}
    B -- Sim --> C[Aplica progress-bar--aside\ngap: 4px no container]
    B -- Nao --> D{textLeft?}
    D -- Sim --> E[Aplica progress-bar__left\nalign-items: initial]
    D -- Nao --> F[Sem classe extra]
    C --> G{showText?}
    G -- Sim --> H[Span com progress-bar__text\n+ progress-bar__text--aside\nmargin: 0]
    G -- Nao --> I[Span nao renderizado]
    B -- Nao --> J{showText?}
    J -- Sim --> K[Span com progress-bar__text\nmargin: mb 2]
    J -- Nao --> L[Span nao renderizado]

Loading

_{Last reviewed commit: 46147da}