From 6650c2577bd2afc616ff26a42408436bc1e4d7d9 Mon Sep 17 00:00:00 2001 From: LJKaski Date: Fri, 5 Jun 2020 11:10:18 +0300 Subject: [PATCH 1/9] Align closed languagemenu styles with design --- src/core/LanguageMenu/LanguageMenu.baseStyles.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx index bd813efd4..ec51a6dd5 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -13,16 +13,17 @@ export const baseStyles = withSuomifiTheme( &.fi-language-menu-language_button { ${element({ theme })} ${theme.typography.actionElementInnerTextBold} - padding: 5px ${theme.spacing.insetXs} 5px ${theme.spacing.insetM}; - line-height: 28px; + padding: ${theme.spacing.xs}; + line-height: 24px; background-color: ${theme.colors.whiteBase}; border: 1px solid ${theme.colors.depthBase}; border-radius: ${theme.radius.basic}; & > .fi-language-menu-language_icon { - height: 1.2em; - width: 1.2em; - transform: translateY(0.3em); - margin-left: ${theme.spacing.insetXs}; + height: 1em; + width: 1em; + transform: translateY(0.2em); + margin-left: 10px; + fill: ${theme.colors.highlightBase}; } } &.fi-language-menu-language_button_open { From b13df5180ea8f7c85ff0d3ad52130bc25f8c221e Mon Sep 17 00:00:00 2001 From: LJKaski Date: Fri, 5 Jun 2020 15:14:10 +0300 Subject: [PATCH 2/9] Adjust spacing and hover styles to match design --- src/core/LanguageMenu/LanguageMenu.baseStyles.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx index ec51a6dd5..b430621e8 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -16,7 +16,7 @@ export const baseStyles = withSuomifiTheme( padding: ${theme.spacing.xs}; line-height: 24px; background-color: ${theme.colors.whiteBase}; - border: 1px solid ${theme.colors.depthBase}; + border: 1px solid ${theme.colors.depthLight1}; border-radius: ${theme.radius.basic}; & > .fi-language-menu-language_icon { height: 1em; @@ -49,8 +49,7 @@ export const languageMenuPopoverStyles = withSuomifiTheme( position: absolute; box-sizing: content-box; margin-top: 12px; - padding: 10px 0; - border: 1px solid ${theme.colors.depthBase}; + border: 1px solid ${theme.colors.depthLight1}; border-radius: ${theme.radius.basic}; &:before, &:after { @@ -64,7 +63,7 @@ export const languageMenuPopoverStyles = withSuomifiTheme( pointer-events: none; } &:before { - border-bottom-color: ${theme.colors.depthBase}; + border-bottom-color: ${theme.colors.depthLight1}; border-width: 8px; margin-right: -8px; } @@ -92,11 +91,13 @@ export const languageMenuPopoverStyles = withSuomifiTheme( &.fi-language-menu-language_item, &[data-selected].fi-language-menu-language_item { ${theme.typography.actionElementInnerText} - padding: 6px 20px 6px 14px; - border-left: 6px solid transparent; + margin: 10px 0; + padding: 0px 20px 0px 5px; + border-left: 4px solid transparent; background-color: transparent; &.fi-language-menu-lang-item-selected { ${theme.typography.actionElementInnerTextBold}; + border-left-color: ${theme.colors.highlightBase}; } } &[data-selected].fi-language-menu-language_item { From 234f2d31ee260b5afc2aea0e9d6a036864d1e47c Mon Sep 17 00:00:00 2001 From: LJKaski Date: Fri, 5 Jun 2020 15:16:22 +0300 Subject: [PATCH 3/9] Add another language to the example to better show new hover logic --- src/core/LanguageMenu/LanguageMenu.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/LanguageMenu/LanguageMenu.md b/src/core/LanguageMenu/LanguageMenu.md index 656c3e9aa..d1725aa0d 100644 --- a/src/core/LanguageMenu/LanguageMenu.md +++ b/src/core/LanguageMenu/LanguageMenu.md @@ -13,5 +13,6 @@ import { Suomeksi (FI) På svenska (SV) + In English (EN) ; ``` From 45691d221536dc55fee4949a41c44a9c7047e3cf Mon Sep 17 00:00:00 2001 From: LJKaski Date: Mon, 8 Jun 2020 10:32:27 +0300 Subject: [PATCH 4/9] Set menu button borders to be visible only on hover and when menu is open --- src/core/LanguageMenu/LanguageMenu.baseStyles.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx index b430621e8..3961ca672 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -16,7 +16,7 @@ export const baseStyles = withSuomifiTheme( padding: ${theme.spacing.xs}; line-height: 24px; background-color: ${theme.colors.whiteBase}; - border: 1px solid ${theme.colors.depthLight1}; + border: 1px solid transparent; border-radius: ${theme.radius.basic}; & > .fi-language-menu-language_icon { height: 1em; @@ -25,8 +25,12 @@ export const baseStyles = withSuomifiTheme( margin-left: 10px; fill: ${theme.colors.highlightBase}; } + &:hover{ + border-color: ${theme.colors.depthLight1}; + } } &.fi-language-menu-language_button_open { + border-color: ${theme.colors.depthLight1}; & > .fi-language-menu-language_icon.fi-language-menu-language_icon { transform: translateY(0.2em) rotate(180deg); } From 36e439b1af29561f60ff9455c96e86cdf660eead Mon Sep 17 00:00:00 2001 From: LJKaski Date: Mon, 8 Jun 2020 10:50:38 +0300 Subject: [PATCH 5/9] Adjust popover menu border to look more uniform --- src/core/LanguageMenu/LanguageMenu.baseStyles.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx index 3961ca672..3343770f2 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -73,8 +73,8 @@ export const languageMenuPopoverStyles = withSuomifiTheme( } &:after { border-bottom-color: ${theme.colors.whiteBase}; - border-width: 7px; - margin-right: -7px; + border-width: 6.5px; + margin-right: -6.5px; } } } From 5342178a7e1629c3491cf32eba8a2d5364a455d7 Mon Sep 17 00:00:00 2001 From: LJKaski Date: Mon, 8 Jun 2020 12:37:24 +0300 Subject: [PATCH 6/9] Update snapshots --- .../__snapshots__/LanguageMenu.test.tsx.snap | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap index e094f6375..2c218ab3d 100644 --- a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap +++ b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap @@ -70,20 +70,29 @@ exports[`calling render with the same component on the same container does not r font-size: 16px; line-height: 1.5; font-weight: 600; - padding: 5px 4px 5px 8px; - line-height: 28px; + padding: 10px; + line-height: 24px; background-color: hsl(0,0%,100%); - border: 1px solid hsl(202,7%,67%); + border: 1px solid transparent; border-radius: 2px; } .c1 > [data-reach-menu-button].fi-language-menu_button.fi-language-menu-language_button > .fi-language-menu-language_icon { - height: 1.2em; - width: 1.2em; - -webkit-transform: translateY(0.3em); - -ms-transform: translateY(0.3em); - transform: translateY(0.3em); - margin-left: 4px; + height: 1em; + width: 1em; + -webkit-transform: translateY(0.2em); + -ms-transform: translateY(0.2em); + transform: translateY(0.2em); + margin-left: 10px; + fill: hsl(212,63%,45%); +} + +.c1 > [data-reach-menu-button].fi-language-menu_button.fi-language-menu-language_button:hover { + border-color: hsl(202,7%,80%); +} + +.c1 > [data-reach-menu-button].fi-language-menu_button.fi-language-menu-language_button_open { + border-color: hsl(202,7%,80%); } .c1 > [data-reach-menu-button].fi-language-menu_button.fi-language-menu-language_button_open > .fi-language-menu-language_icon.fi-language-menu-language_icon { From 11bb6393acdf6650fd832dd4de326daa37feca35 Mon Sep 17 00:00:00 2001 From: LJKaski Date: Tue, 9 Jun 2020 09:16:38 +0300 Subject: [PATCH 7/9] Use tokens where applicable and fix button vertical padding --- src/core/LanguageMenu/LanguageMenu.baseStyles.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx index 3343770f2..b3a3feebd 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -13,7 +13,7 @@ export const baseStyles = withSuomifiTheme( &.fi-language-menu-language_button { ${element({ theme })} ${theme.typography.actionElementInnerTextBold} - padding: ${theme.spacing.xs}; + padding: 9px ${theme.spacing.xs}; line-height: 24px; background-color: ${theme.colors.whiteBase}; border: 1px solid transparent; @@ -22,7 +22,7 @@ export const baseStyles = withSuomifiTheme( height: 1em; width: 1em; transform: translateY(0.2em); - margin-left: 10px; + margin-left: ${theme.spacing.xs}; fill: ${theme.colors.highlightBase}; } &:hover{ @@ -62,7 +62,7 @@ export const languageMenuPopoverStyles = withSuomifiTheme( height: 0; width: 0; bottom: 100%; - right: 20px; + right: ${theme.spacing.l}; border: solid transparent; pointer-events: none; } @@ -95,8 +95,8 @@ export const languageMenuPopoverStyles = withSuomifiTheme( &.fi-language-menu-language_item, &[data-selected].fi-language-menu-language_item { ${theme.typography.actionElementInnerText} - margin: 10px 0; - padding: 0px 20px 0px 5px; + margin: ${theme.spacing.m} 0; + padding: 0px ${theme.spacing.m} 0px ${theme.spacing.xxs}; border-left: 4px solid transparent; background-color: transparent; &.fi-language-menu-lang-item-selected { From 3a61f10f656955b787a9f6886ab55d312cf9172f Mon Sep 17 00:00:00 2001 From: LJKaski Date: Tue, 9 Jun 2020 09:25:52 +0300 Subject: [PATCH 8/9] update snapshots --- src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap index 2c218ab3d..288f5bfa0 100644 --- a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap +++ b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap @@ -70,7 +70,7 @@ exports[`calling render with the same component on the same container does not r font-size: 16px; line-height: 1.5; font-weight: 600; - padding: 10px; + padding: 9px 10px; line-height: 24px; background-color: hsl(0,0%,100%); border: 1px solid transparent; From 48a6152d9419f7a99e58ac53be145963ed101aa7 Mon Sep 17 00:00:00 2001 From: LJKaski Date: Tue, 9 Jun 2020 09:52:20 +0300 Subject: [PATCH 9/9] remove units from zero values in styles --- src/core/LanguageMenu/LanguageMenu.baseStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx index b3a3feebd..4dc13f11c 100644 --- a/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -96,7 +96,7 @@ export const languageMenuPopoverStyles = withSuomifiTheme( &[data-selected].fi-language-menu-language_item { ${theme.typography.actionElementInnerText} margin: ${theme.spacing.m} 0; - padding: 0px ${theme.spacing.m} 0px ${theme.spacing.xxs}; + padding: 0 ${theme.spacing.m} 0 ${theme.spacing.xxs}; border-left: 4px solid transparent; background-color: transparent; &.fi-language-menu-lang-item-selected {