Skip to content

Radio item with content slot #1095

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.

Sign up for GitHub

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

Merged
lucymeachem-p2p merged 10 commits into from
Jan 7, 2026
Merged

Radio item with content slot #1095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e764c2d
Use click on input to change value
Magnus93 Nov 7, 2025
fffafd1
Add radio demo
Magnus93 Nov 10, 2025
1e8ed60
detail slot in radio-item
Magnus93 Nov 10, 2025
7e50ed1
label fit-content
Magnus93 Nov 10, 2025
b0eb937
using css to show/hide slot content
qijieye Jan 2, 2026
d6e39c1
Merge branch 'master' into radio-item-width-content-slot
qijieye Jan 7, 2026
e1c49b1
update
qijieye Jan 7, 2026
3072926
remove unused
qijieye Jan 7, 2026
c4acd4f
css
qijieye Jan 7, 2026
df658b3
fix width
qijieye Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,8 @@ export namespace Components {
}
interface SmoothlyInputDemo {
}
interface SmoothlyInputDemoRadio {
}
interface SmoothlyInputDemoStandard {
}
interface SmoothlyInputDemoUserInput {
Expand Down Expand Up @@ -1601,6 +1603,12 @@ declare global {
prototype: HTMLSmoothlyInputDemoElement;
new (): HTMLSmoothlyInputDemoElement;
};
interface HTMLSmoothlyInputDemoRadioElement extends Components.SmoothlyInputDemoRadio, HTMLStencilElement {
}
var HTMLSmoothlyInputDemoRadioElement: {
prototype: HTMLSmoothlyInputDemoRadioElement;
new (): HTMLSmoothlyInputDemoRadioElement;
};
interface HTMLSmoothlyInputDemoStandardElement extends Components.SmoothlyInputDemoStandard, HTMLStencilElement {
}
var HTMLSmoothlyInputDemoStandardElement: {
Expand Down Expand Up @@ -2267,6 +2275,7 @@ declare global {
"smoothly-input-date-range": HTMLSmoothlyInputDateRangeElement;
"smoothly-input-date-time": HTMLSmoothlyInputDateTimeElement;
"smoothly-input-demo": HTMLSmoothlyInputDemoElement;
"smoothly-input-demo-radio": HTMLSmoothlyInputDemoRadioElement;
"smoothly-input-demo-standard": HTMLSmoothlyInputDemoStandardElement;
"smoothly-input-demo-user-input": HTMLSmoothlyInputDemoUserInputElement;
"smoothly-input-edit": HTMLSmoothlyInputEditElement;
Expand Down Expand Up @@ -2705,6 +2714,8 @@ declare namespace LocalJSX {
interface SmoothlyInputDemo {
"onSmoothlyUrlUpdate"?: (event: SmoothlyInputDemoCustomEvent<{ path: string; query?: string }>) => void;
}
interface SmoothlyInputDemoRadio {
}
interface SmoothlyInputDemoStandard {
}
interface SmoothlyInputDemoUserInput {
Expand Down Expand Up @@ -3086,6 +3097,7 @@ declare namespace LocalJSX {
"smoothly-input-date-range": SmoothlyInputDateRange;
"smoothly-input-date-time": SmoothlyInputDateTime;
"smoothly-input-demo": SmoothlyInputDemo;
"smoothly-input-demo-radio": SmoothlyInputDemoRadio;
"smoothly-input-demo-standard": SmoothlyInputDemoStandard;
"smoothly-input-demo-user-input": SmoothlyInputDemoUserInput;
"smoothly-input-edit": SmoothlyInputEdit;
Expand Down Expand Up @@ -3202,6 +3214,7 @@ declare module "@stencil/core" {
"smoothly-input-date-range": LocalJSX.SmoothlyInputDateRange & JSXBase.HTMLAttributes<HTMLSmoothlyInputDateRangeElement>;
"smoothly-input-date-time": LocalJSX.SmoothlyInputDateTime & JSXBase.HTMLAttributes<HTMLSmoothlyInputDateTimeElement>;
"smoothly-input-demo": LocalJSX.SmoothlyInputDemo & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoElement>;
"smoothly-input-demo-radio": LocalJSX.SmoothlyInputDemoRadio & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoRadioElement>;
"smoothly-input-demo-standard": LocalJSX.SmoothlyInputDemoStandard & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoStandardElement>;
"smoothly-input-demo-user-input": LocalJSX.SmoothlyInputDemoUserInput & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoUserInputElement>;
"smoothly-input-edit": LocalJSX.SmoothlyInputEdit & JSXBase.HTMLAttributes<HTMLSmoothlyInputEditElement>;
Expand Down
1 change: 1 addition & 0 deletions src/components/input/demo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export class SmoothlyInputDemo {
<smoothly-input-demo-standard />
<smoothly-input-date-demo />
<smoothly-input-demo-user-input />
<smoothly-input-demo-radio />
<div class="inputs">
<h2>Calendar</h2>
<smoothly-input-date name="some-date">Calendar</smoothly-input-date>
Expand Down
55 changes: 55 additions & 0 deletions src/components/input/demo/radio/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Component, h, Host, State, Watch } from "@stencil/core"

@Component({
tag: "smoothly-input-demo-radio",
styleUrl: "style.css",
scoped: true,
})
export class SmoothlyInputDemoRadio {
@State() selected: string

@Watch("selected")
selectedChange() {
console.log("selected", this.selected)
}

render() {
return (
<Host>
<h2>radio input - column direction</h2>
<smoothly-input-radio
name="radio"
direction="column"
onSmoothlyInput={e => (this.selected = e.detail.radio as string)}>
<smoothly-input-radio-item value="1">
<span>Option 1</span>

<span slot="detail">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</span>
</smoothly-input-radio-item>
<smoothly-input-radio-item value="2" selected>
<span>Option 2</span>
<div slot="detail">
<smoothly-tabs>
<smoothly-tab label="Dog" name="dog" open>
🐕
</smoothly-tab>
<smoothly-tab label="Cat" name="cat">
🐈
</smoothly-tab>
<smoothly-tab label="Rat" name="rat">
🐀
</smoothly-tab>
</smoothly-tabs>
</div>
</smoothly-input-radio-item>
</smoothly-input-radio>
</Host>
)
}
}
12 changes: 12 additions & 0 deletions src/components/input/demo/radio/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
:host {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
max-width: min(56rem, 100%);
margin: auto;
flex-direction: column;
gap: 0.5rem;
}

:host :not(smoothly-input-date):not(smoothly-input-date-range) {
grid-column: 1 / -1;
}
1 change: 1 addition & 0 deletions src/components/input/radio/item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export class SmoothlyInputRadioItem {
<label>
<slot />
</label>
<slot name="detail" />
</Host>
)
}
Expand Down
11 changes: 10 additions & 1 deletion src/components/input/radio/item/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
:host {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
}
Expand Down Expand Up @@ -29,8 +30,16 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch
position: absolute;
transform: translateX(50%);
}

:host>label {
padding: 0 .3em;
white-space: nowrap;
}

:host[selected] ::slotted([slot="detail"]) {
display: block;
width: 100%;
}
:host ::slotted([slot="detail"]) {
display: none;
}

1 change: 1 addition & 0 deletions src/components/input/radio/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
:host>div>div.options {
display: flex;
gap: 1.5rem;
width: 100%;
}
:host[direction=column]>div>div.options {
flex-direction: column;
Expand Down