@iroco/ui 1.15.0 → 1.15.2

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.
Files changed (7) hide show
  1. package/dist/NumberInput.svelte +6 -6
  2. package/dist/PasswordInput.stories.svelte +1 -0
  3. package/dist/PasswordInput.svelte +47 -34
  4. package/dist/RadioButton.svelte +6 -6
  5. package/dist/TextInput.svelte +6 -6
  6. package/dist/scss/forms.scss +1 -1
  7. package/package.json +1 -1
package/dist/NumberInput.svelte CHANGED
@@ -134,7 +134,7 @@
134
134
  display: flex;
135
135
  flex-direction: column;
136
136
  }
137
- .iroco-ui-form .iroco-ui-input > input {
137
+ .iroco-ui-form .iroco-ui-input input {
138
138
  color: var(--color-text);
139
139
  background: var(--color-body);
140
140
  border: 1px solid var(--color-border);
@@ -144,19 +144,19 @@
144
144
  overflow: hidden;
145
145
  border-radius: 0.5em;
146
146
  }
147
- .iroco-ui-form .iroco-ui-input > input::placeholder {
147
+ .iroco-ui-form .iroco-ui-input input::placeholder {
148
148
  color: var(--form-text-placeholder);
149
149
  }
150
- .iroco-ui-form .iroco-ui-input > input.error {
150
+ .iroco-ui-form .iroco-ui-input input.error {
151
151
  border-color: var(--color-danger);
152
152
  }
153
- .iroco-ui-form .iroco-ui-input > input.error:focus {
153
+ .iroco-ui-form .iroco-ui-input input.error:focus {
154
154
  outline-color: var(--color-danger);
155
155
  }
156
- .iroco-ui-form .iroco-ui-input > input.readonlyInput {
156
+ .iroco-ui-form .iroco-ui-input input.readonlyInput {
157
157
  cursor: not-allowed;
158
158
  }
159
- .iroco-ui-form .iroco-ui-input > input.border {
159
+ .iroco-ui-form .iroco-ui-input input.border {
160
160
  border: 1px solid var(--form-element-border);
161
161
  }
162
162
  .iroco-ui-form .iroco-ui-label {
package/dist/PasswordInput.stories.svelte CHANGED
@@ -31,3 +31,4 @@
31
31
  {/snippet}
32
32
 
33
33
  <Story name="Default" />
34
+ <Story name="Label" args={{ label: 'Label' }} />
package/dist/PasswordInput.svelte CHANGED
@@ -55,25 +55,32 @@
55
55
  {#if label}
56
56
  <label class="iroco-ui-label" for={id}>{label}</label>
57
57
  {/if}
58
- <input
59
- type={fieldType}
60
- {oninput}
61
- bind:value
62
- {onfocus}
63
- {onblur}
64
- {id}
65
- {name}
66
- {placeholder}
67
- {autocomplete}
68
- class:border
69
- class:error={hasErrors()}
70
- class:readonlyInput={readonly === true}
71
- {readonly}
72
- {...rest}
73
- />
74
- <button class="password-viewer" type="button" onclick={toggleShowPassword}>
75
- <Icon data={eye} />
76
- </button>
58
+ <div class="iroco-ui-input__field">
59
+ <input
60
+ type={fieldType}
61
+ {oninput}
62
+ bind:value
63
+ {onfocus}
64
+ {onblur}
65
+ {id}
66
+ {name}
67
+ {placeholder}
68
+ {autocomplete}
69
+ class:border
70
+ class:error={hasErrors()}
71
+ class:readonlyInput={readonly === true}
72
+ {readonly}
73
+ {...rest}
74
+ />
75
+ <button
76
+ type="button"
77
+ onclick={toggleShowPassword}
78
+ aria-label="Show password"
79
+ aria-pressed="false"
80
+ >
81
+ <Icon data={eye} />
82
+ </button>
83
+ </div>
77
84
  {#if error != null}
78
85
  <p data-testid="error" class="error">
79
86
  {#if htmlError}
@@ -200,7 +207,7 @@
200
207
  display: flex;
201
208
  flex-direction: column;
202
209
  }
203
- .iroco-ui-form .iroco-ui-input > input {
210
+ .iroco-ui-form .iroco-ui-input input {
204
211
  color: var(--color-text);
205
212
  background: var(--color-body);
206
213
  border: 1px solid var(--color-border);
@@ -210,19 +217,19 @@
210
217
  overflow: hidden;
211
218
  border-radius: 0.5em;
212
219
  }
213
- .iroco-ui-form .iroco-ui-input > input::placeholder {
220
+ .iroco-ui-form .iroco-ui-input input::placeholder {
214
221
  color: var(--form-text-placeholder);
215
222
  }
216
- .iroco-ui-form .iroco-ui-input > input.error {
223
+ .iroco-ui-form .iroco-ui-input input.error {
217
224
  border-color: var(--color-danger);
218
225
  }
219
- .iroco-ui-form .iroco-ui-input > input.error:focus {
226
+ .iroco-ui-form .iroco-ui-input input.error:focus {
220
227
  outline-color: var(--color-danger);
221
228
  }
222
- .iroco-ui-form .iroco-ui-input > input.readonlyInput {
229
+ .iroco-ui-form .iroco-ui-input input.readonlyInput {
223
230
  cursor: not-allowed;
224
231
  }
225
- .iroco-ui-form .iroco-ui-input > input.border {
232
+ .iroco-ui-form .iroco-ui-input input.border {
226
233
  border: 1px solid var(--form-element-border);
227
234
  }
228
235
  .iroco-ui-form .iroco-ui-label {
@@ -278,17 +285,23 @@
278
285
  position: relative;
279
286
  width: 100%;
280
287
  }
281
- .iroco-ui-input input {
288
+ .iroco-ui-input__field {
289
+ position: relative;
290
+ display: flex;
291
+ align-items: center;
292
+ }
293
+ .iroco-ui-input__field input {
282
294
  width: 100%;
283
- padding-right: 35px;
295
+ padding-right: 1em;
284
296
  }
285
- .iroco-ui-input .password-viewer {
297
+ .iroco-ui-input__field button {
286
298
  position: absolute;
287
- right: 10px;
288
- top: 50%;
289
- transform: translateY(-50%);
290
- cursor: pointer;
291
- color: var(--color-background);
292
- background-color: transparent;
299
+ right: 1rem;
300
+ background: none;
293
301
  border: none;
302
+ cursor: pointer;
303
+ padding: 0;
304
+ display: flex;
305
+ align-items: center;
306
+ color: var(--color-foreground);
294
307
  }</style>
package/dist/RadioButton.svelte CHANGED
@@ -130,7 +130,7 @@
130
130
  display: flex;
131
131
  flex-direction: column;
132
132
  }
133
- .iroco-ui-form .iroco-ui-input > input {
133
+ .iroco-ui-form .iroco-ui-input input {
134
134
  color: var(--color-text);
135
135
  background: var(--color-body);
136
136
  border: 1px solid var(--color-border);
@@ -140,19 +140,19 @@
140
140
  overflow: hidden;
141
141
  border-radius: 0.5em;
142
142
  }
143
- .iroco-ui-form .iroco-ui-input > input::placeholder {
143
+ .iroco-ui-form .iroco-ui-input input::placeholder {
144
144
  color: var(--form-text-placeholder);
145
145
  }
146
- .iroco-ui-form .iroco-ui-input > input.error {
146
+ .iroco-ui-form .iroco-ui-input input.error {
147
147
  border-color: var(--color-danger);
148
148
  }
149
- .iroco-ui-form .iroco-ui-input > input.error:focus {
149
+ .iroco-ui-form .iroco-ui-input input.error:focus {
150
150
  outline-color: var(--color-danger);
151
151
  }
152
- .iroco-ui-form .iroco-ui-input > input.readonlyInput {
152
+ .iroco-ui-form .iroco-ui-input input.readonlyInput {
153
153
  cursor: not-allowed;
154
154
  }
155
- .iroco-ui-form .iroco-ui-input > input.border {
155
+ .iroco-ui-form .iroco-ui-input input.border {
156
156
  border: 1px solid var(--form-element-border);
157
157
  }
158
158
  .iroco-ui-form .iroco-ui-label {
package/dist/TextInput.svelte CHANGED
@@ -192,7 +192,7 @@
192
192
  display: flex;
193
193
  flex-direction: column;
194
194
  }
195
- .iroco-ui-form .iroco-ui-input > input {
195
+ .iroco-ui-form .iroco-ui-input input {
196
196
  color: var(--color-text);
197
197
  background: var(--color-body);
198
198
  border: 1px solid var(--color-border);
@@ -202,19 +202,19 @@
202
202
  overflow: hidden;
203
203
  border-radius: 0.5em;
204
204
  }
205
- .iroco-ui-form .iroco-ui-input > input::placeholder {
205
+ .iroco-ui-form .iroco-ui-input input::placeholder {
206
206
  color: var(--form-text-placeholder);
207
207
  }
208
- .iroco-ui-form .iroco-ui-input > input.error {
208
+ .iroco-ui-form .iroco-ui-input input.error {
209
209
  border-color: var(--color-danger);
210
210
  }
211
- .iroco-ui-form .iroco-ui-input > input.error:focus {
211
+ .iroco-ui-form .iroco-ui-input input.error:focus {
212
212
  outline-color: var(--color-danger);
213
213
  }
214
- .iroco-ui-form .iroco-ui-input > input.readonlyInput {
214
+ .iroco-ui-form .iroco-ui-input input.readonlyInput {
215
215
  cursor: not-allowed;
216
216
  }
217
- .iroco-ui-form .iroco-ui-input > input.border {
217
+ .iroco-ui-form .iroco-ui-input input.border {
218
218
  border: 1px solid var(--form-element-border);
219
219
  }
220
220
  .iroco-ui-form .iroco-ui-label {
package/dist/scss/forms.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  display: flex;
20
20
  flex-direction: column;
21
21
 
22
- > input {
22
+ input {
23
23
  color: var(--color-text);
24
24
  background: var(--color-body);
25
25
  border: 1px solid var(--color-border);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.15.0",
3
+ "version": "1.15.2",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {