From 73b1720267e636a45fdad1c26fc21419d172c595 Mon Sep 17 00:00:00 2001 From: Preeti Bansal Date: Tue, 5 Nov 2024 10:57:41 +0530 Subject: [PATCH 1/5] fix: definition tooltip breaks with large text --- .../__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++ .../Tooltip/DefinitionTooltip.stories.js | 7 +++---- .../src/components/Tooltip/DefinitionTooltip.tsx | 14 +++++++++++++- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index c5430e7eacaa..a537f416225d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2900,6 +2900,9 @@ Map { ], "type": "oneOf", }, + "autoAlign": Object { + "type": "bool", + }, "children": Object { "isRequired": true, "type": "node", diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js index 21c9e3c941eb..f04d41d9b5b4 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js @@ -50,11 +50,10 @@ export const Default = () => {

Custom domains direct requests for your apps in this Cloud Foundry organization to a{' '} - - URL + + URL that you own. A custom domain can be a shared domain, {' '} - that you own. A custom domain can be a shared domain, a shared subdomain, - or a shared domain and host. + a shared subdomain, or a shared domain and host.

); }; diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx index 51182113cc08..3d5abb28ed2e 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx @@ -24,6 +24,11 @@ export interface DefinitionTooltipProps */ align?: PopoverAlignment; + /** + * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes. + */ + autoAlign?: boolean; + /** * The `children` prop will be used as the value that is being defined */ @@ -70,7 +75,8 @@ export interface DefinitionTooltipProps } const DefinitionTooltip: React.FC = ({ - align = 'bottom-start', + align = 'bottom', + autoAlign, className, children, definition, @@ -96,6 +102,7 @@ const DefinitionTooltip: React.FC = ({ { @@ -166,6 +173,11 @@ DefinitionTooltip.propTypes = { 'right-start', ]), + /** + * Will auto-align the popover. This prop is currently experimental and is subject to future changes. + */ + autoAlign: PropTypes.bool, + /** * The `children` prop will be used as the value that is being defined */ From 421aa33b66b40e54afaaadffbe56f8706451c48c Mon Sep 17 00:00:00 2001 From: Preeti Bansal Date: Tue, 5 Nov 2024 10:59:06 +0530 Subject: [PATCH 2/5] fix: definition tooltip breaks with large text --- .../react/src/components/Tooltip/DefinitionTooltip.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js index f04d41d9b5b4..99d16b1ccc7a 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js @@ -50,7 +50,7 @@ export const Default = () => {

Custom domains direct requests for your apps in this Cloud Foundry organization to a{' '} - + URL that you own. A custom domain can be a shared domain, {' '} a shared subdomain, or a shared domain and host. From 43644fb350ed53b2150a5e2ace79e3ebcee36950 Mon Sep 17 00:00:00 2001 From: Preeti Bansal Date: Tue, 5 Nov 2024 11:20:59 +0530 Subject: [PATCH 3/5] docs: added name in contributor list --- .all-contributorsrc | 7 +++++++ README.md | 50 ++++++++++++++++++++++----------------------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 2f6dcecbf405..d5ec1ab124a5 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -101,6 +101,13 @@ "profile": "https://github.com/emyarod", "contributions": ["code", "doc", "review", "a11y"] }, + { + "login": "preetibansalui", + "name": "Preeti Bansal", + "avatar_url": "https://avatars.githubusercontent.com/u/146315451?v=4", + "profile": "https://github.com/preetibansalui", + "contributions": ["code", "a11y"] + }, { "login": "erifsx", "name": "Eric Marcoux", diff --git a/README.md b/README.md index c240e1d03cfd..e7c3e3469c15 100644 --- a/README.md +++ b/README.md @@ -103,217 +103,217 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
DAK

πŸ’» πŸ“– πŸ‘€ ️️️️♿️
Josefina Mancilla

πŸ’» πŸ“– πŸ‘€ ️️️️♿️
emyarod

πŸ’» πŸ“– πŸ‘€ ️️️️♿️ -
Eric Marcoux

πŸ’» +
Preeti Bansal

πŸ’» ️️️️♿️ +
Eric Marcoux

πŸ’»
Vince Picone

πŸ’» πŸ“– πŸ‘€ ️️️️♿️
jillianhowarth

πŸ–‹ 🎨 πŸ‘€
Ricardo Henriquez

πŸ’» πŸ“– πŸ‘€ ️️️️♿️
johnbister

🎨 πŸ‘€
Dominik Brugger

πŸ’» 🚧
Jan Hassel

πŸ’» πŸ“– ️️️️♿️ 🎨 -
Alexander Lyon

πŸ’» +
Alexander Lyon

πŸ’»
Rosie Z

πŸ’»
Nishith P

πŸ“–
Eric Charpentier

πŸ’»
Luiza Mendes

πŸ’» 🚧
Akmal Hakimi Mohd Zamri

πŸ’»
sanjitbauli

πŸ“– -
Laszlo Moczo

πŸ’» +
Laszlo Moczo

πŸ’»
LMapes

πŸ–‹ πŸ“–
conradennis

🎨
Eric Liu

πŸ’» πŸ“–
Richard VΕ‘ianskΓ½

πŸ’»
Lee Chase

πŸ’» πŸ“–
Anton

πŸ’» -
Panpan Lin

πŸ“– +
Panpan Lin

πŸ“–
Ashley Harrison

πŸ’»
Jen Downs

πŸ’» πŸ“– ️️️️♿️
Abdul Rehman

πŸ’»
MIchael Dudley

🎨
David Bradshaw

πŸ’»
Simon Finney

πŸ’» ️️️️♿️ -
Attila Bartha

πŸ’» +
Attila Bartha

πŸ’»
λ°°ν•˜λžŒ

πŸ’»
Yohanna Gadelrab

πŸ“–
Akira Sudoh

πŸ’» πŸ“– ️️️️♿️ πŸš‡
Oyinkan Oyetunmibi

πŸ“–
pbenson322

πŸ“–
Abbey Hart

πŸ’» πŸ“– ️️️️♿️ -
Lucas

πŸ’» +
Lucas

πŸ’»
Dylan Klohr

πŸ“–
Gilli Sigurdsson

🎨
kennylam

πŸ’» ️️️️♿️
SΓ©bastien

πŸ’»
Dusan Milko

πŸ’»
Taras Polovyi

πŸ’» -
Chris Connors

🎨 πŸ“– +
Chris Connors

🎨 πŸ“–
David Conner

πŸ’» ️️️️♿️
Harish Mohanani

πŸ’»
Frivalszky-Mayer PΓ©ter

πŸ’» ️️️️♿️
s100

πŸ’»
Taranveer Virk

πŸ’»
Niall Cargill

πŸ“– -
Matt Chapman

πŸ’» +
Matt Chapman

πŸ’»
Boston Cartwright

πŸ’»
DavidSCChen

πŸ’»
molyholy

πŸ’»
Scott Dickerson

πŸ’»
Evgeniy Podgaetskiy

πŸ’»
CassidyJensen

πŸ’» ️️️️♿️ -
Zsolt Lattmann

πŸ’» +
Zsolt Lattmann

πŸ’»
Conrad Schmidt

πŸ’»
Ignacio Becerra

πŸ’»
Swapnil Patil

πŸ“–
Fei Z

πŸ’»
Ignas Ausiejus

πŸ“–
Ryan O. Mackey

πŸ’» -
DΓ‘vid HalΓ‘sz

πŸ’» +
DΓ‘vid HalΓ‘sz

πŸ’»
Bill Guigue

πŸ’»
szymonbrandys

πŸ’»
Adam Alston

πŸ“–
Krithika S Udupa

πŸ“–
Eshin Griffith

πŸ’»
@RianTavaresOn

πŸ’» 🎨 -
ColbyJohnIBM

πŸ’» +
ColbyJohnIBM

πŸ’»
HΓ₯kon

πŸ’» πŸ“–
Tanner Summers

πŸ’»
Zhen Wang

πŸ’» πŸ“–
Cathal Kenneally

πŸ’»
Joel Humberto GΓ³mez Paredes

πŸ’»
James Nash

πŸ’» πŸ“– -
Jakub Faliszewski

πŸ’» +
Jakub Faliszewski

πŸ’»
Nick Gong

πŸ’»
Hannele Valtanen

πŸ’»
Llam4u

πŸ’» πŸ›
G. Torres

πŸ’»
Fiona

πŸ’»
kindoflew

πŸ’» -
Mario Gueyraud

πŸ’» +
Mario Gueyraud

πŸ’»
Dongjoon Lee

πŸ’»
ShankarV-CodeJunkie

πŸ’»
dario platania

πŸ’»
Mateusz KrzyΕΌanowski

πŸ’»
jpsorensen

πŸ’»
jae kaplan

πŸš‡ -
Sierra Wetmore

πŸ’» +
Sierra Wetmore

πŸ’»
kcprevatt

πŸ’»
Marcin Lewandowski

πŸ’»
remolueoend

πŸ’»
Jesse Hull

πŸ’» ️️️️♿️
Ashvin Warrier

πŸ’»
GalvinGao

πŸ’» -
Bianca Sparxs

πŸ’» +
Bianca Sparxs

πŸ’»
Mahmoud Abdulazim

πŸ’»
Dave Steinberg

πŸ’»
Seong-Hyun Ryoo

πŸ’»
Pratik Karad

πŸ’» ️️️️♿️
Gerzon

πŸ’»
Guilherme Datilio Ribeiro

πŸ’» πŸ“– ️️️️♿️ πŸ‘€ -
Josef Kubíček

πŸ’» +
Josef Kubíček

πŸ’»
Sunny Johal

πŸ’»
Steven Black

πŸ’» ️️️️♿️
Mark Judy

πŸ’»
Anton Tsymuk

πŸ’»
Mohammed Aslam P. A.

πŸ’» πŸ“–
Tony ZL

πŸ’» -
Petr Kadlec

πŸ’» +
Petr Kadlec

πŸ’»
David Ragsdale

πŸ’»
Hao Cheng

πŸ’»
cordesmj

πŸ’»
Aziz Chebbi

πŸ’»
MichaΕ‚ Konopski

πŸ’»
Omkar Ajagunde

πŸ’» πŸ“– -
Aman Lajpal

πŸ’» πŸ“– +
Aman Lajpal

πŸ’» πŸ“–
Niraj Sah

πŸ’»
David Padilla

πŸ’»
Allison Ishida

πŸ’»
Alex Lewitt

πŸ’»
Tresau

πŸ’»
Daniel Castillo

πŸ’» -
HaRuki

πŸ’» πŸ“– +
HaRuki

πŸ’» πŸ“–
Matej Ocovsky

πŸ’»
SamChinellato

πŸ’»
stevenpatrick009

πŸ’»
HunterXalc

πŸ’»
Onur Γ–zkardeş

πŸ’»
Matias Borghi

πŸ’» -
Alexandr Ovchinnikov

πŸ’» +
Alexandr Ovchinnikov

πŸ’»
J Thomas

πŸ’»
Garrett Dawson

πŸ’» πŸ“–
Daniel Adebonojo

πŸ“–
Anjana M R

πŸ’»
Joseph Schultz

πŸ’»
anjaly0606

πŸ’» -
jesnajoseijk

πŸ’» +
jesnajoseijk

πŸ’»
Jawahar S

πŸ’»
Holly Springsteen

πŸ’»
Nikhil Tomar

πŸ’»
Anina Antony

πŸ’»
Ahmed Semih Erkan

πŸ’»
Yael Chavoya

πŸ’» πŸ“– -
Kilian Collender
πŸ’» +
Kilian Collender
πŸ’»
nandininarayanofficial

πŸ’»
Andrea DG

πŸ’»
Luis

πŸ’»
Luke Harrison

πŸ’»
Ahmed Alsinan

πŸ’»
Nevan Tan

πŸ’» -
Ali Al Dobyan

πŸ’» +
Ali Al Dobyan

πŸ’»
Adam Shea

πŸ’»
Md Nabeel Ayubee

πŸ’»
Patan Amrulla Khan

πŸ’» πŸ“–
Noah Sgorbati

πŸ’» πŸ“–
Divya G

πŸ’»
Soumya Raju

πŸ’» -
IRFAD KP

πŸ’» - +
IRFAD KP

πŸ’»
ziyadzulfikar

πŸ’»
IRFAD KP

πŸ’»
Mariat

πŸ’» From 3d0a0207dfaabc51e765a89c90d33156478ae10c Mon Sep 17 00:00:00 2001 From: Preeti Bansal Date: Wed, 15 Jan 2025 17:48:27 +0530 Subject: [PATCH 4/5] fix: added padding to arrow in case caret is not in center --- packages/react/src/components/AILabel/index.tsx | 2 +- packages/react/src/components/Popover/index.tsx | 17 ++++++++--------- .../react/src/components/Toggletip/index.tsx | 4 ++-- .../Tooltip/DefinitionTooltip.stories.js | 6 +++++- .../components/Tooltip/DefinitionTooltip.tsx | 3 ++- 5 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx index 7ce2a9af4c2a..720340eefab7 100644 --- a/packages/react/src/components/AILabel/index.tsx +++ b/packages/react/src/components/AILabel/index.tsx @@ -210,7 +210,7 @@ export const AILabel = React.forwardRef( , forwardRef: ForwardedRef @@ -267,14 +272,7 @@ export const Popover: PopoverComponent = React.forwardRef( // Middleware order matters, arrow should be last middleware: [ - offset( - !isTabTip - ? { - alignmentAxis: alignmentAxisOffset, - mainAxis: popoverDimensions?.current?.offset, - } - : 0 - ), + offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && flip({ fallbackPlacements: align.includes('bottom') @@ -313,6 +311,7 @@ export const Popover: PopoverComponent = React.forwardRef( }), arrow({ element: caretRef, + padding: arrowPadding, }), autoAlign && hide(), ], diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx index e34d07cd041d..e7930f9fa34c 100644 --- a/packages/react/src/components/Toggletip/index.tsx +++ b/packages/react/src/components/Toggletip/index.tsx @@ -225,9 +225,9 @@ Toggletip.propTypes = { ]), /** - * Provide an offset value for alignment axis. + * Will add padding value to arrow in case of bottom-left, bottom-right or top-left, top-right */ - alignmentAxisOffset: PropTypes.number, + arrowPadding: PropTypes.number, /** * Provide a custom element or component to render the top-level node for the diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js index 7cce3b090e84..4a6d5cbecd47 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js @@ -50,7 +50,11 @@ export const Default = (args) => {

Custom domains direct requests for your apps in this Cloud Foundry organization to a{' '} - + URL that you own. A custom domain can be a shared domain, {' '} a shared subdomain, or a shared domain and host. diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx index 3d5abb28ed2e..f9ea99d0c866 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx @@ -114,7 +114,8 @@ const DefinitionTooltip: React.FC = ({ onFocus={() => { setOpen(true); }} - open={isOpen}> + open={isOpen} + arrowPadding={16}>