Skip to content

Fix diacritics in textfields #4579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snowystinger merged 10 commits into from
Jun 3, 2023
Merged

Fix diacritics in textfields #4579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ddd6ece
Fix diacritics in textfields
snowystinger May 24, 2023
c035a7c
Merge branch 'main' into fix-textfield-diacritics
snowystinger May 25, 2023
3c41e7b
Merge branch 'main' into fix-textfield-diacritics
snowystinger May 25, 2023
994e47e
take border into account
snowystinger May 30, 2023
37b0f54
Revert change so we have a baseline to easily use to reproduce
snowystinger Jun 1, 2023
74a2e3a
make lineheight equal to height
snowystinger Jun 2, 2023
071087a
dont change textarea
snowystinger Jun 2, 2023
e197ca8
Merge branch 'main' into fix-textfield-diacritics
snowystinger Jun 2, 2023
b7470cc
Merge branch 'main' into fix-textfield-diacritics
snowystinger Jun 2, 2023
49a8b3f
Merge branch 'main' into fix-textfield-diacritics
snowystinger Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/@adobe/spectrum-css-temp/components/textfield/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 */
Expand Down
61 changes: 59 additions & 2 deletions packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
<>
<TextArea
label="Sampling of diacritics"
value={isZalgo ? zalgoString : localeStrings[locale.locale]}
UNSAFE_className="custom_classname"
{...props} />
<ActionButton onPress={() => setValue(prev => !prev)}>Toggle Zalgo</ActionButton>
</>
);
}

export const WithDifferentLocaleText = {
render: (args) => <DefaultLocaleStrings {...args} />
};
59 changes: 58 additions & 1 deletion packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 '../';
Expand Down Expand Up @@ -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 (
<>
<TextField
label="Sampling of diacritics"
value={isZalgo ? zalgoString : localeStrings[locale.locale]}
UNSAFE_className="custom_classname"
{...props} />
<ActionButton onPress={() => setValue(prev => !prev)}>Toggle Zalgo</ActionButton>
</>
);
}

export const WithDifferentLocaleText: TextFieldStory = {
render: (args) => <DefaultLocaleStrings {...args} />
};

function render(props = {}) {
return (
<TextField
Expand Down