Skip to content

Commit

Permalink
feat(Tooltip): adjust style to fit doc (#486)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JsGarneau
JsGarneau committed Aug 8, 2023
1 parent 0b073ef commit 606d0c3
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 76 deletions.
116 changes: 56 additions & 60 deletions packages/react/src/components/tooltip/tooltip.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
.c3 {
height: 1rem;
height: 1.25rem;
position: absolute;
width: 1rem;
}
Expand All @@ -27,29 +27,28 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
}
.c1 {
background-color: #FFFFFF;
border: 1px solid #60666E;
border-radius: var(--border-radius);
background-color: #60666E;
border-radius: var(--border-radius-half);
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
box-sizing: border-box;
color: #000000;
color: #FFFFFF;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 0.875rem;
font-size: 0.75rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.25rem;
margin: 0;
max-width: 327px;
min-height: 32px;
padding: var(--spacing-1x);
min-height: 24px;
padding: 1px var(--spacing-1x);
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
z-index: 1000;
Expand All @@ -65,14 +64,14 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
.c1[data-popper-placement*="bottom"] > .c2::before {
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.4rem;
border-width: 0 0.5rem 0.5rem;
position: absolute;
top: -1px;
top: -3px;
}
.c1[data-popper-placement*="bottom"] > .c2::after {
border-color: transparent transparent #FFFFFF transparent;
border-width: 0 0.5rem 0.4rem;
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.5rem;
}
.c1[data-popper-placement*="top"] > .c2 {
Expand All @@ -85,14 +84,14 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
.c1[data-popper-placement*="top"] > .c2::before {
border-color: #60666E transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0;
position: absolute;
top: 1px;
}
.c1[data-popper-placement*="top"] > .c2::after {
border-color: #FFFFFF transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-color: #60666E transparent transparent transparent;
border-width: 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2 {
Expand All @@ -104,7 +103,7 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
.c1[data-popper-placement*="right"] > .c2::before {
border-color: transparent #60666E transparent transparent;
border-width: 0.5rem 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2::after {
Expand Down Expand Up @@ -253,7 +252,7 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `

exports[`Tooltip Has default desktop styles 1`] = `
.c3 {
height: 1rem;
height: 1.25rem;
position: absolute;
width: 1rem;
}
Expand All @@ -278,26 +277,25 @@ exports[`Tooltip Has default desktop styles 1`] = `
}
.c1 {
background-color: #FFFFFF;
border: 1px solid #60666E;
border-radius: var(--border-radius);
background-color: #60666E;
border-radius: var(--border-radius-half);
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
box-sizing: border-box;
color: #000000;
color: #FFFFFF;
display: none;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 0.875rem;
font-size: 0.75rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.25rem;
margin: 0;
max-width: 327px;
min-height: 32px;
padding: var(--spacing-1x);
min-height: 24px;
padding: 1px var(--spacing-1x);
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
z-index: 1000;
Expand All @@ -313,14 +311,14 @@ exports[`Tooltip Has default desktop styles 1`] = `
.c1[data-popper-placement*="bottom"] > .c2::before {
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.4rem;
border-width: 0 0.5rem 0.5rem;
position: absolute;
top: -1px;
top: -3px;
}
.c1[data-popper-placement*="bottom"] > .c2::after {
border-color: transparent transparent #FFFFFF transparent;
border-width: 0 0.5rem 0.4rem;
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.5rem;
}
.c1[data-popper-placement*="top"] > .c2 {
Expand All @@ -333,14 +331,14 @@ exports[`Tooltip Has default desktop styles 1`] = `
.c1[data-popper-placement*="top"] > .c2::before {
border-color: #60666E transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0;
position: absolute;
top: 1px;
}
.c1[data-popper-placement*="top"] > .c2::after {
border-color: #FFFFFF transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-color: #60666E transparent transparent transparent;
border-width: 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2 {
Expand All @@ -352,7 +350,7 @@ exports[`Tooltip Has default desktop styles 1`] = `
.c1[data-popper-placement*="right"] > .c2::before {
border-color: transparent #60666E transparent transparent;
border-width: 0.5rem 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2::after {
Expand Down Expand Up @@ -500,7 +498,7 @@ exports[`Tooltip Has default desktop styles 1`] = `

exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
.c3 {
height: 1rem;
height: 1.25rem;
position: absolute;
width: 1rem;
}
Expand All @@ -525,12 +523,11 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
}
.c1 {
background-color: #FFFFFF;
border: 1px solid #60666E;
border-radius: var(--border-radius);
background-color: #60666E;
border-radius: var(--border-radius-half);
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
box-sizing: border-box;
color: #000000;
color: #FFFFFF;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -547,7 +544,7 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
margin: 0;
max-width: 327px;
min-height: 72px;
padding: var(--spacing-3x);
padding: 1px var(--spacing-3x);
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
z-index: 1000;
Expand All @@ -563,14 +560,14 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
.c1[data-popper-placement*="bottom"] > .c2::before {
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.4rem;
border-width: 0 0.5rem 0.5rem;
position: absolute;
top: -1px;
top: -3px;
}
.c1[data-popper-placement*="bottom"] > .c2::after {
border-color: transparent transparent #FFFFFF transparent;
border-width: 0 0.5rem 0.4rem;
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.5rem;
}
.c1[data-popper-placement*="top"] > .c2 {
Expand All @@ -583,14 +580,14 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
.c1[data-popper-placement*="top"] > .c2::before {
border-color: #60666E transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0;
position: absolute;
top: 1px;
}
.c1[data-popper-placement*="top"] > .c2::after {
border-color: #FFFFFF transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-color: #60666E transparent transparent transparent;
border-width: 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2 {
Expand All @@ -602,7 +599,7 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
.c1[data-popper-placement*="right"] > .c2::before {
border-color: transparent #60666E transparent transparent;
border-width: 0.5rem 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2::after {
Expand Down Expand Up @@ -751,7 +748,7 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `

exports[`Tooltip Has mobile styles 1`] = `
.c3 {
height: 1rem;
height: 1.25rem;
position: absolute;
width: 1rem;
}
Expand All @@ -776,12 +773,11 @@ exports[`Tooltip Has mobile styles 1`] = `
}
.c1 {
background-color: #FFFFFF;
border: 1px solid #60666E;
border-radius: var(--border-radius);
background-color: #60666E;
border-radius: var(--border-radius-half);
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
box-sizing: border-box;
color: #000000;
color: #FFFFFF;
display: none;
-webkit-flex-direction: column;
-ms-flex-direction: column;
Expand All @@ -795,7 +791,7 @@ exports[`Tooltip Has mobile styles 1`] = `
margin: 0;
max-width: 327px;
min-height: 72px;
padding: var(--spacing-3x);
padding: 1px var(--spacing-3x);
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
z-index: 1000;
Expand All @@ -811,14 +807,14 @@ exports[`Tooltip Has mobile styles 1`] = `
.c1[data-popper-placement*="bottom"] > .c2::before {
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.4rem;
border-width: 0 0.5rem 0.5rem;
position: absolute;
top: -1px;
top: -3px;
}
.c1[data-popper-placement*="bottom"] > .c2::after {
border-color: transparent transparent #FFFFFF transparent;
border-width: 0 0.5rem 0.4rem;
border-color: transparent transparent #60666E transparent;
border-width: 0 0.5rem 0.5rem;
}
.c1[data-popper-placement*="top"] > .c2 {
Expand All @@ -831,14 +827,14 @@ exports[`Tooltip Has mobile styles 1`] = `
.c1[data-popper-placement*="top"] > .c2::before {
border-color: #60666E transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0;
position: absolute;
top: 1px;
}
.c1[data-popper-placement*="top"] > .c2::after {
border-color: #FFFFFF transparent transparent transparent;
border-width: 0.4rem 0.5rem 0;
border-color: #60666E transparent transparent transparent;
border-width: 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2 {
Expand All @@ -850,7 +846,7 @@ exports[`Tooltip Has mobile styles 1`] = `
.c1[data-popper-placement*="right"] > .c2::before {
border-color: transparent #60666E transparent transparent;
border-width: 0.5rem 0.4rem 0.5rem 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
}
.c1[data-popper-placement*="right"] > .c2::after {
Expand Down
Loading

0 comments on commit 606d0c3

Please sign in to comment.