I'm not sure if this is the right place for this issue, as it may be more related to the implementation of the lightning-radio-group component than to the actual slds2 style system.
When a lightning-radio-group has only 1 option, the left-hand-side of the button is hard-cornered instead of rounded. If I do the same thing with a lightning-button-group and only include 1 button, that is styled properly.
Template (not formatting well any way I try it):
<template> <lightning-radio-group label="One button in lightning-radio-group" type="button" options={oneoptionlist} ></lightning-radio-group> <lightning-radio-group label="Two buttons in lightning-radio-group" type="button" options={twooptionlist} ></lightning-radio-group> <br/> lightning-button-group with 1 button:<br/> <lightning-button-group> <lightning-button label="Only Button"></lightning-button> </lightning-button-group> <br/><br/> lightning-button-group with 2 buttons:<br/> <lightning-button-group> <lightning-button label="One Button"></lightning-button> <lightning-button label="Another Button"></lightning-button> </lightning-button-group> </template>
Javascript:
`import { LightningElement, track } from 'lwc';
export default class RadioButtonGroup extends LightningElement {
@track oneoptionlist = [{value:"a", label:"Letter-A"}];
@track twooptionlist = [{value:"a", label:"Letter-A"},{value:"b",label:"Letter-B"}];
}`
I'm not sure if this is the right place for this issue, as it may be more related to the implementation of the lightning-radio-group component than to the actual slds2 style system.
When a lightning-radio-group has only 1 option, the left-hand-side of the button is hard-cornered instead of rounded. If I do the same thing with a lightning-button-group and only include 1 button, that is styled properly.
Template (not formatting well any way I try it):
<template> <lightning-radio-group label="One button in lightning-radio-group" type="button" options={oneoptionlist} ></lightning-radio-group> <lightning-radio-group label="Two buttons in lightning-radio-group" type="button" options={twooptionlist} ></lightning-radio-group> <br/> lightning-button-group with 1 button:<br/> <lightning-button-group> <lightning-button label="Only Button"></lightning-button> </lightning-button-group> <br/><br/> lightning-button-group with 2 buttons:<br/> <lightning-button-group> <lightning-button label="One Button"></lightning-button> <lightning-button label="Another Button"></lightning-button> </lightning-button-group> </template>Javascript:
`import { LightningElement, track } from 'lwc';
export default class RadioButtonGroup extends LightningElement {
@track oneoptionlist = [{value:"a", label:"Letter-A"}];
@track twooptionlist = [{value:"a", label:"Letter-A"},{value:"b",label:"Letter-B"}];
}`