histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.13k stars 182 forks source link

Hst.Radio should use the control title on each input id #433

Open EduardoLopes opened 1 year ago

EduardoLopes commented 1 year ago

Describe the bug

When controls have two radio of options, and one of the options have the same value, the ids of the inputs are the same and you can't select one of them.

lines 58 and 68: https://github.com/histoire-dev/histoire/blob/fbbc58f2700b7ba437c5846032b65239d1c7306c/packages/histoire-controls/src/components/radio/HstRadio.vue#L58;L68

Reproduction

https://stackblitz.com/edit/histoire-svelte3-starter-1c7h4t?file=src%2FBaseButton.story.svelte

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 13.46 GB / 23.38 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node
    npm: 9.3.1 - ~/.nvm/versions/node/v19.5.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
  npmPackages:
    @histoire/plugin-svelte: ^0.12.4 => 0.12.4 
    histoire: ^0.12.4 => 0.12.4 
    vite: ^4.0.4 => 4.0.4

Used Package Manager

npm

Validations

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

50rayn commented 10 months ago

I've tried to reproduce the mentioned issue and I succeeded. The issue was fixed in commit 9332337 in PR #574. So now the fixes are present in Histoire v0.17.3. I recommend updating all the dependencies to the latest version to get the fix. :)