Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Add support for radio buttons based on a slot #136

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add support for radio buttons based on a slot #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07aacf1
Add support for radio buttons based on a slot
Fleker Mar 17, 2020
59f38aa
Migrate styles into demo, fix Travis
Fleker Apr 1, 2020
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
54 changes: 54 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
<script type="module">
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-icons/iron-icons.js';
import '../paper-radio-button.js';

import {html} from '@polymer/polymer/lib/utils/html-tag.js';
Expand Down Expand Up @@ -84,6 +86,58 @@ <h3>Radio buttons can be styled using custom properties</h3>
<paper-radio-button checked class="green">Radio</paper-radio-button>
</template>
</demo-snippet>

<h3>Radio buttons can additionally be a series of icons</h3>
<demo-snippet class="centered-demo">
<template>
<style>
/* When the element is in 'icon' mode rather than classic radio buttons,
* change styles
*/
paper-radio-button[icon]::part(#radioContainer) {
width: 24px;
height: 24px;
}
paper-radio-button[icon]::part(#offRadio),
paper-radio-button[icon]::part(#onRadio) {
transition: color ease 0.28s;
}
paper-radio-button[icon]::part(#offRadio) {
border: none;
background-color: initial;
transition: initial;
}
paper-radio-button[icon]::part(#onRadio) {
background-color: initial;
-webkit-transform: initial;
transform: initial;
transition: initial;
will-change: initial;
}
paper-radio-button[icon][checked]::part(#offRadio) {
border-color: initial;
color: var(--paper-radio-button-checked-color, var(--primary-color));
}
paper-radio-button[icon][checked]::part(#onRadio) {
-webkit-transform: initial;
transform: initial;
background-color: initial;
color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
}
</style>
<paper-radio-button icon>
<span slot="icon">
<iron-icon icon="search"></iron-icon>
</span>
</paper-radio-button>
<paper-radio-button icon>
<span slot="icon">
<iron-icon icon="announcement"></iron-icon>
</span>
Feedback Mode
</paper-radio-button>
</template>
</demo-snippet>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"@polymer/iron-test-helpers": "^3.0.0-pre.26",
"wct-browser-legacy": "^1.0.1",
"@webcomponents/webcomponentsjs": "^2.0.0",
"@polymer/gen-typescript-declarations": "^1.5.1"
"@polymer/gen-typescript-declarations": "^1.5.1",
"@polymer/iron-icons": "^3.0.1"
},
"scripts": {
"format": "webmat",
Expand Down
9 changes: 8 additions & 1 deletion paper-radio-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ Example:

<paper-radio-button></paper-radio-button>
<paper-radio-button>Item label</paper-radio-button>
<paper-radio-button icon>
<span slot="icon">
<iron-icon icon="search"></iron-icon>
</span>
</paper-radio-button>

### Styling

Expand Down Expand Up @@ -183,7 +188,9 @@ Polymer({
</style>

<div id="radioContainer">
<div id="offRadio"></div>
<div id="offRadio">
<slot name="icon"></slot>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about putting the slot on #radioContainer instead have have #onRadio #offRadio as the fallback content. That would allow you not override any of the existing CSS rules.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like

<slot name="icon">
  <p>I'm some default content!</p>
</slot>

One challenge I ran into making this PR is that it seems hard to actually change the styles in shadow DOM from outside the stylesheet. I couldn't apply changes to #offRadio unless it was in this element or I exposed a variable.

Copy link

@proppy proppy Mar 18, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was more thinking of:

<div id="radioContainer">
   <slot name="radioContent">
       <div id="onRadio"></div>
       <div id="offRadio"></div>
   </slot>
</div>

And the CSS for #onRadio and #offRadio would get automatically trashed if you override the slot.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I put something custom in the slot, can I customize it using external CSS? Or is it still bound by shadow DOM rules?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming it's an iron-icon and the existing CSS rules that applied on #onRadio and #offRadio are discarded, would it need any additional external CSS than the one included in the <iron-icon> shadow DOM?

Copy link

@proppy proppy Mar 18, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/en-US/docs/Web/CSS/::part or have a custom iron-radio-selectable that embed an icon w/ dedicated CSS and follow https://www.webcomponents.org/element/@polymer/paper-radio-group selection protocol (thru PaperCheckedElementBehavior?)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For our purposes we really just need to stick an icon in there. Maybe we can use the ::part rule, but I don't want to implement too much custom behavior.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be interested in getting some advice from @bicknellr on what may be the most idiomatic way

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the PR to use ::part and extract the style behavior outside of the component. I'm not sure if this is the best approach, as it means the default will not work very well, but it should be otherwise be functional.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that you're using ::part that should mean that the CSS could live outside of the element, no? So the only patch you really need here is a <slot> (and putting in on the parent would allow you to discard both element and their associated css rule).

</div>
<div id="onRadio"></div>
</div>

Expand Down