feat: add align to tooltip #7309
Conversation
|
Deploy preview for carbon-elements ready! Built with commit ae0d27d |
|
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit ae0d27d https://deploy-preview-7309--carbon-components-react.netlify.app |
|
Deploy preview for carbon-elements ready! Built with commit 0c628f6 |
|
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 0c628f6 https://deploy-preview-7309--carbon-components-react.netlify.app |
…se/carbon-components into addAlignOptionsToTooltip
joshblack
requested review from
a team and
laurenmrice
and removed request for
a team
|
One thing to note for v11, but I've made a note in the v11 Prop Audit as well. |
Sure can @laurenmrice also adjusted left and right to align with the text.
|
There was a problem hiding this comment.
Bottom and Top directions
-start
-end
These need to have a 16px space between the edge of the shark fin and the container. Right now they still are not aligning vertically with the text.
Left and Right directions
-center
The shark fin is not showing up at the center of the container. There is not an equal amount of space above or below it right now.
|
@laurenmrice Addressed the position for start and end when above and blow. The center-left and center-right caret positions I have not changed as part of this PR. I do not know the reason they were set 9px above centre on the left and 3px below on the right. It has been like this since changes in #5304, perhaps @tw15egan could shed light on the reason for the offset. |
|
@lee-chase that offset was to get them centered in that specific PR, but if they aren't needed any more just axe em 👍 |
|
Unfortunately, I am not familiar with the floating menu code. Could that be addressed in a separate issue as this issue has not changed it? |
|
I am fine with addressing the centering problem in a separate pr 👍🏻. The position for start and end looks good now, thank you! |
Co-authored-by: Lee Chase <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Closes #3837
C&CS would like to use Tooltip as a basic overflow for tag components. However, this is problematic because overflow typically happens near the right side of the page and there is no option to align the tooltip
See https://ibm-cloud-cognitive.netlify.app/?path=/story/experimental-tagset--tag-array
NOTE: Width of the container is adjusted on the controls tab.
Changelog
M packages/components/src/components/tooltip/_tooltip.scss
M packages/react/src/components/Tooltip/Tooltip-story.js
M packages/react/src/components/Tooltip/Tooltip.js
M. packages/react/src/components/Tooltip/Tooltip-test.js
Testing / Reviewing
Ran it up in storybook.