Skip to content

Commit

Permalink
feat(input): input slots and aria-disabled support
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed May 20, 2021
1 parent f6edcdc commit 17861c8
Show file tree
Hide file tree
Showing 12 changed files with 620 additions and 243 deletions.
189 changes: 80 additions & 109 deletions src/docs/components/docs-main/docs-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,52 +5,28 @@
}

main {
> p,
> #properties + table,
> #events + table,
> #slots + table {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck1);
background-color: var(--ld-col-bg-lg);
}
}

#properties + table td {
&:first-of-type,
&:nth-of-type(2),
&:nth-of-type(4) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck1);
background-color: var(--ld-col-bg-lg);

&:not(:last-child) {
color: var(--ld-col-rb1);
background-color: var(--ld-col-rb-default);
box-shadow: inset 0 0 0 1px var(--ld-col-rb6);
}
}
}
&:nth-of-type(3) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck1);
background-color: var(--ld-col-bg-lg);
}
}
}

#events + table td {
&:first-of-type,
&:nth-of-type(3) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck1);
background-color: var(--ld-col-bg-lg);
}
}

&:nth-of-type(2) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck1);
background-color: var(--ld-col-bg-lg);
}
}
}

> #methods ~ h3,
> p {
> code {
background-color: var(--ld-col-bg-lg);
box-shadow: 0 0 0 1px var(--ld-col-rblck1);
}
}

> p > a,
Expand Down Expand Up @@ -78,6 +54,10 @@
background-color: var(--ld-col-vy3);
}
}

> pre {
border-color: var(--ld-col-rblck1);
}
}
}
}
Expand All @@ -88,52 +68,28 @@
}

main {
> p,
> #properties + table,
> #events + table,
> #slots + table {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck3);
background-color: var(--ld-col-rblck4);
}
}

#properties + table td {
&:first-of-type,
&:nth-of-type(2),
&:nth-of-type(4) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck3);
background-color: var(--ld-col-rblck4);

&:not(:last-child) {
color: var(--ld-col-rb1);
background-color: var(--ld-col-rb-default);
box-shadow: inset 0 0 0 1px var(--ld-col-rb3);
}
}
}
&:nth-of-type(3) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck3);
background-color: var(--ld-col-rblck4);
}
}
}

#events + table td {
&:first-of-type,
&:nth-of-type(3) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck3);
background-color: var(--ld-col-rblck4);
}
}

&:nth-of-type(2) {
code {
box-shadow: inset 0 0 0 1px var(--ld-col-rblck3);
background-color: var(--ld-col-rblck4);
}
}
}

> #methods ~ h3,
> p {
> code {
background-color: var(--ld-col-rblck4);
box-shadow: 0 0 0 1px var(--ld-col-rblck3);
}
}

> p > a,
Expand Down Expand Up @@ -161,6 +117,10 @@
background-color: var(--ld-col-vy3);
}
}

> pre {
border-color: var(--ld-col-rblck-default);
}
}
}
}
Expand All @@ -178,6 +138,10 @@
}

.docs-main {
--ld-typo-code-s: 0.875rem / 176% 'Source Code Pro', Consolas, Monaco,
'Ubuntu Mono', monospace;
--ld-typo-code-m: 1rem / 160% 'Source Code Pro', Consolas, Monaco,
'Ubuntu Mono', monospace;
padding: var(--ld-sp-24) var(--ld-sp-40) var(--ld-sp-40);

main {
Expand All @@ -196,15 +160,22 @@
font: var(--ld-typo-body-m);

> code {
display: inline-flex;
padding: 0 var(--ld-sp-4);
border-radius: var(--ld-sp-2);
margin: 0 var(--ld-sp-4);
}
}

> p > a,
> table a {
> table a,
> blockquote a {
text-decoration: underline;

code {
background-color: transparent !important;
box-shadow: none !important;
}
}

> hr {
Expand Down Expand Up @@ -329,12 +300,6 @@
> #properties + table {
--table-min-width: 72rem;

thead,
tbody {
min-width: var(--table-min-width);
display: block !important;
}

td,
th {
/* props and attributes */
Expand All @@ -343,11 +308,9 @@
&:nth-of-type(4) {
width: var(--table-cell-width-sm);
word-break: break-all;
flex-shrink: 0;

code {
transform: translateY(-0.25rem);
padding: var(--ld-sp-4) var(--ld-sp-6);
border-radius: var(--ld-sp-2);
display: inline-grid;
grid-auto-flow: column;
gap: var(--ld-sp-4);
Expand Down Expand Up @@ -377,14 +340,7 @@

/* description */
&:nth-of-type(3) {
font: var(--ld-typo-body-m);
width: var(--table-cell-width-lg);
transform: translateY(-0.1875rem);

code {
padding: 0 var(--ld-sp-6);
border-radius: var(--ld-sp-2);
}
}

/* type */
Expand All @@ -402,40 +358,18 @@
> #events + table {
--table-min-width: 64rem;

thead,
tbody {
min-width: var(--table-min-width);
display: block !important;
}

td,
th {
/* props and attributes */
&:first-of-type,
&:nth-of-type(3) {
width: var(--table-cell-width-sm);
word-break: break-all;

code {
transform: translateY(-0.25rem);
padding: var(--ld-sp-4) var(--ld-sp-6);
border-radius: var(--ld-sp-2);
display: inline-grid;
grid-auto-flow: column;
gap: var(--ld-sp-4);
}
}

/* description */
&:nth-of-type(2) {
font: var(--ld-typo-body-m);
width: var(--table-cell-width-lg);
transform: translateY(-0.1875rem);

code {
padding: 0 var(--ld-sp-6);
border-radius: var(--ld-sp-2);
}
}

/* type */
Expand All @@ -457,6 +391,38 @@
}
}

> #slots + table {
--table-min-width: 50rem;

td,
th {
/* props and attributes */
&:first-of-type {
width: var(--table-cell-width-sm);
word-break: break-all;
flex-shrink: 0;
}
}
}

> #properties + table,
> #events + table,
> #slots + table {
font: var(--ld-typo-body-m);

thead,
tbody {
min-width: var(--table-min-width);
display: block !important;
}

code {
display: inline-flex;
padding: 0 var(--ld-sp-6);
border-radius: var(--ld-sp-2);
}
}

> blockquote {
padding: var(--ld-sp-8) var(--ld-sp-24) var(--ld-sp-12) var(--ld-sp-24);

Expand All @@ -470,11 +436,16 @@
margin: 0 var(--ld-sp-4);
}
}

> pre {
border-radius: var(--ld-sp-12);
border-style: solid;
border-width: 1px;
}
}

code {
font-family: 'Source Code Pro', Consolas, Monaco, 'Ubuntu Mono', monospace;
font-size: var(--ld-typo-body-s);
font: var(--ld-typo-code-s);
}

@media (max-width: 48rem) {
Expand Down
1 change: 0 additions & 1 deletion src/docs/components/docs-search/docs-search.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@

.docs-search__input {
width: 100%;
padding: var(--ld-sp-8) var(--ld-sp-16);
pointer-events: all;
}

Expand Down
10 changes: 6 additions & 4 deletions src/docs/components/docs-search/docs-search.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import '../../../components' // type definitions for type checking and intelliSense
import 'wicg-inert'
import { Component, h, Listen, State, Host } from '@stencil/core'
import Fuse from 'fuse.js'
Expand All @@ -19,7 +20,7 @@ interface SearchResult {
shadow: false,
})
export class DocsSearch {
private searchInput!: HTMLInputElement
private searchInput!: HTMLLdInputElement
private fuse: Fuse<SearchResult>

@State() results: Fuse.FuseResult<SearchResult>[] = []
Expand Down Expand Up @@ -101,15 +102,16 @@ export class DocsSearch {
>
<div class="docs-search__content">
<form role="search" autocomplete="off">
<input
<ld-input
onInput={this.handleChange.bind(this)}
placeholder="Search in documentation..."
class="docs-search__input"
id="docs-search-input"
ref={(el) => (this.searchInput = el as HTMLInputElement)}
ref={(el) => (this.searchInput = el as HTMLLdInputElement)}
type="search"
mode="light"
spellcheck="false"
/>
></ld-input>
</form>
{this.results.length ? (
<ol class="docs-search__results" aria-label="Search results">
Expand Down
Loading

0 comments on commit 17861c8

Please sign in to comment.