@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.30 → 0.0.0-pr624.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -67,13 +67,19 @@ The default component supports the basic input `type="text"` structure. The `(op
67
67
  <div class="exampleWrapper">
68
68
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
69
69
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
70
- <auro-input bordered shape="rounded" size="lg"></auro-input>
70
+ <auro-input>
71
+ <span slot="label">Label</span>
72
+ <span slot="helpText">Help Text</span>
73
+ </auro-input>
71
74
  <!-- AURO-GENERATED-CONTENT:END -->
72
75
  </div>
73
76
  <div class="exampleWrapper--ondark" aria-hidden>
74
77
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
75
78
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
76
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
79
+ <auro-input ondark shape="rounded" size="lg">
80
+ <span slot="label">Label</span>
81
+ <span slot="helpText">Help Text</span>
82
+ </auro-input>
77
83
  <!-- AURO-GENERATED-CONTENT:END -->
78
84
  </div>
79
85
  <auro-accordion alignRight>
@@ -82,14 +88,20 @@ The default component supports the basic input `type="text"` structure. The `(op
82
88
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
83
89
 
84
90
  ```html
85
- <auro-input bordered shape="rounded" size="lg"></auro-input>
91
+ <auro-input>
92
+ <span slot="label">Label</span>
93
+ <span slot="helpText">Help Text</span>
94
+ </auro-input>
86
95
  ```
87
96
  <!-- AURO-GENERATED-CONTENT:END -->
88
97
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
89
98
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
90
99
 
91
100
  ```html
92
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
101
+ <auro-input ondark shape="rounded" size="lg">
102
+ <span slot="label">Label</span>
103
+ <span slot="helpText">Help Text</span>
104
+ </auro-input>
93
105
  ```
94
106
  <!-- AURO-GENERATED-CONTENT:END -->
95
107
  </auro-accordion>
@@ -101,7 +113,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
101
113
  <div class="exampleWrapper">
102
114
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
103
115
  <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
104
- <auro-input placeholder="John Doe" bordered required>
116
+ <auro-input placeholder="John Doe" required>
105
117
  <span slot="label">Full name</span>
106
118
  <span slot="helpText">Please enter your full name.</span>
107
119
  </auro-input>
@@ -113,7 +125,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
113
125
  <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
114
126
 
115
127
  ```html
116
- <auro-input placeholder="John Doe" bordered required>
128
+ <auro-input placeholder="John Doe" required>
117
129
  <span slot="label">Full name</span>
118
130
  <span slot="helpText">Please enter your full name.</span>
119
131
  </auro-input>
@@ -128,16 +140,18 @@ Use the `disabled` attribute to prevent the user from interacting with the input
128
140
  <div class="exampleWrapper">
129
141
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
130
142
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
131
- <auro-input disabled bordered type="date">
132
- <span slot="label">Arrival date</span>
143
+ <auro-input disabled type="date">
144
+ <span slot="label">Disabled</span>
145
+ <span slot="helpText">Help Text</span>
133
146
  </auro-input>
134
147
  <!-- AURO-GENERATED-CONTENT:END -->
135
148
  </div>
136
149
  <div class="exampleWrapper--ondark" aria-hidden>
137
150
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
138
151
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
139
- <auro-input onDark disabled bordered type="date">
152
+ <auro-input onDark disabled type="date">
140
153
  <span slot="label">Arrival date</span>
154
+ <span slot="helpText">Help Text</span>
141
155
  </auro-input>
142
156
  <!-- AURO-GENERATED-CONTENT:END -->
143
157
  </div>
@@ -147,8 +161,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
147
161
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
148
162
 
149
163
  ```html
150
- <auro-input disabled bordered type="date">
151
- <span slot="label">Arrival date</span>
164
+ <auro-input disabled type="date">
165
+ <span slot="label">Disabled</span>
166
+ <span slot="helpText">Help Text</span>
152
167
  </auro-input>
153
168
  ```
154
169
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -156,8 +171,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
156
171
  <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
157
172
 
158
173
  ```html
159
- <auro-input onDark disabled bordered type="date">
174
+ <auro-input onDark disabled type="date">
160
175
  <span slot="label">Arrival date</span>
176
+ <span slot="helpText">Help Text</span>
161
177
  </auro-input>
162
178
  ```
163
179
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -170,7 +186,7 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
170
186
  <div class="exampleWrapper">
171
187
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
172
188
  <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
173
- <auro-input activeLabel bordered>
189
+ <auro-input activeLabel>
174
190
  <span slot="label">Address</span>
175
191
  <span slot="helpText">Please enter your home address.</span>
176
192
  </auro-input>
@@ -182,7 +198,7 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
182
198
  <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
183
199
 
184
200
  ```html
185
- <auro-input activeLabel bordered>
201
+ <auro-input activeLabel>
186
202
  <span slot="label">Address</span>
187
203
  <span slot="helpText">Please enter your home address.</span>
188
204
  </auro-input>
@@ -197,7 +213,7 @@ Use the `value` attribute to preset the value of the element.
197
213
  <div class="exampleWrapper">
198
214
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
199
215
  <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
200
- <auro-input value="Alaska Airlines is the best!" bordered>
216
+ <auro-input value="Alaska Airlines is the best!">
201
217
  <span slot="label">Name</span>
202
218
  <span slot="helpText">Please enter your full name.</span>
203
219
  </auro-input>
@@ -209,7 +225,7 @@ Use the `value` attribute to preset the value of the element.
209
225
  <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
210
226
 
211
227
  ```html
212
- <auro-input value="Alaska Airlines is the best!" bordered>
228
+ <auro-input value="Alaska Airlines is the best!">
213
229
  <span slot="label">Name</span>
214
230
  <span slot="helpText">Please enter your full name.</span>
215
231
  </auro-input>
@@ -226,7 +242,7 @@ The `<auro-input>` component supports setting a custom validity message specific
226
242
  <div class="exampleWrapper">
227
243
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
228
244
  <!-- The below content is automatically added from ./../apiExamples/pattern.html -->
229
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
245
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
230
246
  <span slot="label">Username</span>
231
247
  <span slot="helpText">Please enter a username.</span>
232
248
  </auro-input>
@@ -238,7 +254,7 @@ The `<auro-input>` component supports setting a custom validity message specific
238
254
  <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
239
255
 
240
256
  ```html
241
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
257
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
242
258
  <span slot="label">Username</span>
243
259
  <span slot="helpText">Please enter a username.</span>
244
260
  </auro-input>
@@ -82,7 +82,10 @@ This configuration enables proper module resolution for the component's TypeScri
82
82
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
83
83
 
84
84
  ```html
85
- <auro-input bordered shape="rounded" size="lg"></auro-input>
85
+ <auro-input>
86
+ <span slot="label">Label</span>
87
+ <span slot="helpText">Help Text</span>
88
+ </auro-input>
86
89
  ```
87
90
  <!-- AURO-GENERATED-CONTENT:END -->
88
91
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr624.30",
3
+ "version": "0.0.0-pr624.32",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {