Skip to content

Commit

Permalink
Merge pull request #124 from eccenca/bugfix/userMenuTooltip-CMEM-5133
Browse files Browse the repository at this point in the history 
Fix user menu tooltip (CMEM-5133)
  • Loading branch information
@robertisele
robertisele authored Aug 30, 2023
2 parents cf91067 + 3cf1288 commit 2126a5f
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 34 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"@blueprintjs/select": "^4.9.14",
"@carbon/icons": "^11.19.0",
"@carbon/icons-react": "^11.19.0",
"@carbon/styles": "^1.28.0",
"@carbon/styles": "1.32.0",
"@mavrin/remark-typograf": "^2.2.0",
"carbon-components-react": "^8.28.0",
"codemirror": "^5.65.13",
Expand Down Expand Up @@ -146,6 +146,7 @@
"yargs": "^17.7.2"
},
"peerDependencies": {
"@carbon/styles": "<1.33.0",
"@types/carbon-components-react": ">=7",
"react": ">=16",
"react-dom": ">=16"
Expand Down
53 changes: 21 additions & 32 deletions src/components/Application/_toolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,83 +6,72 @@
own rule patches.
*/

@use "sass:color";

/// Header-panel background
$shell-panel-bg-01: $eccgui-color-applicationheader-background !default;

/// Panel item hover background
$shell-panel-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
$shell-panel-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;

/// Panel item focus and active background
$shell-panel-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
$shell-panel-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;

/// Panel item link selected background
$shell-panel-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: 5%) !default;
$shell-panel-bg-04: color.adjust($eccgui-color-applicationheader-background, $lightness: 5%) !default;

/// Panel border
$shell-panel-border: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
$shell-panel-border: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;

/// Header panel text
$shell-panel-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
$shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;

/// Header panel secondary text
$shell-panel-text-02: $eccgui-color-applicationheader-text !default;

/// Header panel focus border
$shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
$shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;

@import "~@carbon/styles/scss/components/ui-shell/header-panel/index";

// tweack original layout

.#{$prefix}--header-panel {
top: mini-units(8);
padding: $eccgui-size-block-whitespace;
color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
}

.#{$prefix}--header-panel--expanded {
//width: carbon--mini-units(32);
border-right-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
border-left-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
}

.#{$eccgui}-application__toolbar__panel-backdrop--onleave,
.#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
position: fixed;
top: mini-units(8);
right: 0;
bottom: 0;
left: 0;
inset: mini-units(8) 0 0 0;
}

.#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
top: 0;
}

// tweak original colors

// $shell-panel-bg-01
.#{$prefix}--header-panel {
background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
padding: $eccgui-size-block-whitespace;
}

// $shell-panel-text-01
.#{$prefix}--header-panel {
color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
}

// $shell-panel-border
.#{$prefix}--header-panel--expanded {
border-left-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
border-right-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
}

// add rules for own class identiiers

.#{$eccgui}-application__toolbar {
flex-grow: 0;
flex-basis: auto;
flex-grow: 0;

.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
// for some reason the original calculation still moves out the tooltip
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
}
}

.#{$eccgui}-application__toolbar__section {
padding: 0 mini-units(1);
display: flex;
align-items: center;
padding: 0 mini-units(1);
}
16 changes: 15 additions & 1 deletion src/components/Tooltip/tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
$eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
$eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
$eccgui-size-tooltip-width: 20em !default;

// library vars
$tooltip2-background-color: $eccgui-color-applicationheader-text; // !default;
$tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
Expand All @@ -15,8 +16,8 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
.#{$ns}-tooltip2 {
font-size: $eccgui-size-typo-tooltip;
line-height: $eccgui-size-typo-tooltip-lineheight;
white-space: normal;
overflow-wrap: break-word;
white-space: normal;
}

.#{$eccgui}-tooltip--small {
Expand All @@ -39,3 +40,16 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
text-decoration: none;
}
}

.#{$prefix}--tooltip-content {
max-width: $eccgui-size-tooltip-width;
padding: 0.25 * $eccgui-size-block-whitespace 0.5 * $eccgui-size-block-whitespace;
// align Carbon tooltips, they are used automatically by a few carbon based elements, e.g. pagination buttons
font-size: $eccgui-size-typo-tooltip;
line-height: $eccgui-size-typo-tooltip-lineheight;
overflow-wrap: break-word;
white-space: normal;

--cds-popover-background-color: #{$tooltip2-background-color};
--cds-popover-text-color: #{$tooltip2-text-color};
}
59 changes: 59 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1392,18 +1392,35 @@
resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.14.0.tgz#cdf73558dca2f63b6167a962cb26a8cae843b0e1"
integrity sha512-SkjAmmUwdLEvu/JKPOcslbx+mrvqp+ZSvBvFP/7tjv0HYC0Khs3ltjYeSiusg/KpCoSyFM+fzEJm2qdURxC1+w==

"@carbon/colors@^11.16.0", "@carbon/colors@^11.19.0":
version "11.19.0"
resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.19.0.tgz#c5f062b9e2033bb390eac7915e451d82ece0d6c3"
integrity sha512-cRDnv9GfktZo+p/t/Lsy2B3yvMbDI1Ht2ECU0rAikClQHVnOffz791Q4m2gy2STPdISnzjFSPmoRxGKLfYhLRA==

"@carbon/feature-flags@^0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.13.0.tgz#f0903233e9e38b9170bfaf2ff38fea292bb2efc3"
integrity sha512-nca4aTE8Ss5NzjjK6fxR+mM63e0hDmH3nT3zDZ2pRQ23QoJzcmhZmaWQoLGd6ONa52vAuPWcVPPg/bynN07Q9w==

"@carbon/feature-flags@^0.15.0":
version "0.15.0"
resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.15.0.tgz#108434a0bb3008bb4f2efeff9442892fe584c357"
integrity sha512-pUuJ+iQ+jkrfP4+nFgsBqM3qNsgKY59y0dZX1y2amjROFOo6fn5s/L1ZqAXkLWvmtssOiR1VWbYg1zk4IMTv+g==

"@carbon/grid@^11.13.0":
version "11.13.0"
resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.13.0.tgz#563164b4e596a789e80b5b6f7f69e117dbe6dd07"
integrity sha512-Jb2QaG22BXd1zvnXwkQMYxyF3Us1cY46pWzRYAy0dKQCJYaW3ii2kD1Z2aE8Ea3UYmg5CR13D7+shB/idtZG5g==
dependencies:
"@carbon/layout" "^11.13.0"

"@carbon/grid@^11.15.0", "@carbon/grid@^11.19.0":
version "11.19.0"
resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.19.0.tgz#a0af90b4625fd60bb9ad947b7f8360af09488e3f"
integrity sha512-Ie8C0yifTPOF58rhkeRhINJ6KPiTVbdJwPCE+aEWTpUrwGSnuqIYZ8zQBlYQtNGQX72TSfnGY0qijPmpnIwNsg==
dependencies:
"@carbon/layout" "^11.19.0"

"@carbon/icon-helpers@^10.39.0":
version "10.39.0"
resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.39.0.tgz#a1dfd75397a399892af488963ea1187c218861d5"
Expand All @@ -1428,11 +1445,21 @@
resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.13.0.tgz#ba16018727e0846c1289a79b3d7af3e3f0ea880f"
integrity sha512-MWVyk9NdWEpvfMSqEy1aBS9QA0Km3ADyEWW7D5c8r8+ZMrhPpJnmuCRMbBOkJYtZDfs4+7EuuKcacJ/kY51x7w==

"@carbon/layout@^11.15.0", "@carbon/layout@^11.19.0":
version "11.19.0"
resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.19.0.tgz#cd0f97457a91058792d13b09293281270d2b7d91"
integrity sha512-BI9ct+yVKrgL90l4nijMhj8dokXGBJu1Xtve9fz/lcveTyxxn7YvRu8mosGhCyw77KSU6vN2yRLJnQwqwqrLJQ==

"@carbon/motion@^11.10.0":
version "11.10.0"
resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.10.0.tgz#7674652557dc1fe650eb506c38e8bf722c9d0018"
integrity sha512-eKQTBvfgTI+txk4BjRTjObOnQ9/uWSRurzIQK4qXsRJZuxvyJTChw+0pKMjohfpzOOnv5E1XxyfM3MWURaGe6Q==

"@carbon/motion@^11.12.0":
version "11.15.0"
resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.15.0.tgz#a4f8239c06a3f71ac25f780b22a3338ecb203656"
integrity sha512-l7SIZMwTmv8BHPvDsQ26Y/dBLKnLGZUvD5bGcDppoUInUcKv2Dg4J0r5JONUsB2OagpBmbj/a5skcahzlaL1JQ==

"@carbon/react@^1.28.0":
version "1.28.0"
resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.28.0.tgz#b88a18fcc49e6f9259f66fe624b722215adcbc95"
Expand Down Expand Up @@ -1460,6 +1487,20 @@
wicg-inert "^3.1.1"
window-or-global "^1.0.1"

"@carbon/[email protected]":
version "1.32.0"
resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.32.0.tgz#fe7427aa535f1a5d7428aa42476f208dc830391e"
integrity sha512-oSMeLC6wwePS0KSHiw5eDg7I6cUTYK4q5GAjot5C4al60SYkaLEuoGlZgyXBNakqCyi07E+Yt81h+guiNbwt4w==
dependencies:
"@carbon/colors" "^11.16.0"
"@carbon/feature-flags" "^0.15.0"
"@carbon/grid" "^11.15.0"
"@carbon/layout" "^11.15.0"
"@carbon/motion" "^11.12.0"
"@carbon/themes" "^11.20.0"
"@carbon/type" "^11.19.0"
"@ibm/plex" "6.0.0-next.6"

"@carbon/styles@^1.28.0":
version "1.28.0"
resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.28.0.tgz#6305b601a9f680efa96bafba16943a2423f33b6e"
Expand Down Expand Up @@ -1489,6 +1530,16 @@
"@carbon/type" "^11.17.0"
color "^4.0.0"

"@carbon/themes@^11.20.0":
version "11.24.0"
resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.24.0.tgz#d7010605f8ba2d25e2c829275c722f3b094c1fe4"
integrity sha512-afVMSQ8by3yR4646UNwOmVGeyI8n0dIvehpuy4IUGQ52WXsRuveMY/F6KpATy0OadJR/C/7SZo2mqI7L8aTREA==
dependencies:
"@carbon/colors" "^11.19.0"
"@carbon/layout" "^11.19.0"
"@carbon/type" "^11.23.0"
color "^4.0.0"

"@carbon/type@^11.17.0":
version "11.17.0"
resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.17.0.tgz#e0820164547d02fcaf613a2bb000fc38aec25c06"
Expand All @@ -1497,6 +1548,14 @@
"@carbon/grid" "^11.13.0"
"@carbon/layout" "^11.13.0"

"@carbon/type@^11.19.0", "@carbon/type@^11.23.0":
version "11.23.0"
resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.23.0.tgz#144c8106e9dc1d6d6a461f91d516d867c89d340b"
integrity sha512-bp3D2q7Su03B2Re5CHt0OdNNmAbTOJaBgKgRKKdLP97F+M27y/kk9iOAFctC0pCgmQ2qSndWRTSb3zVg5TmiEw==
dependencies:
"@carbon/grid" "^11.19.0"
"@carbon/layout" "^11.19.0"

"@cnakazawa/watch@^1.0.3":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
Expand Down

0 comments on commit 2126a5f

Please sign in to comment.