Skip to content

Commit c072818

Browse files
bennypowersbennypowers
authored
feat(text-input): add pf-text-input (#2572)
* feat(text-input): initial commit * feat(text-input): some variants * fix(text-input): try to label correctly * feat(text-input): required * fix(text-input): width of host accounts for input * feat(text-input): icon * feat(text-input): type * docs(text-input): basic docs * docs(text-input): screenshot * fix(text-input): formDisabledCallback
1 parent dcdbce6 commit c072818

18 files changed

+833
-0
lines changed

‎.changeset/pf-text-input.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
✨ Added `<pf-text-input>`
5+
6+
```html
7+
<label>
8+
Text Input
9+
<pf-text-input></pf-text-input>
10+
</label>
11+
```

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"./pf-tabs/pf-tab-panel.js": "./pf-tabs/pf-tab-panel.js",
5353
"./pf-tabs/pf-tab.js": "./pf-tabs/pf-tab.js",
5454
"./pf-tabs/pf-tabs.js": "./pf-tabs/pf-tabs.js",
55+
"./pf-text-input/pf-text-input.js": "./pf-text-input/pf-text-input.js",
5556
"./pf-tile/BaseTile.js": "./pf-tile/BaseTile.js",
5657
"./pf-tile/pf-tile.js": "./pf-tile/pf-tile.js",
5758
"./pf-timestamp/pf-timestamp.js": "./pf-timestamp/pf-timestamp.js",

‎elements/pf-text-input/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Text Input
2+
A **text input** is used to gather free-form text from a user.
3+
4+
```html
5+
<label>
6+
Text Input
7+
<pf-text-input></pf-text-input>
8+
</label>
9+
```

‎elements/pf-text-input/demo/demo.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
fieldset {
2+
max-width: 832px;
3+
display: grid;
4+
grid-template-columns: 1fr;
5+
gap: var(--pf-global--spacer--md, 1rem);
6+
}

‎elements/pf-text-input/demo/disabled.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<fieldset>
2+
<legend>Disabled</legend>
3+
<pf-text-input disabled value="disabled text input example"></pf-text-input>
4+
</fieldset>
5+
6+
<fieldset id="disablable-fieldset" disabled>
7+
<legend>Disabled by fieldset</legend>
8+
<pf-text-input value="disabled by a fieldset example"></pf-text-input>
9+
</fieldset>
10+
11+
<label>Disable the fieldset
12+
<pf-switch id="disabled-fieldset-switch" checked></pf-switch>
13+
</label>
14+
15+
<script type="module">
16+
import '@patternfly/elements/pf-text-input/pf-text-input.js';
17+
import '@patternfly/elements/pf-switch/pf-switch.js';
18+
document.getElementById('disabled-fieldset-switch')
19+
.addEventListener('change', function() {
20+
document.getElementById('disablable-fieldset').disabled = this.checked;
21+
});
22+
</script>
23+
24+
<link rel="stylesheet" href="demo.css">
25+
26+
<style>
27+
label {
28+
display: flex;
29+
gap: 1em;
30+
margin-block: 1em;
31+
}
32+
</style>

‎elements/pf-text-input/demo/icon-variants.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<fieldset>
2+
<legend>Icon variants</legend>
3+
<pf-text-input accessible-label="success" validated="success"></pf-text-input>
4+
<pf-text-input accessible-label="warning" validated="warning"></pf-text-input>
5+
<pf-text-input accessible-label="invalid" required></pf-text-input>
6+
<pf-text-input accessible-label="calendar" icon="calendar"></pf-text-input>
7+
<pf-text-input accessible-label="clock" icon="clock"></pf-text-input>
8+
<pf-text-input accessible-label="search" icon="search"></pf-text-input>
9+
<pf-text-input accessible-label="custom"
10+
custom-icon-url='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
11+
custom-icon-dimensions="24px 24px"></pf-text-input>
12+
</fieldset>
13+
14+
15+
<script type="module">
16+
import '@patternfly/elements/pf-text-input/pf-text-input.js';
17+
const input = document.querySelector('pf-text-input[required]');
18+
await customElements.whenDefined(input.localName);
19+
await input.updateComplete;
20+
input.checkValidity();
21+
</script>
22+
23+
<link rel="stylesheet" href="demo.css">

‎elements/pf-text-input/demo/invalid.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<fieldset>
2+
<legend>Invalid</legend>
3+
<pf-text-input id="invalid-input" required></pf-text-input>
4+
</fieldset>
5+
6+
<script type="module">
7+
import '@patternfly/elements/pf-text-input/pf-text-input.js';
8+
await customElements.whenDefined('pf-text-input');
9+
const input = document.querySelector('pf-text-input[required]');
10+
await input.updateComplete;
11+
input.checkValidity();
12+
</script>
13+
14+
<link rel="stylesheet" href="demo.css">

‎elements/pf-text-input/demo/kitchen-sink.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<fieldset>
2+
<label for="default-input">Labelled input</label>
3+
<pf-text-input id="default-input"></pf-text-input>
4+
</fieldset>
5+
6+
<fieldset>
7+
<legend>Disabled</legend>
8+
<label for="disabled-input">Disabled input</label>
9+
<pf-text-input id="disabled-input"
10+
disabled
11+
value="disabled text input example"></pf-text-input>
12+
</fieldset>
13+
14+
<fieldset>
15+
<legend>Left Truncated</legend>
16+
<label for="left-truncated-input">Truncated input</label>
17+
<pf-text-input id="left-truncated-input"
18+
left-truncated
19+
value="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."></pf-text-input>
20+
</fieldset>
21+
22+
<fieldset>
23+
<legend>Read only</legend>
24+
<label for="read-only-input">Read only input</label>
25+
<pf-text-input id="read-only-input"
26+
readonly
27+
value="read only text input example"></pf-text-input>
28+
<label>
29+
<pf-switch onchange="this.closest('fieldset').querySelector('pf-text-input').plain=this.checked;"></pf-switch>
30+
Plain read only variant
31+
</label>
32+
</fieldset>
33+
34+
<fieldset>
35+
<legend>Invalid</legend>
36+
<label for="invalid-input">Invalid input</label>
37+
<pf-text-input id="invalid-input" required></pf-text-input>
38+
</fieldset>
39+
40+
<fieldset>
41+
<legend>Icon variants</legend>
42+
<pf-text-input accessible-label="success" validated="success"></pf-text-input>
43+
<pf-text-input accessible-label="warning" validated="warning"></pf-text-input>
44+
<pf-text-input accessible-label="invalid" required></pf-text-input>
45+
<pf-text-input accessible-label="calendar" icon="calendar"></pf-text-input>
46+
<pf-text-input accessible-label="clock" icon="clock"></pf-text-input>
47+
<pf-text-input accessible-label="search" icon="search"></pf-text-input>
48+
<pf-text-input accessible-label="custom"
49+
custom-icon-url='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
50+
custom-icon-dimensions="24px 24px"></pf-text-input>
51+
</fieldset>
52+
53+
<!-- TBD if we will implement this
54+
<fieldset>
55+
<legend>Icon sprite variants</legend>
56+
<p>
57+
<strong>Note</strong>: The icons for the success, invalid, calendar, etc. variations in form control elements are applied as
58+
background images to the form element. By default, the image URLs for these icons are data URIs. However,
59+
there may be cases where data URIs are not ideal, such as in an application with a content security policy that
60+
disallows data URIs for security reasons. The <code>isIconSprite</code> variation changes the icon source to an external
61+
SVG file that serves as a sprite for all of the supported icons.
62+
</p>
63+
<pf-text-input icon-sprite validated="success"></pf-text-input>
64+
<pf-text-input icon-sprite validated="warning"></pf-text-input>
65+
<pf-text-input icon-sprite required></pf-text-input>
66+
<pf-text-input icon-sprite icon="calendar"></pf-text-input>
67+
<pf-text-input icon-sprite icon="clock"></pf-text-input>
68+
</fieldset>
69+
-->
70+
71+
<script type="module">
72+
import '@patternfly/elements/pf-text-input/pf-text-input.js';
73+
import '@patternfly/elements/pf-switch/pf-switch.js';
74+
await customElements.whenDefined('pf-text-input');
75+
for (const input of document.querySelectorAll('pf-text-input[required]')) {
76+
await input.updateComplete;
77+
input.checkValidity();
78+
}
79+
</script>
80+
81+
<link rel="stylesheet" href="demo.css">

‎elements/pf-text-input/demo/left-truncated.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<fieldset>
2+
<legend>Left Truncated</legend>
3+
<pf-text-input left-truncated
4+
value="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."></pf-text-input>
5+
</fieldset>
6+
7+
<script type="module">
8+
import '@patternfly/elements/pf-text-input/pf-text-input.js';
9+
</script>
10+
11+
<link rel="stylesheet" href="demo.css">

‎elements/pf-text-input/demo/pf-text-input.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<fieldset>
2+
<legend>Text Input</legend>
3+
<label for="input">Input</label>
4+
<pf-text-input id="input"></pf-text-input>
5+
</fieldset>
6+
7+
<script type="module">
8+
import '@patternfly/elements/pf-text-input/pf-text-input.js';
9+
</script>
10+
11+
<link rel="stylesheet" href="demo.css">
12+

0 commit comments

Comments
 (0)