diff --git a/CHANGELOG.md b/CHANGELOG.md index 9029b2b802..d9b6cab6f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822)) +### Fixes +- Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824)) + ## [v0.19.2](https://github.com/stardust-ui/react/tree/v0.19.2) (2019-02-01) [Compare changes](https://github.com/stardust-ui/react/compare/v0.19.1...v0.19.2) @@ -77,7 +80,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772)) - Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771)) -- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) +- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24) diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index df61fe2d0e..94ee6ba53e 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -134,6 +134,7 @@ class Input extends AutoControlledComponent, InputState> as: 'input', type, value, + className: `${Input.className}__input`, styles: styles.input, onChange: this.handleChange, }, diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts index b2bc8f1eb8..cb0f8652e5 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts @@ -14,10 +14,7 @@ const dropdownSearchInputStyles: ComponentSlotStylesInput< input: ({ variables: v }): ICSSInJSStyle => ({ width: '100%', backgroundColor: v.backgroundColor, - - ':focus': { - borderBottomColor: 'transparent', - }, + borderWidth: 0, }), } diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts index df3deb428b..5e9489cdff 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts @@ -10,14 +10,16 @@ const dropdownStyles: ComponentSlotStylesInput ({ @@ -25,6 +27,7 @@ const dropdownStyles: ComponentSlotStylesInput pxToRem(v)) export default (siteVars): DropdownVariables => ({ backgroundColor: siteVars.gray10, - borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, - borderBottom: `${_2px_asRem} solid transparent`, borderColorFocus: siteVars.brand, + borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, + borderWidth: `0 0 ${pxToRem(2)} 0`, color: siteVars.bodyColor, comboboxPaddingButton: `0 ${_12px_asRem}`, comboboxFlexBasis: '50px', diff --git a/packages/react/src/themes/teams/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts index 2538d447df..e9349e1e60 100644 --- a/packages/react/src/themes/teams/components/Input/inputStyles.ts +++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts @@ -15,8 +15,9 @@ const inputStyles: ComponentSlotStylesInput = { input: ({ props: p, variables: v }): ICSSInJSStyle => ({ outline: 0, boxSizing: 'border-box', - border: v.border, - borderBottom: v.borderBottom, + borderStyle: 'solid', + borderColor: 'transparent', + borderWidth: v.borderWidth, borderRadius: v.borderRadius, color: v.fontColor, backgroundColor: v.backgroundColor, diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index 361119fce4..09829bcd4f 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -2,9 +2,8 @@ import { pxToRem } from '../../../../lib' export interface InputVariables { backgroundColor: string - border: string | number - borderBottom: string borderRadius: string + borderWidth: string fontColor: string fontSize: string iconColor: string @@ -20,9 +19,8 @@ export interface InputVariables { export default (siteVars): InputVariables => ({ backgroundColor: siteVars.gray10, - border: 'none', - borderBottom: `${pxToRem(2)} solid transparent`, borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, + borderWidth: `0 0 ${pxToRem(2)} 0`, fontColor: siteVars.gray02, fontSize: siteVars.fontSizes.medium, @@ -31,10 +29,10 @@ export default (siteVars): InputVariables => ({ iconRight: pxToRem(2), iconColor: siteVars.bodyColor, iconLeft: pxToRem(6), - inputPaddingWithIconAtStart: `${pxToRem(6)} ${pxToRem(12)} ${pxToRem(6)} ${pxToRem(24)}`, - inputPaddingWithIconAtEnd: `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`, + inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`, + inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`, - inputPadding: `${pxToRem(6)} ${pxToRem(12)} ${pxToRem(6)} ${pxToRem(12)}`, + inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, inputFocusBorderBottomColor: siteVars.brand, inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, })