Skip to content

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

Open
@vhscom

Description

@vhscom

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions