Skip to content

Commit

Permalink
feat(input): added support for type time
Browse files Browse the repository at this point in the history
* feat(input): added support for type time, added e2e tests

* docs(input): added time to types variants and ocs in sb

* docs: changeset
  • Loading branch information
micahjones13 authored Jun 9, 2022
1 parent 5b810bd commit 9b3d67e
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 1 deletion.
8 changes: 8 additions & 0 deletions .changeset/neat-cameras-grab.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@astrouxds/astro-web-components": minor
"@astrouxds/angular": minor
"astro-website": minor
"@astrouxds/react": minor
---

Added input type of time support for rux-input.
2 changes: 2 additions & 0 deletions packages/web-components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11934,6 +11934,7 @@ export namespace Components {
| 'password'
| 'date'
| 'datetime-local'
| 'time'
| 'tel';
/**
* The input value
Expand Down Expand Up @@ -32232,6 +32233,7 @@ declare namespace LocalJSX {
| 'password'
| 'date'
| 'datetime-local'
| 'time'
| 'tel';
/**
* The input value
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@
url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 4H18V3C18 2.45 17.55 2 17 2C16.45 2 16 2.45 16 3V4H8V3C8 2.45 7.55 2 7 2C6.45 2 6 2.45 6 3V4H5C3.89 4 3.01 4.9 3.01 6L3 20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 19C19 19.55 18.55 20 18 20H6C5.45 20 5 19.55 5 19V9H19V19ZM9 13V11H7V13H9ZM11 11H13V13H11V11ZM17 13V11H15V13H17Z' fill='%234dacff'/%3E%3C/svg%3E%0A");
background-position: center;
}
input[type='time' i]::-webkit-calendar-picker-indicator {
background: var(--input-background-color)
url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM11.72 7H11.78C12.18 7 12.5 7.32 12.5 7.72V12.26L16.37 14.56C16.72 14.76 16.83 15.21 16.62 15.55C16.42 15.89 15.98 15.99 15.64 15.79L11.49 13.3C11.18 13.12 11 12.79 11 12.44V7.72C11 7.32 11.32 7 11.72 7Z' fill='%234dacff'/%3E%3C/svg%3E");
cursor: pointer;
background-position: center;
}
.rux-input {
input {
border: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export class RuxInput implements FormFieldInterface {
| 'password'
| 'date'
| 'datetime-local'
| 'time'
| 'tel' = 'text'

/**
Expand Down
15 changes: 15 additions & 0 deletions packages/web-components/src/components/rux-input/test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,21 @@
name="native-datetime-local"
/>
</div>
<div>
<rux-input
label="Time type"
id="time"
name="time"
type="time"
>
</rux-input>
<input
type="time"
id="native-time"
value="01:25:00"
name="native-time"
/>
</div>

<button id="formSubmitBtn" type="submit">submit</button>
</form>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,9 @@ describe('Input Field with Form', () => {
cy.get('#formSubmitBtn').click()
cy.get('#log').should('contain', 'datetime-local:2022-10-05T13:25')
})
it('sumbits the correct value in type time', () => {
cy.get('#time').shadow().find('input').type('01:25:00')
cy.get('#formSubmitBtn').click()
cy.get('#log').should('contain', 'time:01:25:00')
})
})
17 changes: 16 additions & 1 deletion packages/web-components/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,20 @@
<link rel="stylesheet" href="/build/astro-web-components.css" />
</head>

<body></body>
<body>
<div style="width: 200px">
<rux-input type="time"></rux-input>
</div>
<div style="width: 200px">
<input type="time" value="01:25:00" />
</div>
<script>
//get the value of rux-input
document
.querySelector('rux-input')
.addEventListener('ruxchange', (e) => {
console.log(e.target.value)
})
</script>
</body>
</html>
2 changes: 2 additions & 0 deletions packages/web-components/src/stories/input.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -492,6 +492,7 @@ The following `<input>` types are available:
- Number-only inputs (type="number")
- Date inputs (type="date")
- Datetime-local inputs (type="datetime-local")
- Time inputs (type="time")

export const Types = (args) => {
return html`
Expand Down Expand Up @@ -546,6 +547,7 @@ export const Types = (args) => {
label="Datetime-local"
type="datetime-local"
></rux-input>
<rux-input label="Time" type="time"></rux-input>
</div>
`
}
Expand Down

0 comments on commit 9b3d67e

Please sign in to comment.