From ddd6ecebb7cfe3d42eec0f7fe0e471a22d57062d Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 24 May 2023 15:33:26 -0700 Subject: [PATCH 1/5] Fix diacritics in textfields --- .../components/textfield/index.css | 2 +- .../textfield/stories/Textfield.stories.tsx | 59 ++++++++++++++++++- 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/index.css b/packages/@adobe/spectrum-css-temp/components/textfield/index.css index dd6a4445b4a..85928e01acf 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/index.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/index.css @@ -76,7 +76,7 @@ governing permissions and limitations under the License. /* Change the input font styles in all browsers */ @extend %i18nFontFamily; font-size: var(--spectrum-textfield-text-size); - line-height: var(--spectrum-textfield-text-line-height); + line-height: var(--spectrum-textfield-height); text-overflow: ellipsis; transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, diff --git a/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx b/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx index 199e9b25284..1f780f44bf9 100644 --- a/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx +++ b/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx @@ -11,8 +11,8 @@ */ import {action} from '@storybook/addon-actions'; +import {ActionButton, Content, ContextualHelp, Heading, useLocale} from '@adobe/react-spectrum'; import {ComponentStoryObj} from '@storybook/react'; -import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum'; import Info from '@spectrum-icons/workflow/Info'; import React from 'react'; import {TextField} from '../'; @@ -146,6 +146,63 @@ export const CustomWidthSmall: TextFieldStory = { name: 'custom width small' }; +// strings with diacritic marks +let localeStrings = { + 'ar-AE': 'عِرِفِتـــانٍ خانٍِ', + 'bg-BG': 'Азбучен ред', + 'cs-CZ': 'Abecední řádek', + 'da-DK': 'Afbryder', + 'de-DE': 'Abbruch', + 'el-GR': 'Αλφαβητική γραμμή', + 'en-US': '123 Main St.', + 'es-ES': 'Línea alfabética', + 'et-EE': 'Tähestikuline rida', + 'fi-FI': 'Aakkosellinen rivi', + 'fr-FR': 'Ligne alphabétique', + 'he-IL': 'שורת אלפבית', + 'hr-HR': 'Abecedni redak', + 'hu-HU': 'Ábécésor', + 'it-IT': 'Riga alfabetica', + 'ja-JP': 'アルファベット順', + 'ko-KR': '알파벳 순서', + 'lt-LT': 'Abėcėlinė eilutė', + 'lv-LV': 'Alfabētiskā rinda', + 'nb-NO': 'Alfabetisk rekkefølge', + 'nl-NL': 'Alfabetische volgorde', + 'pl-PL': 'Alfabetyczny wiersz', + 'pt-BR': 'Linha alfabética', + 'ro-RO': 'Rând alfabetic', + 'ru-RU': 'Алфавитный порядок', + 'sk-SK': 'Abecedný riadok', + 'sl-SI': 'Abecedni red', + 'sr-SP': 'Абецедни ред', + 'sv-SE': 'Alfabetisk ordning', + 'tr-TR': 'Alfabetik sıra', + 'uk-UA': 'Алфавітний порядок', + 'zh-CN': '字母顺序', + 'zh-TW': '字母順序' +}; +// https://lingojam.com/ZalgoText +let zalgoString = 'i̶͖̊́̃̒̄͆̚͝t̶̢̢̧̺̻̘̖̗͉̟̞̭̀̀͒͂͐̐̄̇́͒̅̆́\'̶̯̳̑͑͛͐͋̈́̆̇̓͝͝s̵͙͇͉̪̉̈́̐̌̌̃̓͝ ̴̙̘̙̏̍̌̀̕͝m̶̰̥͇̄͒̃̊́͋̎́͆̍̓͑̅͜ȩ̵̛̪̜̯͓͈̰̰̱̠͆̾́́̎̊͌̒́͗̚̕͠ͅ,̷̫̱͖̖͊̉̒̎͊͝ ̵̡̧̛̝̳̦͙͚̣̩̜͙̈́̾̃̋͒̃̇̔̀͜ͅi̵̯̰̰͉̺͎̖̐ͅ\'̷͚̊͐͑͗́͒͌́͛̚̕͝m̴̨̧̯̞͇̤͎̥̫̩͔͖̮̖̲̽͆͗̌̈̇͋̍̕͘͠ ̸͚̞̠̦̑̌̍͋̃t̷̘̝̘̣̮͓̠̮̤͍͕̓͛̉h̶̛͔̳̟̩̦͍̤̥̥̦̗͍͖̓͆̐̽̒̈́͝͠ē̷̛͓̫̜͕͈͙̮͕̝͙̆͂̇̿̋̇̓̂̋͒̂͂͝ ̸̨͈̠̟̤͇̟̗̼̲̯̭̓̈̑́̇̈̀͐͌͂͛͌̅͘͜͝ͅp̴̧̧̛̛̺̩̩̘̲̜̰̩͚̻̬̠̎̅́̏̂́̐̾̓̓͌͝r̷̜̱̒̊̒͛̔ơ̷̼̝̥̺͎͚͚͇̝̫̓̈́̽̈̍̈̌̂̀̚͝͝ḇ̵̠̼͔͙̦̝̠̳̤̍͗͐͝l̷̛̰̲̺̫̭̳̹̬̳̤̱͎̋͛ȩ̷͒m̵̳̟͉̪̞̎̐̓̏̒͗,̶̨͍̥̗̺̮̰̬͍̓͋̄̋͛́̄̕͝ ̷̧̡̧̫̯̘̣̠̮͕̪͈̣̹͌̈̃̃̈́̃̍̊͝͝ͅį̸̲̠̤̳͗̽̋͊̍͛͂̊̓̑̅͋̿t̶̛̲͈͇͇͊̋͐̐͌͒̊̿̕͘\'̸̧͍̠̲̤̠̝̩̟̿͌ś̷̳͇̅̇͛͛̈́̅̑̇̔̌͆͝ ̵̛̱̺̙̪͒̇̔͗͘ͅm̶̢̧̤̟͙͉̠̣̺̥̫͙̹͉̬̉̏͑̕͝e̴̪̥̪̠̜̻̪͎͎̱̱̯̜͒́̑̃̕'; +function DefaultLocaleStrings(props) { + let locale = useLocale(); + let [isZalgo, setValue] = React.useState(false); + return ( + <> + + setValue(prev => !prev)}>Toggle Zalgo + + ); +} + +export const WithDifferentLocaleText: TextFieldStory = { + render: (args) => +}; + function render(props = {}) { return ( Date: Tue, 30 May 2023 16:11:20 -0700 Subject: [PATCH 2/5] take border into account --- .../@adobe/spectrum-css-temp/components/textfield/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/index.css b/packages/@adobe/spectrum-css-temp/components/textfield/index.css index 85928e01acf..45b47bfbb04 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/index.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/index.css @@ -76,7 +76,7 @@ governing permissions and limitations under the License. /* Change the input font styles in all browsers */ @extend %i18nFontFamily; font-size: var(--spectrum-textfield-text-size); - line-height: var(--spectrum-textfield-height); + line-height: calc(var(--spectrum-textfield-height) - 2 * var(--spectrum-textfield-border-size)); text-overflow: ellipsis; transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, From 37b0f54d2d3a05881fa13af2d9b80ef54aea5cdc Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Thu, 1 Jun 2023 10:45:50 -0700 Subject: [PATCH 3/5] Revert change so we have a baseline to easily use to reproduce --- .../@adobe/spectrum-css-temp/components/textfield/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/index.css b/packages/@adobe/spectrum-css-temp/components/textfield/index.css index 45b47bfbb04..dd6a4445b4a 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/index.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/index.css @@ -76,7 +76,7 @@ governing permissions and limitations under the License. /* Change the input font styles in all browsers */ @extend %i18nFontFamily; font-size: var(--spectrum-textfield-text-size); - line-height: calc(var(--spectrum-textfield-height) - 2 * var(--spectrum-textfield-border-size)); + line-height: var(--spectrum-textfield-text-line-height); text-overflow: ellipsis; transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, From 74a2e3ad5641ccbc97fa35e03d8651b36fae394a Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 2 Jun 2023 14:00:51 -0700 Subject: [PATCH 4/5] make lineheight equal to height --- .../@adobe/spectrum-css-temp/components/textfield/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/index.css b/packages/@adobe/spectrum-css-temp/components/textfield/index.css index dd6a4445b4a..85928e01acf 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/index.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/index.css @@ -76,7 +76,7 @@ governing permissions and limitations under the License. /* Change the input font styles in all browsers */ @extend %i18nFontFamily; font-size: var(--spectrum-textfield-text-size); - line-height: var(--spectrum-textfield-text-line-height); + line-height: var(--spectrum-textfield-height); text-overflow: ellipsis; transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, From 071087a0314d9419e82322ef4e2968a4140dd106 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 2 Jun 2023 14:29:38 -0700 Subject: [PATCH 5/5] dont change textarea --- .../components/textfield/index.css | 4 ++ .../textfield/stories/TextArea.stories.tsx | 61 ++++++++++++++++++- 2 files changed, 63 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/index.css b/packages/@adobe/spectrum-css-temp/components/textfield/index.css index 85928e01acf..2745a850472 100644 --- a/packages/@adobe/spectrum-css-temp/components/textfield/index.css +++ b/packages/@adobe/spectrum-css-temp/components/textfield/index.css @@ -206,6 +206,10 @@ governing permissions and limitations under the License. flex: 1 1 auto; min-height: 0; + .spectrum-Textfield-input { + line-height: var(--spectrum-textfield-text-line-height); + } + &.spectrum-Textfield--quiet { /* quiet textfields grow based on text content, up to the height of the container. */ /* but we need to keep help text next to input */ diff --git a/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx b/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx index b85682bbc2c..5ae0332a53e 100644 --- a/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx +++ b/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx @@ -11,8 +11,8 @@ */ import {action} from '@storybook/addon-actions'; -import {Button} from '@react-spectrum/button'; -import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum'; +import {ActionButton, Button} from '@react-spectrum/button'; +import {Content, ContextualHelp, Heading, useLocale} from '@adobe/react-spectrum'; import {Flex} from '@react-spectrum/layout'; import {Form} from '@react-spectrum/form'; import Info from '@spectrum-icons/workflow/Info'; @@ -298,3 +298,60 @@ function ValidationExample(props) { errorMessage={value === '' ? 'Empty input not allowed.' : 'Single digit numbers are 0-9. Lorem ipsum dolor.'} /> ); } + +// strings with diacritic marks +let localeStrings = { + 'ar-AE': 'عِرِفِتـــانٍ خانٍِ', + 'bg-BG': 'Азбучен ред', + 'cs-CZ': 'Abecední řádek', + 'da-DK': 'Afbryder', + 'de-DE': 'Abbruch', + 'el-GR': 'Αλφαβητική γραμμή', + 'en-US': '123 Main St.', + 'es-ES': 'Línea alfabética', + 'et-EE': 'Tähestikuline rida', + 'fi-FI': 'Aakkosellinen rivi', + 'fr-FR': 'Ligne alphabétique', + 'he-IL': 'שורת אלפבית', + 'hr-HR': 'Abecedni redak', + 'hu-HU': 'Ábécésor', + 'it-IT': 'Riga alfabetica', + 'ja-JP': 'アルファベット順', + 'ko-KR': '알파벳 순서', + 'lt-LT': 'Abėcėlinė eilutė', + 'lv-LV': 'Alfabētiskā rinda', + 'nb-NO': 'Alfabetisk rekkefølge', + 'nl-NL': 'Alfabetische volgorde', + 'pl-PL': 'Alfabetyczny wiersz', + 'pt-BR': 'Linha alfabética', + 'ro-RO': 'Rând alfabetic', + 'ru-RU': 'Алфавитный порядок', + 'sk-SK': 'Abecedný riadok', + 'sl-SI': 'Abecedni red', + 'sr-SP': 'Абецедни ред', + 'sv-SE': 'Alfabetisk ordning', + 'tr-TR': 'Alfabetik sıra', + 'uk-UA': 'Алфавітний порядок', + 'zh-CN': '字母顺序', + 'zh-TW': '字母順序' +}; +// https://lingojam.com/ZalgoText +let zalgoString = 'i̶͖̊́̃̒̄͆̚͝t̶̢̢̧̺̻̘̖̗͉̟̞̭̀̀͒͂͐̐̄̇́͒̅̆́\'̶̯̳̑͑͛͐͋̈́̆̇̓͝͝s̵͙͇͉̪̉̈́̐̌̌̃̓͝ ̴̙̘̙̏̍̌̀̕͝m̶̰̥͇̄͒̃̊́͋̎́͆̍̓͑̅͜ȩ̵̛̪̜̯͓͈̰̰̱̠͆̾́́̎̊͌̒́͗̚̕͠ͅ,̷̫̱͖̖͊̉̒̎͊͝ ̵̡̧̛̝̳̦͙͚̣̩̜͙̈́̾̃̋͒̃̇̔̀͜ͅi̵̯̰̰͉̺͎̖̐ͅ\'̷͚̊͐͑͗́͒͌́͛̚̕͝m̴̨̧̯̞͇̤͎̥̫̩͔͖̮̖̲̽͆͗̌̈̇͋̍̕͘͠ ̸͚̞̠̦̑̌̍͋̃t̷̘̝̘̣̮͓̠̮̤͍͕̓͛̉h̶̛͔̳̟̩̦͍̤̥̥̦̗͍͖̓͆̐̽̒̈́͝͠ē̷̛͓̫̜͕͈͙̮͕̝͙̆͂̇̿̋̇̓̂̋͒̂͂͝ ̸̨͈̠̟̤͇̟̗̼̲̯̭̓̈̑́̇̈̀͐͌͂͛͌̅͘͜͝ͅp̴̧̧̛̛̺̩̩̘̲̜̰̩͚̻̬̠̎̅́̏̂́̐̾̓̓͌͝r̷̜̱̒̊̒͛̔ơ̷̼̝̥̺͎͚͚͇̝̫̓̈́̽̈̍̈̌̂̀̚͝͝ḇ̵̠̼͔͙̦̝̠̳̤̍͗͐͝l̷̛̰̲̺̫̭̳̹̬̳̤̱͎̋͛ȩ̷͒m̵̳̟͉̪̞̎̐̓̏̒͗,̶̨͍̥̗̺̮̰̬͍̓͋̄̋͛́̄̕͝ ̷̧̡̧̫̯̘̣̠̮͕̪͈̣̹͌̈̃̃̈́̃̍̊͝͝ͅį̸̲̠̤̳͗̽̋͊̍͛͂̊̓̑̅͋̿t̶̛̲͈͇͇͊̋͐̐͌͒̊̿̕͘\'̸̧͍̠̲̤̠̝̩̟̿͌ś̷̳͇̅̇͛͛̈́̅̑̇̔̌͆͝ ̵̛̱̺̙̪͒̇̔͗͘ͅm̶̢̧̤̟͙͉̠̣̺̥̫͙̹͉̬̉̏͑̕͝e̴̪̥̪̠̜̻̪͎͎̱̱̯̜͒́̑̃̕'; +function DefaultLocaleStrings(props) { + let locale = useLocale(); + let [isZalgo, setValue] = React.useState(false); + return ( + <> +