Skip to content

Commit 36875aa

Browse files
ArathyKumarArathyKumar
committed
chore: pf-search input created
1 parent d567bf5 commit 36875aa

File tree

6 files changed

+760
-139
lines changed

6 files changed

+760
-139
lines changed

‎elements/pf-search-input/demo/pf-search-input-autocomplete.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
<pf-search-input></pf-search-input>
1+
<pf-search-input variant="typeahead"
2+
placeholder="Select a state">
3+
<pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
4+
<pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
5+
<pf-search-input-option value="New York"> New York </pf-search-input-option>
6+
<pf-search-input-option value="New Mexico"> New Mexico </pf-search-input-option>
7+
<pf-search-input-option value="North Carolina"> North Carolina </pf-search-input-option>
8+
</pf-search-input>
29

310
<script type="module">
411
import '@patternfly/elements/pf-search-input/pf-search-input.js';

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
<pf-search-input>
2-
<pf-search-input-option value="New Jersey">New Jersey</pf-search-input-option>
3-
<pf-search-input-option value="New York">New York</pf-search-input-option>
4-
<pf-search-input-option value="New Mexico">New Mexico</pf-search-input-option>
5-
<pf-search-input-option value="North Carolina">North Carolina</pf-search-input-option>
1+
<pf-search-input placeholder="Select a title"
2+
accessible-label="Title">
3+
<pf-search-input-option>Mr</pf-search-input-option>
4+
<pf-search-input-option>Miss</pf-search-input-option>
5+
<pf-search-input-option>Mrs</pf-search-input-option>
6+
<pf-search-input-option>Ms</pf-search-input-option>
7+
<hr>
8+
<pf-search-input-option>Dr</pf-search-input-option>
9+
<pf-search-input-option>Other</pf-option>
610
</pf-search-input>
711

812
<script type="module">

‎elements/pf-search-input/pf-search-input-option.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,73 @@
11
:host {
22
display: block;
33
}
4+
5+
:host([hidden]),
6+
*[hidden] {
7+
display: none !important;
8+
}
9+
10+
:host([disabled]) {
11+
pointer-events: none !important;
12+
cursor: not-allowed !important;
13+
}
14+
15+
:host(:focus) #outer,
16+
:host(:hover) #outer,
17+
#outer.selected {
18+
background-color: #e0e0e0;
19+
}
20+
21+
#outer {
22+
display: flex;
23+
flex-wrap: wrap;
24+
align-items: center;
25+
justify-content: flex-start;
26+
padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);
27+
min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));
28+
min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));
29+
}
30+
31+
#outer.active {
32+
background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));
33+
}
34+
35+
:host([disabled]) #outer {
36+
color: var(--pf-global--Color--dark-200, #6a6e73) !important;
37+
}
38+
39+
input[type="checkbox"] {
40+
margin-inline-end: 1em;
41+
display: var(--_pf-option-checkboxes-display, none);
42+
pointer-events: none;
43+
flex: 0 0 auto;
44+
}
45+
46+
span {
47+
flex: 1 1 auto;
48+
}
49+
50+
svg {
51+
font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));
52+
color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));
53+
width: 1em;
54+
height: 1em;
55+
margin-inline-start: 1em;
56+
text-align: right;
57+
flex: 0 0 auto;
58+
display: var(--_pf-option-svg-display, block);
59+
}
60+
61+
#description {
62+
display: block;
63+
flex: 1 0 100%;
64+
}
65+
66+
slot[name="description"] {
67+
font-size: var(--pf-global--FontSize--xs, 0.75rem);
68+
color: var(--pf-global--Color--dark-200, #6a6e73);
69+
}
70+
71+
::slotted([slot="icon"]) {
72+
margin-inline-end: 0.5em;
73+
}

‎elements/pf-search-input/pf-search-input-option.ts‎

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { customElement } from 'lit/decorators/custom-element.js';
33
import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
44
import { property } from 'lit/decorators/property.js';
55
import { classMap } from 'lit/directives/class-map.js';
6+
67
import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
8+
79
import { observes } from '@patternfly/pfe-core/decorators/observes.js';
810
import styles from './pf-search-input-option.css';
911

@@ -15,71 +17,77 @@ import styles from './pf-search-input-option.css';
1517
export class PfSearchInputOption extends LitElement {
1618
static readonly styles: CSSStyleSheet[] = [styles];
1719

18-
/** form value for this option */
19-
@property({ reflect: true })
20-
get value() {
21-
return (this.#value ?? this.textContent ?? '').trim();
22-
}
23-
24-
set value(v: string) {
25-
this.#value = v;
26-
}
27-
28-
/** whether option is selected */
29-
@property({ type: Boolean, reflect: true }) selected = false;
30-
31-
/** whether option is active descendant */
32-
@property({ type: Boolean, reflect: true }) active = false;
33-
34-
@queryAssignedNodes({ slot: '', flatten: true })
35-
private _slottedText!: Node[];
36-
37-
/**
38-
* this option's position relative to the other options
39-
*/
40-
set posInSet(posInSet: number | null) {
41-
this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
42-
}
43-
44-
get posInSet() {
45-
const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');
46-
return Number.isNaN(parsed) ? null : parsed;
47-
}
48-
49-
/**
50-
* total number of options
51-
*/
52-
set setSize(setSize: number | null) {
53-
this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
54-
}
55-
56-
get setSize() {
57-
try {
58-
const int = parseInt(this.#internals.ariaSetSize ?? '0');
59-
if (Number.isNaN(int)) {
60-
return 0;
61-
} else {
62-
return int;
63-
}
64-
} catch {
20+
/** whether option is disabled */
21+
@property({ type: Boolean, reflect: true }) disabled = false;
22+
23+
/** form value for this option */
24+
@property({ reflect: true })
25+
get value() {
26+
return (this.#value ?? this.textContent ?? '').trim();
27+
}
28+
29+
set value(v: string) {
30+
this.#value = v;
31+
}
32+
33+
/** whether option is selected */
34+
@property({ type: Boolean, reflect: true }) selected = false;
35+
36+
/** whether option is active descendant */
37+
@property({ type: Boolean, reflect: true }) active = false;
38+
39+
/** Optional option description; overridden by description slot. */
40+
@property() description = '';
41+
42+
@queryAssignedNodes({ slot: '', flatten: true })
43+
private _slottedText!: Node[];
44+
45+
/**
46+
* this option's position relative to the other options
47+
*/
48+
set posInSet(posInSet: number | null) {
49+
this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
50+
}
51+
52+
get posInSet() {
53+
const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');
54+
return Number.isNaN(parsed) ? null : parsed;
55+
}
56+
57+
/**
58+
* total number of options
59+
*/
60+
set setSize(setSize: number | null) {
61+
this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
62+
}
63+
64+
get setSize() {
65+
try {
66+
const int = parseInt(this.#internals.ariaSetSize ?? '0');
67+
if (Number.isNaN(int)) {
6568
return 0;
69+
} else {
70+
return int;
6671
}
72+
} catch {
73+
return 0;
6774
}
68-
69-
#value?: string;
70-
71-
#internals = InternalsController.of(this, { role: 'option' });
72-
75+
}
76+
77+
#value?: string;
78+
79+
#internals = InternalsController.of(this, { role: 'option' });
7380

7481
render(): TemplateResult<1> {
75-
const { active, selected } = this;
82+
const { disabled, active, selected } = this;
7683
return html`
77-
<div id="outer" class="${classMap({ active, selected })}">
84+
<div id="outer" class="${classMap({ active, disabled, selected })}">
7885
<input type="checkbox"
7986
inert
8087
role="presentation"
8188
tabindex="-1"
82-
?checked="${this.selected}">
89+
?checked="${this.selected}"
90+
?disabled="${this.disabled}">
8391
<slot name="icon"></slot>
8492
<span>
8593
<slot name="create"></slot>
@@ -91,6 +99,7 @@ export class PfSearchInputOption extends LitElement {
9199
aria-hidden="true">
92100
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
93101
</svg>
102+
<slot id="description" name="description">${this.description ?? ''}</slot>
94103
</div>
95104
`;
96105
}
@@ -100,6 +109,11 @@ export class PfSearchInputOption extends LitElement {
100109
this.#internals.ariaSelected = String(!!this.selected);
101110
}
102111

112+
@observes('disabled')
113+
private disabledChanged() {
114+
this.#internals.ariaDisabled = String(!!this.disabled);
115+
}
116+
103117
/**
104118
* text content within option (used for filtering)
105119
*/

0 commit comments

Comments
 (0)