js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add native <input type="file"> styles (#1279)

Browse Source 
* add `input type="file"` styles

* add `max-inline-size`

* refactor button styles to include `::file-selector-button`

* improve docs

* add changelog

* add region marker
This commit is contained in:
Lindsay M
2025-08-11 10:39:47 -04:00
committed by GitHub
parent 437e0d9aec
commit da27a8dc74
3 changed files with 249 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -21,12 +21,14 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
- Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224]
- Added the `without-arrow` attribute to `<wa-popover>` and `<wa-tooltip>` to hide arrows without artifacts
- Added JSX types for use with React and others [pr:1256]
- Added `<input type="file">` to native styles [pr:1279]
### Bug Fixes and Improvements {data-no-outline}
- Fixed a bug in `<wa-details>` that caused the content to overflow the container when animating [issue:1149]
- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented the header from showing when the label was missing [issue:1209]
- Fixed a missing dependency required for React wrappers
- Fixed missing `:hover` and `:active` styles on native buttons without an appearance modifier class
## 3.0.0-beta.3

28
packages/webawesome/docs/docs/utilities/native.md
View File

@@ -404,6 +404,7 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
<label>Time <input type="time" /></label>
<label>Number <input type="number" placeholder="12345" /></label>
<label>Color <input type="color" value="#f36944" /></label>
<label>File <input type="file" multiple /></label>
<label>Range <input type="range" /></label>
<label>Select
<select>
@@ -430,6 +431,27 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
</script>
```
Add the `wa-size-s`, `wa-size-m`, or `wa-size-l` class to any form control or its parent `<label>` to specify its size.
```html {.example}
<div class="wa-stack">
<input type="text" placeholder="Small input" class="wa-size-s" />
<div class="wa-cluster">
<label class="wa-size-s"><input type="checkbox" checked /> Small checkbox</label>
<label class="wa-size-s"><input type="radio" name="radio-small" value="1" checked /> Small radio</label>
</div>
<input type="text" placeholder="Medium input" class="wa-size-m" />
<div class="wa-cluster">
<label class="wa-size-m"><input type="checkbox" checked /> Medium checkbox</label>
<label class="wa-size-m"><input type="radio" name="radio-medium" value="1" checked /> Medium radio</label>
</div>
<input type="text" placeholder="Large input" class="wa-size-l" />
<div class="wa-cluster">
<label class="wa-size-l"><input type="checkbox" checked /> Large checkbox</label>
<label class="wa-size-l"><input type="radio" name="radio-large" value="1" checked /> Large radio</label>
</div>
</div>
```
Add the `wa-filled` class to an input to give it a filled background.
```html {.example}
@@ -453,6 +475,12 @@ Add the `wa-pill` class to an input or select to give it rounded edges.
</div>
```
Add any [button](#buttons) modifier class to `<input type="file">` to change the file selector button's color variant, appearance, size, and shape.
```html {.example}
<input type="file" class="wa-filled wa-outlined wa-warning wa-size-s wa-pill" />
```
### Fieldsets
Group form controls together with `<fieldset>` and `<legend>`.

328
packages/webawesome/src/styles/native.css
View File

@@ -560,124 +560,219 @@
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
display: inline-flex;
align-items: center;
justify-content: center;
input[type='submit'],
input[type='file'] {
/* We allow modifier classes on <input type="file">,
* but these selectors ensure the styles only apply to
* the file selector button in the user agent's shadow root */
&:not(input[type='file']),
&::file-selector-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-font-weight-action);
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-font-weight-action);
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
border-style: var(--wa-border-style);
border-width: max(1px, var(--wa-form-control-border-width));
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-border-style);
border-width: max(1px, var(--wa-form-control-border-width));
border-radius: var(--wa-form-control-border-radius);
transition-property: background, border, box-shadow, color;
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
transition-property: background, border, box-shadow, color;
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
&.wa-plain {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: transparent;
&:not(:disabled):hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(:disabled):active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
&.wa-outlined {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
&:not(:disabled):hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(:disabled):active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
&.wa-filled {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
&:not(:disabled):hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
&:not(:disabled):active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
&.wa-outlined {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
&.wa-accent {
/* Default styles for standard buttons */
:where(&:not(input[type='file'])) {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
&:not(:disabled):hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
&:not(:disabled) {
&:hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
}
&:active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
}
}
}
/* Default styles for file selector buttons */
:where(&:is(input[type='file'])) {
&::file-selector-button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
&:not(:disabled):active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
&:not(:disabled) {
&::file-selector-button:hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
&::file-selector-button:active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
}
}
/* Modifier classes */
&.wa-plain {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(input[type='file']):active,
&::file-selector-button:active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
}
&.wa-outlined {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(input[type='file']):active,
&::file-selector-button:active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
}
&.wa-filled {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
&:not(input[type='file']):active,
&::file-selector-button:active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
}
&.wa-outlined {
&:not(input[type='file']),
&::file-selector-button {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
}
&.wa-accent {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
}
&:not(input[type='file']):active,
&::file-selector-button:active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
}
}
}
&.wa-pill {
&:not(input[type='file']),
&::file-selector-button {
border-radius: var(--wa-border-radius-pill);
}
}
@@ -705,10 +800,6 @@
}
}
&.wa-pill {
border-radius: var(--wa-border-radius-pill);
}
/* Adds space between icons and adjacent elements
* Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
& > wa-icon:has(+ *) {
@@ -721,6 +812,25 @@
}
/* #endregion */
/* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
input[type='file'] {
display: block;
max-inline-size: 100%;
color: var(--wa-form-control-value-color);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
border-radius: var(--wa-border-radius-m);
cursor: pointer;
}
/* #endregion */
/* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
input[type='checkbox'],
label:has(input[type='checkbox']),