diff --git a/components/picker/index.css b/components/picker/index.css index 386efc2242f..dd07b2f619f 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -19,7 +19,9 @@ --spectrum-picker-font-size: var(--spectrum-font-size-100); --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); - --spectrum-picker-line-height: var(--spectrum-line-height-100); + + /* set picker line-height to the height of the picker - prevents the cutting off of diacritics in some languages */ + --spectrum-picker-line-height: var(--spectrum-picker-block-size); /* height */ --spectrum-picker-block-size: var(--spectrum-component-height-100); @@ -352,7 +354,9 @@ overflow: hidden; font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); - line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height)); + + /* no mod defined to allow for maximum compatibility */ + line-height: var(--spectrum-picker-line-height); font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight)); text-overflow: ellipsis; diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md index 057ce9d8643..d7306caa814 100644 --- a/components/picker/metadata/mods.md +++ b/components/picker/metadata/mods.md @@ -49,7 +49,6 @@ | `--mod-picker-icon-color-hover-open` | | `--mod-picker-icon-color-key-focus` | | `--mod-picker-inline-size` | -| `--mod-picker-line-height` | | `--mod-picker-placeholder-font-style` | | `--mod-picker-placeholder-font-weight` | | `--mod-picker-spacing-bottom-to-text` | diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 6052d312584..dd11e13eef2 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -104,8 +104,8 @@ export default { args: { rootClass: "spectrum-Picker", size: "m", - label: "Country", - placeholder: "Select a country", + label: "ทั้งหมด", + placeholder: "ทั้งหมด", isQuiet: false, isKeyboardFocused: false, isLoading: false, @@ -207,7 +207,7 @@ const Variants = (args) => html` ...args, isOpen: false, withSwitch: true, - placeholder: "Select your contry of origin", + placeholder: "Select your country of origin", isQuiet: true, })} @@ -220,7 +220,7 @@ const Variants = (args) => html` isQuiet: true, fieldLabelStyle: {"max-width": "90px"}, label: "Enter country, text should wrap", - placeholder: "Select your contry of origin" + placeholder: "Select your country of origin" })}