From 2f7cf3efac165bbe39a1d8ac817881db4524b079 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 27 Aug 2021 03:48:24 +0000 Subject: [PATCH] fix(devui): better Select styles to match other components (#787) * feat(extension): add back buttons for opening new windows * Change import * stash * stash --- packages/devui/src/Select/Select.tsx | 10 ++- .../tests/__snapshots__/Select.test.tsx.snap | 72 ++++++++++--------- 2 files changed, 45 insertions(+), 37 deletions(-) diff --git a/packages/devui/src/Select/Select.tsx b/packages/devui/src/Select/Select.tsx index ff5b12b5..00b6e399 100644 --- a/packages/devui/src/Select/Select.tsx +++ b/packages/devui/src/Select/Select.tsx @@ -27,7 +27,7 @@ export class Select< {...this.props} theme={(theme) => ({ ...theme, - borderRadius: this.props.theme.inputBorderRadius, + borderRadius: 0, colors: { ...theme.colors, @@ -60,9 +60,15 @@ export class Select< }), control: (base, props) => ({ ...base, - backgroundColor: props.isDisabled + backgroundColor: props.isFocused ? props.theme.colors.neutral10 : props.theme.colors.neutral5, + borderColor: props.theme.colors.neutral10, + + '&:hover': { + backgroundColor: props.theme.colors.neutral10, + borderColor: props.theme.colors.neutral10, + }, }), }} /> diff --git a/packages/devui/tests/__snapshots__/Select.test.tsx.snap b/packages/devui/tests/__snapshots__/Select.test.tsx.snap index e8ba9f68..ad8db8fc 100644 --- a/packages/devui/tests/__snapshots__/Select.test.tsx.snap +++ b/packages/devui/tests/__snapshots__/Select.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Select renders correctly 1`] = ` class=" css-butsr4-container" >
One
@@ -794,7 +795,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -924,7 +925,7 @@ exports[`Select should select another option 1`] = ` tabIndex="0" theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -1154,7 +1155,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -1292,7 +1293,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -1441,7 +1442,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -1637,7 +1638,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -1770,7 +1771,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -1805,7 +1806,7 @@ exports[`Select should select another option 1`] = ` css={ Object { "backgroundColor": undefined, - "borderRadius": 4, + "borderRadius": 0, "boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)", "boxSizing": "border-box", "label": "menu", @@ -1821,7 +1822,7 @@ exports[`Select should select another option 1`] = ` onMouseMove={[Function]} >
@@ -1925,7 +1926,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -2084,7 +2085,7 @@ exports[`Select should select another option 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -2439,7 +2440,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -2588,7 +2589,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -2623,12 +2624,13 @@ exports[`Select shouldn't find any results 1`] = ` css={ Object { "&:hover": Object { + "backgroundColor": undefined, "borderColor": undefined, }, "alignItems": "center", "backgroundColor": undefined, "borderColor": undefined, - "borderRadius": 4, + "borderRadius": 0, "borderStyle": "solid", "borderWidth": 1, "boxShadow": null, @@ -2648,7 +2650,7 @@ exports[`Select shouldn't find any results 1`] = ` onTouchEnd={[Function]} >
@@ -2744,7 +2746,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -2874,7 +2876,7 @@ exports[`Select shouldn't find any results 1`] = ` tabIndex="0" theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -3104,7 +3106,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -3242,7 +3244,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -3391,7 +3393,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -3587,7 +3589,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -3720,7 +3722,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -3755,7 +3757,7 @@ exports[`Select shouldn't find any results 1`] = ` css={ Object { "backgroundColor": undefined, - "borderRadius": 4, + "borderRadius": 0, "boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)", "boxSizing": "border-box", "label": "menu", @@ -3771,7 +3773,7 @@ exports[`Select shouldn't find any results 1`] = ` onMouseMove={[Function]} >
@@ -3875,7 +3877,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined, @@ -4013,7 +4015,7 @@ exports[`Select shouldn't find any results 1`] = ` setValue={[Function]} theme={ Object { - "borderRadius": 4, + "borderRadius": 0, "colors": Object { "danger": undefined, "dangerLight": undefined,