@jirawatpyk/aura-react 5.7.1 → 5.7.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.
- package/README.md +4 -0
- package/dist/styles.css +5 -2
- package/dist/styles.layer.css +5 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -186,6 +186,10 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
|
|
|
186
186
|
- **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
|
|
187
187
|
- **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
|
|
188
188
|
|
|
189
|
+
## 5.7.2 — SideNav labels hyphenate
|
|
190
|
+
|
|
191
|
+
- **SideNav** (item 64): a long compound word hyphenates at a syllable (`hyphens: auto`) instead of breaking wherever the line runs out — "Marknadsförings-" / "målgrupp" rather than "Marknadsföringsmålgrup" / "p". The browser's dictionary for the page's `lang` decides — Safari and Firefox ship them; Chrome downloads them on demand, so they can be missing (headless and managed machines especially). Breaking anywhere stays the last resort. Only words of 12+ letters hyphenate, with at least 5 on each side (`hyphenate-limit-chars`, Chrome 109+ and Firefox 137+), so ordinary English labels still wrap between words; a long English word in a two-line label can now hyphenate too. Where no dictionary is available, put a soft hyphen in the label — `'Marknadsförings\u00ADmålgrupp'` — which breaks there everywhere, shows a hyphen only when it breaks, and adds no hyphen to the accessible name (it is an invisible format character screen readers skip). Set `<html lang>` per locale.
|
|
192
|
+
|
|
189
193
|
## 5.7.1 — SideNav labels wrap
|
|
190
194
|
|
|
191
195
|
- **SideNav** (item 63): a long label wraps to a second line instead of ending in an ellipsis, so Thai and Swedish names read in full in the 240px nav and the phone drawer. One-line rows stay 36px (44px on touch); a two-line row grows to 44px with its icon centred. Past two lines the label clamps; the accessible name is always complete. The collapsed rail is unchanged.
|
package/dist/styles.css
CHANGED
|
@@ -653,9 +653,12 @@ a.aura-tab { text-decoration: none; }
|
|
|
653
653
|
/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
|
|
654
654
|
@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
|
|
655
655
|
/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
|
|
656
|
-
* way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps.
|
|
656
|
+
* way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps.
|
|
657
|
+
* 5.7.2: a long compound word hyphenates at a syllable where the browser has a dictionary for the page's `lang`
|
|
658
|
+
* ("Marknadsförings-" / "målgrupp"); breaking anywhere is only the last resort. Only words of 12+ letters hyphenate,
|
|
659
|
+
* with 5+ on each side, so ordinary English labels keep wrapping between words. */
|
|
657
660
|
.aura-nav__label {
|
|
658
|
-
flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
|
|
661
|
+
flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5;
|
|
659
662
|
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
|
|
660
663
|
}
|
|
661
664
|
.aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
|
package/dist/styles.layer.css
CHANGED
|
@@ -655,9 +655,12 @@ a.aura-tab { text-decoration: none; }
|
|
|
655
655
|
/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
|
|
656
656
|
@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
|
|
657
657
|
/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
|
|
658
|
-
* way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps.
|
|
658
|
+
* way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps.
|
|
659
|
+
* 5.7.2: a long compound word hyphenates at a syllable where the browser has a dictionary for the page's `lang`
|
|
660
|
+
* ("Marknadsförings-" / "målgrupp"); breaking anywhere is only the last resort. Only words of 12+ letters hyphenate,
|
|
661
|
+
* with 5+ on each side, so ordinary English labels keep wrapping between words. */
|
|
659
662
|
.aura-nav__label {
|
|
660
|
-
flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
|
|
663
|
+
flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5;
|
|
661
664
|
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
|
|
662
665
|
}
|
|
663
666
|
.aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
|
package/package.json
CHANGED