Skip to content

Commit

Permalink
fix(radion-button): opening slug and cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore committed Dec 8, 2023
1 parent 8e9cfdb commit c2a48b6
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 122 deletions.
7 changes: 5 additions & 2 deletions packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
legendText,
helperText,
_hasSlug: hasSlug,
_handleSlotChange: handleSlotChange
_handleSlotChange: handleSlotChange,
} = this;

const showWarning = !readOnly && !invalid && warn;
Expand Down Expand Up @@ -245,7 +245,10 @@ class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
?disabled="${disabled}"
aria-readonly="${readOnly}">
${legendText
? html` <legend class="${prefix}--label">${legendText} <slot name="slug" @slotchange="${handleSlotChange}"></slot></legend>`
? html` <legend class="${prefix}--label">
${legendText}
<slot name="slug" @slotchange="${handleSlotChange}"></slot>
</legend>`
: ``}
<slot></slot>
</fieldset>
Expand Down
16 changes: 8 additions & 8 deletions packages/carbon-web-components/src/components/radio-button/radio-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ $css--plex: true !default;
:host(#{$prefix}-radio-button[orientation='vertical']) {
margin-block-end: to-rem(6px);
margin-inline-end: 0;
}
}

:host(#{$prefix}-radio-button[invalid]) .#{$prefix}--radio-button__appearance {
border-color: $support-error;
border-color: $support-error !important; /* stylelint-disable-line declaration-no-important */
}

:host(#{$prefix}-radio-button[data-table]) {
Expand Down Expand Up @@ -109,22 +109,22 @@ $css--plex: true !default;
}
}

:host(#{$prefix}-radio-button[slug]){
:host(#{$prefix}-radio-button[slug]) {
.#{$prefix}--radio-button__label-text {
display: flex;
}
}

:host(#{$prefix}-radio-button-group) .#{$prefix}--radio-button-group--slug,
:host(#{$prefix}-radio-button[slug]){
::slotted(#{$prefix}-slug){
:host(#{$prefix}-radio-button[slug]) {
::slotted(#{$prefix}-slug) {
margin-inline-start: $spacing-03;
}
}

:host(#{$prefix}-radio-button[slug]){
::slotted(#{$prefix}-slug[inline]){
:host(#{$prefix}-radio-button[slug]) {
::slotted(#{$prefix}-slug[inline]) {
line-height: inherit;
margin-block-start: to-rem(-1px);
}
}
}
98 changes: 57 additions & 41 deletions packages/carbon-web-components/src/components/radio-button/radio-button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,33 +120,39 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
/**
* The hidden radio button.
*/
@query('#input')
@query('input')
private _inputNode!: HTMLInputElement;

/**
* Handles `click` event on this element.
*/
@HostListener('click')
// @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
private _handleClick = () => {
const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;
if (radioButtonDelegate && !disabled && !this.disabledItem) {
this.checked = true;
if (this._manager) {
this._manager.select(radioButtonDelegate, this.readOnly);
private _handleClick = (event) => {
if (
!(event.target as HTMLElement).matches(
(this.constructor as typeof CDSRadioButton)?.slugItem
)
) {
const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;
if (radioButtonDelegate && !disabled && !this.disabledItem) {
this.checked = true;
if (this._manager) {
this._manager.select(radioButtonDelegate, this.readOnly);
}
this.dispatchEvent(
new CustomEvent(
(this.constructor as typeof CDSRadioButton).eventChange,
{
bubbles: true,
composed: true,
detail: {
checked: this.checked,
},
}
)
);
}
this.dispatchEvent(
new CustomEvent(
(this.constructor as typeof CDSRadioButton).eventChange,
{
bubbles: true,
composed: true,
detail: {
checked: this.checked,
},
}
)
);
}
};

Expand All @@ -156,22 +162,28 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
@HostListener('keydown')
// @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
private _handleKeydown = (event: KeyboardEvent) => {
const { orientation, _radioButtonDelegate: radioButtonDelegate } = this;
const manager = this._manager;
if (radioButtonDelegate && manager) {
const navigationDirectionForKey =
orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL
? navigationDirectionForKeyHorizontal
: navigationDirectionForKeyVertical;
const navigationDirection = navigationDirectionForKey[event.key];
if (navigationDirection) {
manager.select(
manager.navigate(radioButtonDelegate, navigationDirection),
this.readOnly
);
}
if (event.key === ' ' || event.key === 'Enter') {
manager.select(radioButtonDelegate, this.readOnly);
if (
!(event.target as HTMLElement).matches(
(this.constructor as typeof CDSRadioButton)?.slugItem
)
) {
const { orientation, _radioButtonDelegate: radioButtonDelegate } = this;
const manager = this._manager;
if (radioButtonDelegate && manager) {
const navigationDirectionForKey =
orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL
? navigationDirectionForKeyHorizontal
: navigationDirectionForKeyVertical;
const navigationDirection = navigationDirectionForKey[event.key];
if (navigationDirection) {
manager.select(
manager.navigate(radioButtonDelegate, navigationDirection),
this.readOnly
);
}
if (event.key === ' ' || event.key === 'Enter') {
manager.select(radioButtonDelegate, this.readOnly);
}
}
}
};
Expand All @@ -192,7 +204,10 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {

this._hasSlug = Boolean(hasContent);
const type = (hasContent[0] as HTMLElement).getAttribute('kind');
(hasContent[0] as HTMLElement).setAttribute('size', type === 'inline' ? 'md' : 'mini');
(hasContent[0] as HTMLElement).setAttribute(
'size',
type === 'inline' ? 'md' : 'mini'
);
this.requestUpdate();
}

Expand Down Expand Up @@ -291,7 +306,7 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
_radioButtonDelegate: radioButtonDelegate,
name,
} = this;

if (changedProperties.has('checked') || changedProperties.has('name')) {
if (this.readOnly) {
this.checked = false;
Expand Down Expand Up @@ -334,7 +349,7 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
});
return html`
<input
id="input"
id="radio"
type="radio"
class="${prefix}--radio-button"
.checked=${checked}
Expand All @@ -343,9 +358,10 @@ class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
value=${ifDefined(value)} />
<label for="input" class="${prefix}--radio-button__label">
<span class="${prefix}--radio-button__appearance"></span>
<span class="${innerLabelClasses}">${labelText}
<slot name="slug" @slotchange="${this._handleSlotChange}"></slot></span>
<span class="${innerLabelClasses}"
>${labelText}
<slot name="slug" @slotchange="${this._handleSlotChange}"></slot
></span>
</label>
`;
}
Expand Down
143 changes: 87 additions & 56 deletions packages/carbon-web-components/src/components/slug/slug-example-story.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { boolean } from '@storybook/addon-knobs';
import View16 from '@carbon/icons/lib/view/16';
import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
import Folders16 from '@carbon/icons/lib/folders/16';
import textNullable from '../../../.storybook/knob-text-nullable';
import { prefix } from '../../globals/settings';
import './index';
import '../icon-button/index';
Expand Down Expand Up @@ -210,72 +211,102 @@ export const _NumberItem = () => {
</div> `;
};

export const _RadioButton = () => {
return html`
<div class="slug-check-radio-container">
<cds-radio-button-group
legend-text="Group label"
name="radio-group"
value="radio-1"
orientation="vertical">
<cds-slug alignment="bottom-left"> ${content}${actions} </cds-slug>
<cds-radio-button
label-text="Radio button label"
value="radio-1"></cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-2"></cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-3"></cds-radio-button>
</cds-radio-button-group>
export const _RadioButton = (args) => {
const { disabled, invalid, invalidText, warn, warnText } =
args?.['cds-radio-button'] ?? {};

<cds-radio-button-group
legend-text="Group label"
name="radio-group-2"
value="radio-4"
orientation="vertical">
<cds-radio-button
label-text="Radio button label"
value="radio-4">
return html`
<style>
${styles}
</style>
<cds-radio-button-group
legend-text="Group label"
name="radio-group"
value="radio-1"
orientation="vertical"
?disabled="${disabled}"
?invalid="${invalid}"
invalid-text="${invalidText}"
?warn="${warn}"
warn-text="${warnText}">
<cds-slug alignment="bottom-left"> ${content}${actions} </cds-slug>
<cds-radio-button
label-text="Radio button label"
value="radio-1"></cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-2"></cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-3"></cds-radio-button>
</cds-radio-button-group>
<cds-radio-button-group
legend-text="Group label"
name="radio-group-2"
value="radio-4"
orientation="vertical"
?disabled="${disabled}"
?invalid="${invalid}"
invalid-text="${invalidText}"
?warn="${warn}"
warn-text="${warnText}">
<cds-radio-button label-text="Radio button label" value="radio-4">
<cds-slug alignment="bottom-left"> ${content}${actions} </cds-slug>
</cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-5">
<cds-slug alignment="bottom-left"> ${content}${actions} </cds-slug>
<cds-radio-button label-text="Radio button label" value="radio-5">
<cds-slug alignment="bottom-left"> ${content}${actions} </cds-slug>
</cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-6"></cds-radio-button>
</cds-radio-button-group>
<cds-radio-button-group
legend-text="Group label"
name="radio-group-2"
value="radio-4"
orientation="vertical">
<cds-radio-button
label-text="Radio button label"
value="radio-4">
<cds-slug alignment="bottom-left" kind="inline"> ${content}${actions} </cds-slug>
<cds-radio-button
label-text="Radio button label"
value="radio-6"></cds-radio-button>
</cds-radio-button-group>
<cds-radio-button-group
legend-text="Group label"
name="radio-group-3"
value="radio-7"
orientation="vertical"
?disabled="${disabled}"
?invalid="${invalid}"
invalid-text="${invalidText}"
?warn="${warn}"
warn-text="${warnText}">
<cds-radio-button label-text="Radio button label" value="radio-7">
<cds-slug alignment="bottom-left" kind="inline">
${content}${actions}
</cds-slug>
</cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-5">
<cds-slug alignment="bottom-left" kind="inline"> ${content}${actions} </cds-slug>
<cds-radio-button label-text="Radio button label" value="radio-8">
<cds-slug alignment="bottom-left" kind="inline">
${content}${actions}
</cds-slug>
</cds-radio-button>
<cds-radio-button
label-text="Radio button label"
value="radio-6"></cds-radio-button>
</cds-radio-button-group>
</div>
<cds-radio-button
label-text="Radio button label"
value="radio-9"></cds-radio-button>
</cds-radio-button-group>
`;
};

_RadioButton.parameters = {
knobs: {
[`${prefix}-radio-button`]: () => ({
disabled: boolean('Disabled (disabled)', false),
invalid: boolean('Invalid (invalid)', false),
invalidText: textNullable(
'Invalid text (invalid-text)',
'Error message goes here'
),
warn: boolean('Warn (warn)', false),
warnText: textNullable(
'Warn text (warn-text)',
'Warning message that is really long can wrap to more lines but should not be excessively long.'
),
}),
},
};

export const _Select = () => {
return html`<style>
${styles}
Expand Down
Loading

0 comments on commit c2a48b6

Please sign in to comment.