Skip to content

Commit 8d27b71

Browse files
ArathyKumarArathyKumar
committed
chore: updated documentation
1 parent 7a8ac31 commit 8d27b71

File tree

5 files changed

+109
-91
lines changed

5 files changed

+109
-91
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<form class="container">
2-
<h1>Search with autocomplete</h1>
32
<div class="search-input-container">
43
<pf-search-input id="search-input" name="search" placeholder="Search">
54
<pf-option value="Alabama"> Alabama </pf-option>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<div class="container">
2-
<h1>Search with autocomplete</h1>
32
<pf-search-input id="search-input" placeholder="Search">
43
<pf-option value="Alabama"> Alabama </pf-option>
54
<pf-option value="New Jersey"> New Jersey </pf-option>
@@ -34,7 +33,6 @@ <h1>Search with autocomplete</h1>
3433
console.log('Selected:', event.target.value);
3534
/* eslint-disable no-console */
3635
});
37-
</script
3836
</script>
3937

4038
<style>

‎elements/pf-search-input/docs/pf-search-input.md‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,40 @@
1+
{% renderInstallation %} {% endrenderInstallation %}
2+
3+
<script type="module">
4+
import '@patternfly/elements/pf-search-input/pf-search-input.js';
5+
</script>
6+
17
{% renderOverview %}
2-
<pf-search-input></pf-search-input>
8+
<pf-search-input>
9+
<pf-option>Blue</pf-option>
10+
<pf-option>Black</pf-option>
11+
<pf-option>Brown</pf-option>
12+
<pf-option>Bronze</pf-option>
13+
<pf-option>Green</pf-option>
14+
<pf-option>Magenta</pf-option>
15+
<pf-option>Orange</pf-option>
16+
<pf-option>Purple</pf-option>
17+
<pf-option>Periwinkle</pf-option>
18+
<pf-option>Pink</pf-option>
19+
<pf-option>Red</pf-option>
20+
<pf-option>Yellow</pf-option>
21+
</pf-search-input>
322
{% endrenderOverview %}
423

5-
{% band header="Usage" %}{% endband %}
24+
{% band header="Usage" %}
25+
26+
#### Search Input
27+
28+
{% htmlexample %}
29+
{% renderFile "./elements/pf-search-input/demo/pf-search-input.html" %}
30+
{% endhtmlexample %}
31+
32+
#### Search Input Form
33+
{% htmlexample %}
34+
{% renderFile "./elements/pf-search-input/demo/pf-search-input-with-submit.html" %}
35+
{% endhtmlexample %}
36+
37+
{% endband %}
638

739
{% renderSlots %}{% endrenderSlots %}
840

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

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -61,96 +61,13 @@
6161
--pf-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
6262
--pf-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
6363
--pf-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
64-
--pf-c-search-input__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
65-
--pf-c-search-input__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
66-
--pf-c-search-input__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
67-
--pf-c-search-input__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
6864
--pf-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
6965
--pf-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
7066
--pf-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
7167
--pf-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
7268
--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
7369
--pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
74-
--pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
75-
--pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
76-
--pf-c-search-input__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
77-
--pf-c-search-input__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
78-
--pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
79-
--pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
80-
--pf-c-search-input__menu--Width: auto;
81-
--pf-c-search-input__menu--MinWidth: 100%;
82-
--pf-c-search-input__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
8370
--pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
84-
--pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
85-
--pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
86-
--pf-c-search-input__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
87-
--pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
88-
--pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
89-
--pf-c-search-input__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
90-
--pf-c-search-input__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
91-
--pf-c-search-input__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
92-
--pf-c-search-input__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
93-
--pf-c-search-input__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
94-
--pf-c-search-input__menu-item--Width: 100%;
95-
--pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
96-
--pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
97-
--pf-c-search-input__menu-item--disabled--BackgroundColor: transparent;
98-
--pf-c-search-input__menu-item--m-link--Width: auto;
99-
--pf-c-search-input__menu-item--m-link--hover--BackgroundColor: transparent;
100-
--pf-c-search-input__menu-item--m-link--focus--BackgroundColor: transparent;
101-
--pf-c-search-input__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
102-
--pf-c-search-input__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
103-
--pf-c-search-input__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
104-
--pf-c-search-input__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
105-
--pf-c-search-input__menu-item--m-action--Width: auto;
106-
--pf-c-search-input__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
107-
--pf-c-search-input__menu-item--m-action--hover--BackgroundColor: transparent;
108-
--pf-c-search-input__menu-item--m-action--focus--BackgroundColor: transparent;
109-
--pf-c-search-input__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
110-
--pf-c-search-input__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
111-
--pf-c-search-input__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
112-
--pf-c-search-input__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
113-
--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
114-
--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
115-
--pf-c-search-input__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
116-
--pf-c-search-input__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
117-
--pf-c-search-input__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
118-
--pf-c-search-input__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
119-
--pf-c-search-input__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
120-
--pf-c-search-input__menu-item-icon--Top: 50%;
121-
--pf-c-search-input__menu-item-icon--TranslateY: -50%;
122-
--pf-c-search-input__menu-item-action-icon--MinHeight: calc(var(--pf-c-search-input__menu-item--FontSize) * var(--pf-c-search-input__menu-item--LineHeight));
123-
--pf-c-search-input__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
124-
--pf-c-search-input__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
125-
--pf-c-search-input__menu-search--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
126-
--pf-c-search-input__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
127-
--pf-c-search-input__menu-search--PaddingLeft: var(--pf-c-search-input__menu-item--PaddingLeft);
128-
--pf-c-search-input__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
129-
--pf-c-search-input__menu-group-title--PaddingTop: var(--pf-c-search-input__menu-item--PaddingTop);
130-
--pf-c-search-input__menu-group-title--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
131-
--pf-c-search-input__menu-group-title--PaddingBottom: var(--pf-c-search-input__menu-item--PaddingBottom);
132-
--pf-c-search-input__menu-group-title--PaddingLeft: var(--pf-c-search-input__menu-item--PaddingLeft);
133-
--pf-c-search-input__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
134-
--pf-c-search-input__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
135-
--pf-c-search-input__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
136-
--pf-c-search-input__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
137-
--pf-c-search-input__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
138-
--pf-c-search-input__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
139-
--pf-c-search-input__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
140-
--pf-c-search-input__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
141-
--pf-c-search-input__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
142-
--pf-c-search-input__menu-item-description--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
143-
--pf-c-search-input__menu-item-main--PaddingRight: var(--pf-c-search-input__menu-item--PaddingRight);
144-
--pf-c-search-input__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-search-input__menu-item--m-selected--PaddingRight);
145-
--pf-c-search-input__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
146-
--pf-c-search-input__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
147-
--pf-c-search-input__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
148-
--pf-c-search-input__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
149-
--pf-c-search-input__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
150-
--pf-c-search-input__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
151-
--pf-c-search-input__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
152-
--pf-c-search-input-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
153-
--pf-c-search-input-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
15471
}
15572

15673
:host,

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

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,81 @@ export class PfSearchChangeEvent extends Event {
2626
}
2727

2828
/**
29-
* Search Input
30-
* @slot - Place element content here
31-
*/
29+
* A search input lets users type in words to find specific items or information.
30+
* As they type, it can show matching results to help them quickly find what they are looking for.
31+
*
32+
* A search input consists of a text field where users can type to find specific content or items.
33+
* Unlike selects or dropdowns, which offer predefined options, a search input lets users enter
34+
* their own keywords to filter or locate results. It includes a clear (×) button to easily
35+
* remove the current input, allowing users to start a new search quickly.
36+
* @slot - insert `pf-option` and/or `pf-option-groups` here
37+
* @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
38+
* @fires open - when the menu toggles open
39+
* @fires close - when the menu toggles closed
40+
* @cssprop [--pf-c-search-input__toggle--PaddingTop=var(--pf-global--spacer--form-element, 0.375rem)]
41+
* @cssprop [--pf-c-search-input__toggle--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
42+
* @cssprop [--pf-c-search-input__toggle--PaddingBottom=var(--pf-global--spacer--form-element, 0.375rem)]
43+
* @cssprop [--pf-c-search-input__toggle--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
44+
* @cssprop [--pf-c-search-input__toggle--MinWidth=var(--pf-global--target-size--MinWidth, 44px)]
45+
* @cssprop [--pf-c-search-input__toggle--FontSize=var(--pf-global--FontSize--md, 1rem)]
46+
* @cssprop [--pf-c-search-input__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]
47+
* @cssprop [--pf-c-search-input__toggle--LineHeight=var(--pf-global--LineHeight--md, 1.5)]
48+
* @cssprop [--pf-c-search-input__toggle--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]
49+
* @cssprop [--pf-c-search-input__toggle--before--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]
50+
* @cssprop [--pf-c-search-input__toggle--before--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]
51+
* @cssprop [--pf-c-search-input__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]
52+
* @cssprop [--pf-c-search-input__toggle--before--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]
53+
* @cssprop [--pf-c-search-input__toggle--before--BorderWidth=initial]
54+
* @cssprop [--pf-c-search-input__toggle--before--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)]
55+
* @cssprop [--pf-c-search-input__toggle--before--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)]
56+
* @cssprop [--pf-c-search-input__toggle--before--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)]
57+
* @cssprop [--pf-c-search-input__toggle--before--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)]
58+
* @cssprop [--pf-c-search-input__toggle--Color=var(--pf-global--Color--100, #151515)]
59+
* @cssprop [--pf-c-search-input__toggle--hover--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
60+
* @cssprop [--pf-c-search-input__toggle--focus--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
61+
* @cssprop [--pf-c-search-input__toggle--focus--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
62+
* @cssprop [--pf-c-search-input__toggle--active--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
63+
* @cssprop [--pf-c-search-input__toggle--active--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
64+
* @cssprop [--pf-c-search-input__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--active-color--100, #06c)]
65+
* @cssprop [--pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
66+
* @cssprop [--pf-c-search-input__toggle--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)]
67+
* @cssprop [--pf-c-search-input__toggle--m-plain--before--BorderColor=transparent]
68+
* @cssprop [--pf-c-search-input__toggle--m-placeholder--Color=transparent]
69+
* @cssprop [--pf-c-search-input--m-invalid__toggle--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
70+
* @cssprop [--pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
71+
* @cssprop [--pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
72+
* @cssprop [--pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
73+
* @cssprop [--pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
74+
* @cssprop [--pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)]
75+
* @cssprop [--pf-c-search-input--m-invalid__toggle-status-icon--Color=var(--pf-global--danger-color--100, #c9190b)]
76+
* @cssprop [--pf-c-search-input--m-success__toggle--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
77+
* @cssprop [--pf-c-search-input--m-success__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
78+
* @cssprop [--pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
79+
* @cssprop [--pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
80+
* @cssprop [--pf-c-search-input--m-success__toggle--active--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
81+
* @cssprop [--pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)]
82+
* @cssprop [--pf-c-search-input--m-success__toggle-status-icon--Color=var(--pf-global--success-color--100, #3e8635)]
83+
* @cssprop [--pf-c-search-input--m-warning__toggle--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
84+
* @cssprop [--pf-c-search-input--m-warning__toggle--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]
85+
* @cssprop [--pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
86+
* @cssprop [--pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
87+
* @cssprop [--pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
88+
* @cssprop [--pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)]
89+
* @cssprop [--pf-c-search-input--m-warning__toggle-status-icon--Color=var(--pf-global--warning-color--100, #f0ab00)]
90+
* @cssprop [--pf-c-search-input__toggle-wrapper--not-last-child--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]
91+
* @cssprop [--pf-c-search-input__toggle-wrapper--MaxWidth=calc(100% - var(--pf-global--spacer--lg, 1.5rem))]
92+
* @cssprop [--pf-c-search-input__toggle--m-placeholder__toggle-text--Color=var(--pf-global--Color--dark-200, #6a6e73)]
93+
* @cssprop [--pf-c-search-input__toggle-icon--toggle-text--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
94+
* @cssprop [--pf-c-search-input__toggle-status-icon--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]
95+
* @cssprop [--pf-c-search-input__toggle-status-icon--Color=var(--pf-global--Color--100, #151515)]
96+
* @cssprop [--pf-c-search-input--m-plain__toggle-arrow--Color=var(--pf-global--Color--200, #6a6e73)]
97+
* @cssprop [--pf-c-search-input--m-plain--hover__toggle-arrow--Color=var(--pf-global--Color--100, #151515)]
98+
* @cssprop [--pf-c-search-input__toggle-clear--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]
99+
* @cssprop [--pf-c-search-input__toggle-clear--PaddingLeft=var(--pf-global--spacer--md, 1rem)]
100+
* @cssprop [--pf-c-search-input__toggle-clear--toggle-button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]
101+
* @cssprop [--pf-c-search-input__toggle-button--Color=var(--pf-global--Color--100, #151515)]
102+
* @cssprop [--pf-c-search-input__list-item--m-loading--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]
103+
**/
32104
@customElement('pf-search-input')
33105
export class PfSearchInput extends LitElement {
34106
static readonly styles: CSSStyleSheet[] = [styles];

0 commit comments

Comments
 (0)