Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Active radios hidden on Paper with color="secondary" #629

Open
vhscom opened this issue Oct 4, 2023 · 0 comments
Open

Active radios hidden on Paper with color="secondary" #629

vhscom opened this issue Oct 4, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@vhscom
Copy link
Contributor

vhscom commented Oct 4, 2023

Describe the bug
When I add radio buttons as a child to Paper with color="secondary" the active radio button is not visible.

To Reproduce
Steps to reproduce the behavior:

  1. Install deps npm i -D @smui/paper @smui/form-field @smui/radio
  2. Drop code below into a +page.svelte document.
  3. View the document.
  4. Observe the active radio is not visible.
<script>
  import Paper from '@smui/paper';
  import FormField from '@smui/form-field';
  import Radio from '@smui/radio';

  let selected = 'total price';
</script>

<Paper color="secondary" variant="unelevated" class="content-wrapper">
  {#each ['total price', 'per credit price'] as options}
    <FormField>
      <Radio bind:group={selected} value={options} />
      <span slot="label">{`${options[0].toUpperCase()}${options.slice(1)}`}</span>
    </FormField>
  {/each}
</Paper>

Expected behavior
Active radio should be visible on Paper using secondary color.

Screenshots
https://github.com/hperrin/svelte-material-ui/assets/97140109/a24ad19a-9495-4c26-9ea3-fd59daa88b1f

Desktop (please complete the following information):

  • OS: [e.g. iOS] macos
  • Browser [e.g. chrome, safari] Chromium
  • Version [e.g. 22] Version 117.0.5938.92 (Official Build) (arm64)

Additional context
Bug created from newly scaffolded Svelte project using the SMUI v7 beta 15 release. On a related note the documentation website uses a Card to display radio examples. It's not possible to reproduce this issue using a Card because, although Card accepts a color attribute the attribute when set to color="secondary" does not change the color of the card.

@vhscom vhscom added the bug Something isn't working label Oct 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant