@studiolxd/brand 49.25.0 → 49.27.0
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.
- package/CHANGELOG.md +38 -0
- package/dist/_shared/tokens.js +4 -0
- package/dist/_types/atoms/FileUpload/FileUpload.d.ts +24 -0
- package/dist/_types/molecules/LoadingState/LoadingState.d.ts +13 -2
- package/dist/brand.css +9 -1
- package/dist/file-upload.css +1 -1
- package/dist/file-upload.js +137 -113
- package/dist/loading-state.css +1 -1
- package/dist/loading-state.js +22 -16
- package/dist/tokens.css +9 -1
- package/package.json +1 -1
- package/src/tokens/molecules/loading-state.css +4 -0
- package/src/tokens/scss/molecules/_loading-state.scss +4 -0
- package/src/tokens/surface-dark-derived.css +1 -0
- package/src/tokens/surface-invert.css +1 -0
- package/src/tokens/surface-light.css +1 -0
- package/src/tokens/surface-public.css +1 -0
- package/src/tokens/tokens.json +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,44 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
|
|
|
7
7
|
regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
|
|
8
8
|
para breaking changes.
|
|
9
9
|
|
|
10
|
+
## [49.27.0] — 2026-10-05
|
|
11
|
+
|
|
12
|
+
> **Minor (49.27.0).** «Subiendo…» pasa a ser texto del catálogo de brand. **Atención:** `fileUpload.uploading`
|
|
13
|
+
> es una clave nueva y obligatoria de `BrandMessages`: cada aplicación debe añadirla a su catálogo (es, en, fr…).
|
|
14
|
+
|
|
15
|
+
### `FileUpload` / `FileUploadField` — texto de la subida por defecto
|
|
16
|
+
|
|
17
|
+
- Clave nueva **`fileUpload.uploading`** («Subiendo…» / «Uploading…»). `uploading` sin `uploadingLabel` anuncia
|
|
18
|
+
ese texto (antes salía de `spinner.label`, «Cargando…»).
|
|
19
|
+
- `uploadingLabelVisible` sin `uploadingLabel` propio **pinta** el texto del catálogo (antes no pintaba nada).
|
|
20
|
+
- Las fixtures de Storybook (es) y de tests (en) llevan la clave nueva.
|
|
21
|
+
|
|
22
|
+
## [49.26.0] — 2026-10-05
|
|
23
|
+
|
|
24
|
+
> **Minor (49.26.0).** `LoadingState` puede pintar su texto en esperas largas con pasos. Sin cambios
|
|
25
|
+
> incompatibles: por defecto sigue mostrándose solo el girador.
|
|
26
|
+
|
|
27
|
+
### `LoadingState` — `labelVisible`
|
|
28
|
+
|
|
29
|
+
- Prop nueva **`labelVisible`** (por defecto `false`): pinta el `label` bajo el girador, centrado, con el
|
|
30
|
+
estilo de la descripción de `EmptyState`. Para esperas largas con pasos («Procesando el documento:
|
|
31
|
+
paso 2 de 5…»); en esperas cortas no se usa.
|
|
32
|
+
- Es el mismo nodo que da el nombre accesible (no se duplica el anuncio). La caja lleva
|
|
33
|
+
`aria-live="polite"` y `aria-atomic="false"`: al cambiar el `label` se anuncia solo el texto nuevo.
|
|
34
|
+
- Sin `label` propio no pinta el texto genérico del catálogo: la espera sigue con el texto oculto (no es error).
|
|
35
|
+
- Tokens nuevos: `loading-state.label-font-family`, `label-font-size`, `sm-label-font-size`, `label-color`
|
|
36
|
+
(apuntan a los de la descripción de `EmptyState`; el par oscuro llega por el fichero derivado).
|
|
37
|
+
|
|
38
|
+
### `FileUpload` / `FileUploadField` — estado de subida (`uploading`)
|
|
39
|
+
|
|
40
|
+
- Props nuevas: **`uploading`** (el girador va dentro de la zona; la zona no admite otro fichero —clic,
|
|
41
|
+
selector, soltar y quitar quedan inertes— pero conserva el foco: no es `disabled`; el control lleva
|
|
42
|
+
`aria-busy` y `aria-disabled`), **`uploadingLabel`** (texto de la espera; sin él, `spinner.label` del
|
|
43
|
+
catálogo, sin texto cableado nuevo) y **`uploadingLabelVisible`** (lo pinta en la zona, con el mismo criterio
|
|
44
|
+
que `LoadingState labelVisible`: sin `uploadingLabel` propio no pinta nada).
|
|
45
|
+
- La espera se anuncia con cortesía (`role="status"`, `aria-live="polite"`, `aria-atomic="false"`).
|
|
46
|
+
- Sin tokens nuevos. `FileUploadField` las hereda del átomo. Sin ficha de paridad nativa (el componente no la tiene).
|
|
47
|
+
|
|
10
48
|
## [49.25.0] — 2026-10-05
|
|
11
49
|
|
|
12
50
|
> **Minor.** Las esperas pasan a ser piezas del sistema: las aplicaciones dejan de
|
package/dist/_shared/tokens.js
CHANGED
|
@@ -1122,6 +1122,10 @@ var e = {
|
|
|
1122
1122
|
"--loading-state-padding-inline": "1.5rem",
|
|
1123
1123
|
"--loading-state-sm-padding-block": "1.5rem",
|
|
1124
1124
|
"--loading-state-spinner-color": "#6b6b6b",
|
|
1125
|
+
"--loading-state-label-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
|
|
1126
|
+
"--loading-state-label-font-size": "1rem",
|
|
1127
|
+
"--loading-state-sm-label-font-size": "0.875rem",
|
|
1128
|
+
"--loading-state-label-color": "#4a4a4a",
|
|
1125
1129
|
"--logo-height-sm": "2rem",
|
|
1126
1130
|
"--logo-height-md": "2.5rem",
|
|
1127
1131
|
"--logo-height-lg": "3rem",
|
|
@@ -34,6 +34,8 @@ export interface FileUploadMessages {
|
|
|
34
34
|
tooLarge: (maxSize: string) => string;
|
|
35
35
|
/** Error de tipo de archivo no admitido. */
|
|
36
36
|
invalidType: string;
|
|
37
|
+
/** Texto de la subida en curso («Subiendo…»): lo anuncia el lector y, con `uploadingLabelVisible`, se pinta en la zona. */
|
|
38
|
+
uploading: string;
|
|
37
39
|
}
|
|
38
40
|
export interface FileUploadProps {
|
|
39
41
|
multiple?: boolean;
|
|
@@ -44,6 +46,28 @@ export interface FileUploadProps {
|
|
|
44
46
|
defaultValue?: File[];
|
|
45
47
|
onChange?: (files: File[]) => void;
|
|
46
48
|
progress?: number;
|
|
49
|
+
/**
|
|
50
|
+
* La subida está en curso. El girador sustituye al icono **dentro de la
|
|
51
|
+
* zona**, que deja de admitir ficheros (clic, selector y soltar quedan
|
|
52
|
+
* inertes, también el aspa de quitar) pero **conserva el foco**: no es
|
|
53
|
+
* `disabled`, así que quien estaba en el campo no lo pierde. El control
|
|
54
|
+
* lleva `aria-busy` y `aria-disabled`, y la espera se anuncia con cortesía
|
|
55
|
+
* (`role="status"`). Es distinto de `progress`, que dibuja una barra con un
|
|
56
|
+
* porcentaje conocido: pueden convivir.
|
|
57
|
+
*/
|
|
58
|
+
uploading?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Texto de la subida en curso («Subiendo 2 de 5…»). **No se ve** salvo con
|
|
61
|
+
* `uploadingLabelVisible`: es lo que anuncia el lector de pantalla. **Sin
|
|
62
|
+
* default**: sin él, sale de `fileUpload.uploading` del `BrandMessagesProvider`.
|
|
63
|
+
*/
|
|
64
|
+
uploadingLabel?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Pinta `uploadingLabel` en la zona, bajo el girador, para subidas largas con
|
|
67
|
+
* progreso por pasos. Sin `uploadingLabel` propio pinta el texto del catálogo
|
|
68
|
+
* (`fileUpload.uploading`, «Subiendo…»). Default `false`.
|
|
69
|
+
*/
|
|
70
|
+
uploadingLabelVisible?: boolean;
|
|
47
71
|
disabled?: boolean;
|
|
48
72
|
error?: boolean;
|
|
49
73
|
id?: string;
|
|
@@ -9,6 +9,16 @@ export interface LoadingStateProps extends Omit<React.HTMLAttributes<HTMLDivElem
|
|
|
9
9
|
* que el `Spinner`.
|
|
10
10
|
*/
|
|
11
11
|
label?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Pinta el `label` bajo el girador, centrado, con el texto atenuado de la
|
|
14
|
+
* descripción de `EmptyState`. Para esperas **largas con pasos** («Procesando
|
|
15
|
+
* el documento: paso 2 de 5…»), donde el texto informa de por dónde va. Es el
|
|
16
|
+
* mismo nodo que da el nombre accesible: no se anuncia dos veces, y cuando
|
|
17
|
+
* `label` cambia la región lo anuncia con cortesía (`polite`). **Sin `label`
|
|
18
|
+
* propio no pinta nada**: el texto genérico del catálogo («Cargando…») no se
|
|
19
|
+
* ve nunca. Por defecto `false`: en una espera corta el texto es ruido.
|
|
20
|
+
*/
|
|
21
|
+
labelVisible?: boolean;
|
|
12
22
|
/**
|
|
13
23
|
* `md` para una página o una zona; `sm` para el cuerpo de un diálogo, una
|
|
14
24
|
* hoja, un popover o una barra lateral.
|
|
@@ -29,11 +39,12 @@ export interface LoadingStateProps extends Omit<React.HTMLAttributes<HTMLDivElem
|
|
|
29
39
|
/**
|
|
30
40
|
* La espera de un bloque cuya forma no se conoce: un girador centrado en una
|
|
31
41
|
* caja que **reserva alto** y, si hace falta, una salida. A la vista solo está
|
|
32
|
-
* el girador; el texto de la espera es solo para los lectores de pantalla
|
|
42
|
+
* el girador; el texto de la espera es solo para los lectores de pantalla,
|
|
43
|
+
* salvo con `labelVisible` (esperas largas con pasos). Cuando la forma sí se conoce (tabla, lista, ficha), la respuesta es
|
|
33
44
|
* `LoadingRegion` con esqueletos.
|
|
34
45
|
*
|
|
35
46
|
* Anuncia: la caja es `role="status"` con `aria-busy`, y su nombre es el texto
|
|
36
47
|
* de la espera, oculto a la vista. El girador va decorativo, para no
|
|
37
48
|
* anunciarla dos veces.
|
|
38
49
|
*/
|
|
39
|
-
export declare function LoadingState({ label, size, fill, action, className, ...rest }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
export declare function LoadingState({ label, labelVisible, size, fill, action, className, ...rest }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
|