Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Tooltip): Rich tooltip #2040

Merged
merged 17 commits into from
Apr 3, 2024
Merged

feat(Tooltip): Rich tooltip #2040

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fe7bd7c
fix(Text): make type type not mandatory
talkor Mar 28, 2024
c2a088e
feat(Tooltip): add image, icon, title
talkor Mar 28, 2024
c33ab27
fix: change hover color value
talkor Mar 28, 2024
972ada5
fix: circular dep
talkor Mar 28, 2024
f1d7beb
docs: change story
talkor Mar 31, 2024
d150d70
fix: positioning
talkor Mar 31, 2024
0806d4b
docs: fix paddings
talkor Mar 31, 2024
30a76ea
docs: fix paddings
talkor Mar 31, 2024
2bee86c
fix: positioning
talkor Mar 31, 2024
fc63564
docs: fix paddings
talkor Mar 31, 2024
a4a70c6
tets: update snapshots
talkor Mar 31, 2024
234117c
docs: fix story height
talkor Mar 31, 2024
938729e
refactor: make changes non-breaking
talkor Apr 1, 2024
f3f167b
docs: fix story
talkor Apr 1, 2024
6820c66
tets: update snapshots
talkor Apr 1, 2024
623884c
docs: adjust stories
talkor Apr 2, 2024
2ef6aed
docs: convert to ts
talkor Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 24 additions & 8 deletions ...s/core/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,13 @@ Snapshot Diff:
+ class="contentComponent top edgeCenter hasTooltip"
+ >
+ <div
+ class="tooltip dark paddingSizeUndefined"
+ class="tooltip dark"
+ >
+ 20%
+ <div
+ class="content paddingSizeUndefined"
+ >
+ 20%
+ </div>
talkor marked this conversation as resolved.
Show resolved Hide resolved
+ </div>
+ <div
+ class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -92,9 +96,13 @@ Snapshot Diff:
- class="contentComponent top edgeCenter hasTooltip"
- >
- <div
- class="tooltip dark paddingSizeUndefined"
- class="tooltip dark"
- >
- 20%
- <div
- class="content paddingSizeUndefined"
- >
- 20%
- </div>
- </div>
- <div
- class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -127,9 +135,13 @@ Snapshot Diff:
+ class="contentComponent top edgeCenter hasTooltip"
+ >
+ <div
+ class="tooltip dark paddingSizeUndefined"
+ class="tooltip dark"
+ >
+ 20%
+ <div
+ class="content paddingSizeUndefined"
+ >
+ 20%
+ </div>
+ </div>
+ <div
+ class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -162,9 +174,13 @@ Snapshot Diff:
- class="contentComponent top edgeCenter hasTooltip expandAppear expandAppearActive"
- >
- <div
- class="tooltip dark paddingSizeUndefined"
- class="tooltip dark"
- >
- 20%
- <div
- class="content paddingSizeUndefined"
- >
- 20%
- </div>
- </div>
- <div
- class="arrow arrow dark paddingSizeUndefined"
Expand Down
52 changes: 36 additions & 16 deletions packages/core/src/components/Slider/__tests__/__snapshots__/slider-ranged-tests.jest.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,13 @@ Snapshot Diff:
+ class="contentComponent top edgeCenter hasTooltip"
+ >
+ <div
+ class="tooltip dark paddingSizeUndefined"
+ class="tooltip dark"
+ >
+ 25%
+ <div
+ class="content paddingSizeUndefined"
+ >
+ 25%
+ </div>
+ </div>
+ <div
+ class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -103,9 +107,13 @@ Snapshot Diff:
+ class="contentComponent top edgeCenter hasTooltip"
+ >
+ <div
+ class="tooltip dark paddingSizeUndefined"
+ class="tooltip dark"
+ >
+ 65%
+ <div
+ class="content paddingSizeUndefined"
+ >
+ 65%
+ </div>
+ </div>
+ <div
+ class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -138,9 +146,13 @@ Snapshot Diff:
- class="contentComponent top edgeCenter hasTooltip"
- >
- <div
- class="tooltip dark paddingSizeUndefined"
- class="tooltip dark"
- >
- 25%
- <div
- class="content paddingSizeUndefined"
- >
- 25%
- </div>
- </div>
- <div
- class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -173,9 +185,13 @@ Snapshot Diff:
+ class="contentComponent top edgeCenter hasTooltip"
+ >
+ <div
+ class="tooltip dark paddingSizeUndefined"
+ class="tooltip dark"
+ >
+ 25%
+ <div
+ class="content paddingSizeUndefined"
+ >
+ 25%
+ </div>
+ </div>
+ <div
+ class="arrow arrow dark paddingSizeUndefined"
Expand Down Expand Up @@ -219,14 +235,14 @@ Snapshot Diff:
/>
<span
@@ --- --- @@
<div
class="tooltip dark paddingSizeUndefined"
>
- 25%
+ 65%
<div
class="content paddingSizeUndefined"
>
- 25%
+ 65%
</div>
</div>
<div
class="arrow arrow dark paddingSizeUndefined"
@@ --- --- @@
/>
</div>
Expand Down Expand Up @@ -283,9 +299,13 @@ Snapshot Diff:
- class="contentComponent top edgeCenter hasTooltip expandAppear expandAppearActive"
- >
- <div
- class="tooltip dark paddingSizeUndefined"
- class="tooltip dark"
- >
- 65%
- <div
- class="content paddingSizeUndefined"
- >
- 65%
- </div>
- </div>
- <div
- class="arrow arrow dark paddingSizeUndefined"
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { withStaticProps } from "../../types";
import styles from "./Text.module.scss";

export interface TextProps extends TypographyProps {
type: TextType;
type?: TextType;
talkor marked this conversation as resolved.
Show resolved Hide resolved
weight?: TextWeight;
children: ReactNode;
}
Expand Down
23 changes: 13 additions & 10 deletions packages/core/src/components/Tipseen/__stories__/tipseen.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ Wrap your custom media with `TipseenMedia` component. This use case is good for
Use Floating Tipseen in case where the guidance is not relevant to a specific UI element, but general.
In this case, the Tipseen position will be the right corner of the screen and without an arrow tip.

<Canvas of={TipseenStories.FloatingTipseen} height={"500px"} />
<Canvas of={TipseenStories.FloatingTipseen} story={{ height: "500px" }} />
talkor marked this conversation as resolved.
Show resolved Hide resolved

## Do’s and Don’ts

Expand All @@ -96,7 +96,9 @@ In this case, the Tipseen position will be the right corner of the screen and wi
modifiers={modifiers}
position={Tipseen.positions.RIGHT}
color={Tipseen.colors.INVERTED}
content={<TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />}
content={
<TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />
}
>
<div className="monday-storybook-tipseen_inline-container right" />{" "}
</Tipseen>
Expand All @@ -118,8 +120,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
</Tipseen>
</div>
),
description:
"Don’t finish the Tipseen wizard process with a disabled CTA."
description: "Don’t finish the Tipseen wizard process with a disabled CTA."
}
},
{
Expand Down Expand Up @@ -157,7 +158,11 @@ In this case, the Tipseen position will be the right corner of the screen and wi
modifiers={modifiers}
position={Tipseen.positions.TOP}
color={Tipseen.colors.INVERTED}
content={<TipseenContent>You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.</TipseenContent>}
content={
<TipseenContent>
You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.
</TipseenContent>
}
>
<div className="monday-storybook-tipseen_inline-container" />
</Tipseen>
Expand All @@ -172,7 +177,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
)
}
},
{
{
positive: {
component: (
<div className="monday-storybook-tipseen_box">
Expand All @@ -189,8 +194,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
</Tipseen>
</div>
),
description:
"Add a pointer to indicate the specific component that the tipseen comes from."
description: "Add a pointer to indicate the specific component that the tipseen comes from."
},
negative: {
component: (
Expand All @@ -209,8 +213,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
</Tipseen>
</div>
),
description:
"Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
description: "Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
}
}
]}
Expand Down
7 changes: 1 addition & 6 deletions packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
height: 400px;
}

&_image {
width: 320px;
height: 175px;
}

&_inline-container {
width: 300px;
height: 20px;
Expand Down Expand Up @@ -69,7 +64,7 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
height: 100%;
display: flex;
flex-direction: column;
justify-content: center
justify-content: center;
}

&_small-box {
Expand Down
Loading