Skip to content

Commit

Permalink
chore: radiogroup clear selection (#1872)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotNestor
NotNestor authored Jan 31, 2025
1 parent 46f729b commit 14d438b
Show file tree
Hide file tree
Showing 6 changed files with 434 additions and 72 deletions.
2 changes: 1 addition & 1 deletion web-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@momentum-ui/web-components",
"version": "2.17.6",
"version": "2.17.7",
"author": "Yana Harris",
"license": "MIT",
"repository": "https://github.com/momentum-design/momentum-ui.git",
Expand Down
117 changes: 70 additions & 47 deletions web-components/src/[sandbox]/examples/radio-group.ts
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,75 @@
import "@/components/icon/Icon";
import "@/components/radio/Radio";
import "@/components/radio/RadioGroup";
import { html } from "lit-element";
import { RadioGroup } from "@/components/radio/RadioGroup";
import "@/components/tooltip/Tooltip";
import { customElement, html, LitElement } from "lit-element";

@customElement("radiogroup-template-sandbox")
export class RadioGroupTemplateSandbox extends LitElement {
render() {
return html` <h3>Default</h3>
<md-radiogroup group-label="group_process">
<md-radio slot="radio" value="Option 1">Option 1</md-radio>
<md-radio slot="radio" value="Option 2">Option 2</md-radio>
<md-radio slot="radio" value="Option 3">Option 3</md-radio>
<md-radio slot="radio" value="Option 4">Option 4</md-radio>
</md-radiogroup>
<h3>Horizontal</h3>
<md-radiogroup group-label="group_process" alignment="horizontal">
<md-radio slot="radio" value="developing">
<span>Long Radio description overflowing text with three dots in the end</span>
</md-radio>
<md-radio slot="radio" value="Option 1">Option 1</md-radio>
<md-radio slot="radio" value="Option 2">Option 2</md-radio>
<md-radio slot="radio" value="Option 3">Option 3</md-radio>
<md-radio slot="radio" value="developing 2" style="max-width:64px;">
<span>Long Radio description overflowing text with three dots in the end</span>
</md-radio>
</md-radiogroup>
<h3>Pre-Checked Radio</h3>
<md-radiogroup id="pre-checked-radio-group" group-label="group_process" checked="1">
<md-radio slot="radio" value="Option 1">Option 1</md-radio>
<md-radio slot="radio" value="Option 2">Option 2 [Preselected]</md-radio>
<md-radio slot="radio" value="Option 3">Option 3</md-radio>
<md-radio slot="radio" value="Option 4">Option 4</md-radio>
</md-radiogroup>
<md-button
variant="primary"
ariaLabel="Clear selection"
@button-click=${() => {
const radioGroup = this?.shadowRoot?.querySelector("#pre-checked-radio-group") as RadioGroup.ELEMENT;
if (radioGroup) {
radioGroup.clearSelection();
}
}}
>
<span slot="text">Clear selection</span>
</md-button>
<h3>Disabled</h3>
<md-radiogroup group-label="group_process" checked="2">
<md-radio slot="radio" value="Option">Option</md-radio>
<md-radio slot="radio" value="Disabled" disabled>Disabled</md-radio>
<md-radio slot="radio" value="Option 2 ">Option 2 [Preselected]</md-radio>
<md-radio slot="radio" value="Disabled 2" disabled>Disabled 2</md-radio>
</md-radiogroup>
<h3>Radio buttons with icons</h3>
<md-radiogroup group-label="group_process">
<md-radio slot="radio" value="Option 1">
Option 1
<md-icon name="info-badge-filled" size="16" iconSet="momentumDesign"></md-icon>
</md-radio>
<md-radio slot="radio" value="Option 2">
Option 2
<md-tooltip message="Tooltip message" placement="top">
<md-icon name="info-badge-filled" size="16" iconSet="momentumDesign"></md-icon>
</md-tooltip>
</md-radio>
</md-radiogroup>`;
}
}

export const radioGroupTemplate = html`
<h3>Default</h3>
<md-radiogroup group-label="group_process">
<md-radio slot="radio" value="Option 1">Option 1</md-radio>
<md-radio slot="radio" value="Option 2">Option 2</md-radio>
<md-radio slot="radio" value="Option 3">Option 3</md-radio>
<md-radio slot="radio" value="Option 4">Option 4</md-radio>
</md-radiogroup>
<h3>Horizontal</h3>
<md-radiogroup group-label="group_process" alignment="horizontal">
<md-radio slot="radio" value="developing">
<span>Long Radio description overflowing text with three dots in the end</span>
</md-radio>
<md-radio slot="radio" value="Option 1">Option 1</md-radio>
<md-radio slot="radio" value="Option 2">Option 2</md-radio>
<md-radio slot="radio" value="Option 3">Option 3</md-radio>
<md-radio slot="radio" value="developing 2" style="max-width:64px;">
<span>Long Radio description overflowing text with three dots in the end</span>
</md-radio>
</md-radiogroup>
<h3>Pre-Checked Radio</h3>
<md-radiogroup group-label="group_process" checked="1">
<md-radio slot="radio" value="Option 1">Option 1</md-radio>
<md-radio slot="radio" value="Option 2">Option 2 [Preselected]</md-radio>
<md-radio slot="radio" value="Option 3">Option 3</md-radio>
<md-radio slot="radio" value="Option 4">Option 4</md-radio>
</md-radiogroup>
<h3>Disabled</h3>
<md-radiogroup group-label="group_process" checked="2">
<md-radio slot="radio" value="Option">Option</md-radio>
<md-radio slot="radio" value="Disabled" disabled>Disabled</md-radio>
<md-radio slot="radio" value="Option 2 ">Option 2 [Preselected]</md-radio>
<md-radio slot="radio" value="Disabled 2" disabled>Disabled 2</md-radio>
</md-radiogroup>
<h3>Radio buttons with icons</h3>
<md-radiogroup group-label="group_process">
<md-radio slot="radio" value="Option 1">
Option 1
<md-icon name="info-badge-filled" size="16" iconSet="momentumDesign"></md-icon>
</md-radio>
<md-radio slot="radio" value="Option 2">
Option 2
<md-tooltip message="Tooltip message" placement="top">
<md-icon name="info-badge-filled" size="16" iconSet="momentumDesign"></md-icon>
</md-tooltip>
</md-radio>
</md-radiogroup>
<h3 class="sandbox-header">Default Favorite</h3>
<radiogroup-template-sandbox></radiogroup-template-sandbox>
`;
6 changes: 3 additions & 3 deletions web-components/src/components/button/scss/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -701,15 +701,15 @@

:host([variant="ghost"]) .md-button {
background-color: var(--button-ghost-bg-color, transparent);
color: var(--button-ghost-text-color, var(--button-secondary-text-color));
color: var(--button-ghost-text-color);
border: unset;

&:hover {
background-color: var(--button-ghost-hover-bg-color, var(--button-secondary-hover-bg-color));
background-color: var(--button-ghost-hover-bg-color);
}

&:active {
background-color: var(--button-ghost-pressed-bg-color, var(--button-secondary-pressed-bg-color));
background-color: var(--button-ghost-pressed-bg-color);
}

&:disabled,
Expand Down
Loading

0 comments on commit 14d438b

Please sign in to comment.