Skip to content

Commit

Permalink
Merge pull request #408 from vrk-kpa/fix/languagemenu-text-wrapping
Browse files Browse the repository at this point in the history
[Fix] LanguageMenu text wrapping
  • Loading branch information
ketsappi authored Nov 12, 2020
2 parents b60fb03 + 8916708 commit f54388e
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 2 deletions.
7 changes: 5 additions & 2 deletions src/core/LanguageMenu/LanguageMenu.baseStyles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@ export const baseStyles = withSuomifiTheme(
&.fi-language-menu-language_button {
${element({ theme })}
${theme.typography.actionElementInnerTextBold}
padding: 9px ${theme.spacing.xs};
padding: 9px ${theme.spacing.xs};
line-height: 24px;
background-color: ${theme.colors.whiteBase};
border: 1px solid transparent;
border-radius: ${theme.radius.basic};
word-break: break-word;
& > .fi-language-menu-language_icon {
height: 1em;
width: 1em;
Expand Down Expand Up @@ -92,12 +93,14 @@ export const languageMenuPopoverStyles = withSuomifiTheme(
& [data-reach-menu-items] {
border: 0;
padding: 0;
white-space: normal;
}
& [data-reach-menu-item].fi-language-menu_item {
${element({ theme })}
${theme.typography.bodyText}
&[data-selected] {
word-break: break-word;
&[data-selected] {
${theme.typography.bodyText}
color: ${theme.colors.blackBase};
background-color: ${theme.colors.highlightLight3};
Expand Down
5 changes: 5 additions & 0 deletions src/core/LanguageMenu/LanguageMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ const LanguageMenuPopoverPosition = (
left: `${targetRect.left - popoverRect.width + targetRect.width}px`,
// eslint-disable-next-line no-undef
top: `${targetRect.top + targetRect.height + window.pageYOffset}px`,
maxWidth: `${Math.max(
targetRect.width,
targetRect.width + targetRect.left - 30,
)}px`,
minWidth: `${targetRect.width - 2}px`,
};
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ exports[`calling render with the same component on the same container does not r
background-color: hsl(0,0%,100%);
border: 1px solid transparent;
border-radius: 2px;
word-break: break-word;
}
.c1 > [data-reach-menu-button].fi-language-menu_button.fi-language-menu-language_button > .fi-language-menu-language_icon {
Expand Down

0 comments on commit f54388e

Please sign in to comment.