Skip to content

Commit

Permalink
fix: tweak styles, icon, examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@luwes
luwes committed Mar 18, 2023
1 parent 07317bb commit 8342b23
Show file tree
Hide file tree
Showing 4 changed files with 202 additions and 114 deletions.
226 changes: 143 additions & 83 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,95 +7,155 @@
<script src="../dist/polyfill.js"></script>

<template extends="./layout.html">
<template block="content">
<h3>Default behavior</h3>

<selectmenu id="pet">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>

<script>
function addOption() {
let opt = document.createElement("option");
opt.textContent = "Frog";
pet.prepend(opt);
}
</script>

<button id="btn" onclick="addOption()">Add option</button>

<selectmenu disabled>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</selectmenu>

<selectmenu>
<option disabled>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>


<h3>Styling parts of the control</h3>

<template block="head">
{{super}}
<style>
.my-select-menu::part(button) {
color: white;
background-color: #f00;
padding: 5px;
border-radius: 5px;
}

.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: .5rem;
}
</style>
<selectmenu class="my-select-menu">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
</template>

<template block="content">

<h3>Use your own markup</h3>
<div>
<h3>Default</h3>
<selectmenu id="pet">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>

<h3>Disabled selectmenu</h3>
<selectmenu disabled>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</selectmenu>

<h3>Disabled option</h3>
<selectmenu>
<option disabled>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>


<h3>Styling parts of the control</h3>
<style>
.my-select-menu::part(button) {
color: white;
background-color: #f00;
padding: 5px;
border-radius: 5px;
}

.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
</style>
<selectmenu class="my-select-menu">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>


<h3>Use your own markup 1</h3>
<style>
.my-custom-select [slot='button'] {
display: flex;
align-content: center;
}
.my-custom-select button {
padding: 5px;
border: 1px solid #f06;
background: #f06;
border-radius: 5px 0 0 5px;
color: white;
font-weight: bold;
}
.my-custom-select .label {
padding: 5px;
border: 1px solid #f06;
border-left: none;
border-radius: 0 5px 5px 0;
}
</style>
<selectmenu class="my-custom-select">
<div slot="button">
<button behavior="button">Open</button>
<span class="label">Choose an option</span>
</div>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>

<h3>Use your own markup 2</h3>
<style>
.my-custom-select2 [popover] {
width: 300px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
padding: 10px;
box-shadow: none;
margin: 10px 0;
border: 1px solid;
background: #f7f7f7;
}
.my-custom-select2 .\:open {
display: grid;
}
.my-custom-select2 :open {
display: grid;
}
</style>
<selectmenu class="my-custom-select2">
<div slot="listbox">
<div popover behavior="listbox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</div>
</div>
</selectmenu>
</div>

<div>
<h3>Native select</h3>
<select id="pet">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

<h3>Disabled select</h3>
<select disabled>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>

<h3>Disabled option</h3>
<select>
<option disabled>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

<h3>Native button</h3>
<button>Option 1</button>

</div>

<style>
.my-custom-select [slot='button'] {
display: flex;
align-content: center;
}
.my-custom-select button {
padding: 5px;
border: 1px solid #f06;
background: #f06;
border-radius: 5px 0 0 5px;
color: white;
font-weight: bold;
}
.my-custom-select .label {
padding: 5px;
border: 1px solid #f06;
border-left: none;
border-radius: 0 5px 5px 0;
}
</style>
<selectmenu class="my-custom-select">
<div slot="button">
<button behavior="button">Open</button>
<span class="label">Choose an option</span>
</div>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>

<br>
<br>
</template>
</template>
52 changes: 41 additions & 11 deletions examples/layout.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,50 @@
<head>
<template block="head">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/awsm.css/dist/awsm.min.css">
<style>
body {
position: relative;
max-width: 40rem;
margin: 2rem auto;
font-size: revert;
html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
line-height: 1.4;
}
button {
height: revert;
padding: revert;
font-size: revert;
body > :is(header, main) {
max-width: 40rem;
margin: 0 auto 2rem;
padding: .5rem;
}
h3 {
margin-bottom: 1rem;
margin-top: 2rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 1em;
margin-bottom: 0.25em;
}
nav li:last-child {
margin-right: 0
}
nav a:visited {
color: #0064c1
}
nav a:hover {
color:#f00000;
}
a {
color:#0064c1;
}
a:visited {
color:#8d39d0;
}
a:hover, a:active {
outline-width:0;
}
a:hover {
color:#f00000;
}
</style>
</template>
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -34,5 +62,7 @@ <h1><code>&lt;selectmenu&gt;</code> polyfill</h1>
</nav>
</header>

<template block="content"></template>
<main>
<template block="content"></template>
</main>
</body>
8 changes: 7 additions & 1 deletion src/option.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@ const template = document.createElement('template');
template.innerHTML = html`
<style>
:host {
display: list-item;
display: block;
list-style: none;
font: -webkit-small-control;
line-height: revert;
white-space: nowrap;
min-height: 1.2em;
padding: 1px 2px;
border-radius: 2px;
}
:host(:hover) {
Expand Down
Loading

1 comment on commit 8342b23

@vercel
Copy link

@vercel vercel bot commented on 8342b23 Mar 18, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

selectmenu-polyfill – ./

selectmenu-polyfill-git-main-luwes.vercel.app
selectmenu-polyfill-luwes.vercel.app
selectmenu-polyfill.vercel.app

Please sign in to comment.