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

Jump to bottom

refactor: tooltips using CSS solution to JS solution #639

Merged
merged 64 commits into from Nov 30, 2021
Merged

refactor: tooltips using CSS solution to JS solution #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
64 commits
Select commit Hold shift + click to select a range
f7d0dab
build(shared): tooltip library with lazy loading
sshanzel Oct 6, 2021
9fa8872
feat: LazyTooltip with animation and base design
sshanzel Oct 7, 2021
92a9c14
refactor(shared): button component to accommodate forwardedRef
sshanzel Oct 7, 2021
6ec95fd
refactor(shared): lazytooltip default placement
sshanzel Oct 7, 2021
20cd1b4
fix(shared): tooltip right placement out animation
sshanzel Oct 7, 2021
a3b7dfc
refact(shared): forwardRef for buttons as default
sshanzel Oct 7, 2021
df2588a
refactor(shared): migrate all existing tooltip implementations using …
sshanzel Oct 7, 2021
10965c4
fix(shared): button support for both forwarded and non-forwarded impl…
sshanzel Oct 8, 2021
618ba35
refactor(shared): tooltip accessibility support
sshanzel Oct 8, 2021
488d430
fix(shared): tooltip usage of forwardedRef
sshanzel Oct 8, 2021
7aa0ab9
refactor(shared): tootlip using dynamicParent
sshanzel Oct 8, 2021
9d84bc7
refactor(shared): usage of lazy tooltip with dynamic parent
sshanzel Oct 8, 2021
75c1bb5
Revert "refactor(shared): migrate all existing tooltip implementation…
sshanzel Oct 11, 2021
3d417a9
revert: ForwardedButton implementations
sshanzel Oct 11, 2021
a38f34a
feat: sample usage of tooltip
sshanzel Oct 12, 2021
e174e16
Merge branch 'master' of github.com:dailydotdev/apps into DD-229-refa…
sshanzel Nov 18, 2021
bc4d2ba
fix: allowed tags
sshanzel Nov 19, 2021
03be114
refactor: avoid loading tooltip on touch devices
sshanzel Nov 22, 2021
a4a7dfd
revert: changes on utilizing tooltip
sshanzel Nov 22, 2021
4959781
refactor: primary components for tooltip
sshanzel Nov 23, 2021
64fa9df
fix: components not using forward ref
sshanzel Nov 23, 2021
b81e8ec
refactor: forward ref
sshanzel Nov 23, 2021
bb372a4
fix: build issues
sshanzel Nov 23, 2021
cf97262
wip: sample failing tests on implementation
sshanzel Nov 23, 2021
081960d
refactor: button properties
sshanzel Nov 24, 2021
52c0b73
fix: disabling of tooltip on test env
sshanzel Nov 24, 2021
42fa76c
fix: usage of dynamic tooltip
sshanzel Nov 24, 2021
7c64bd4
refactor: tooltip component less code
sshanzel Nov 24, 2021
4a8db7e
refactor: webapp css tooltip to js
sshanzel Nov 24, 2021
7915055
refactor: extension css tooltip to js
sshanzel Nov 24, 2021
1254a80
fix: propert placement
sshanzel Nov 24, 2021
6173283
refactor: clickable text as forwarded ref
sshanzel Nov 24, 2021
aa6394f
refactor: unnecessary prop
sshanzel Nov 24, 2021
ba22ec4
refactor: should load tooltip as function
sshanzel Nov 24, 2021
c36c690
refactor: complete transition to js tooltip
sshanzel Nov 24, 2021
a2d4411
fix: comment tooltip placement
sshanzel Nov 24, 2021
2e2af96
Merge branch 'master' into DD-229-refactor-tooltips
sshanzel Nov 24, 2021
e0587af
refactor: unnecessary changes
sshanzel Nov 24, 2021
de4cfb5
refactor: unnecessary changes
sshanzel Nov 24, 2021
c6bf1a7
refactor: unnecessary changes
sshanzel Nov 24, 2021
0a96ddf
refactor: unnecessary changes
sshanzel Nov 24, 2021
0d8d764
refactor: unnecessary changes
sshanzel Nov 24, 2021
fc2d13d
refactor: test env variable
sshanzel Nov 24, 2021
c9fe179
ci: test env
sshanzel Nov 24, 2021
6fd37a3
fix: unnecessary ref
sshanzel Nov 25, 2021
b21e683
refactor: unused default export
sshanzel Nov 25, 2021
8d45085
refactor: proper tooltip name
sshanzel Nov 25, 2021
2f3154b
feat: next link with tooltip
sshanzel Nov 25, 2021
659426f
refactor: tooltips using ref
sshanzel Nov 25, 2021
e1ac00f
refactor: conditional tooltip on tooltip itself
sshanzel Nov 25, 2021
0a6515e
refactor: unnecessary env variable
sshanzel Nov 25, 2021
056eaf5
fix: build issue
sshanzel Nov 25, 2021
200f091
fix: build issue
sshanzel Nov 25, 2021
b741621
refactor: translate3d utilization
sshanzel Nov 25, 2021
d52a0a0
refactor: will-change property on tooltip
sshanzel Nov 25, 2021
4a02314
fix: ref bug on multiple pass
sshanzel Nov 25, 2021
93abdd1
Merge branch 'master' into DD-229-refactor-tooltips
sshanzel Nov 25, 2021
b2634f9
refactor: encapsulate tooltips
sshanzel Nov 25, 2021
5a41eff
refactor: unnecessary dynamic loading
sshanzel Nov 26, 2021
a9b6571
refactor: type name
sshanzel Nov 26, 2021
8f053bd
refactor: export link with tooltip
sshanzel Nov 26, 2021
126df7e
fix: left option placement
sshanzel Nov 30, 2021
c51d08c
Merge branch 'master' into DD-229-refactor-tooltips
sshanzel Nov 30, 2021
5514b38
Merge branch 'master' into DD-229-refactor-tooltips
sshanzel Nov 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 9 additions & 8 deletions packages/extension/src/newtab/MainFeedPage.tsx
View file
Open in desktop
Expand Up @@ -10,9 +10,9 @@ import MainFeedLayout, {
import FeedLayout from '@dailydotdev/shared/src/components/FeedLayout';
import dynamic from 'next/dynamic';
import TimerIcon from '@dailydotdev/shared/icons/timer.svg';
import { getTooltipProps } from '@dailydotdev/shared/src/lib/tooltip';
import OnboardingContext from '@dailydotdev/shared/src/contexts/OnboardingContext';
import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
import SimpleTooltip from '@dailydotdev/shared/src/components/tooltips/SimpleTooltip';
import MostVisitedSites from './MostVisitedSites';

const PostsSearch = dynamic(
Expand Down Expand Up @@ -76,13 +76,14 @@ export default function MainFeedPage({
additionalButtons={
<>
{(onboardingStep > 2 || user) && (
<HeaderButton
icon={<TimerIcon />}
{...getTooltipProps('Do Not Disturb', { position: 'down' })}
className="btn-tertiary"
onClick={() => setShowDnd(true)}
pressed={showDnd}
/>
<SimpleTooltip content="Do Not Disturb" placement="bottom">
<HeaderButton
icon={<TimerIcon />}
className="btn-tertiary"
onClick={() => setShowDnd(true)}
pressed={showDnd}
/>
</SimpleTooltip>
)}
</>
}
Expand Down
21 changes: 21 additions & 0 deletions packages/shared/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/shared/package.json
View file
Open in desktop
Expand Up @@ -104,6 +104,7 @@
},
"dependencies": {
"@tailwindcss/line-clamp": "^0.2.2",
"@tippyjs/react": "^4.2.5",
"amplitude-js": "^8.9.1",
"balloon-css": "^1.2.0",
"flagsmith": "^1.6.10",
Expand Down
55 changes: 28 additions & 27 deletions packages/shared/src/components/MainLayout.tsx
View file
Open in desktop
Expand Up @@ -13,14 +13,15 @@ import classed from '../lib/classed';
import { Button } from './buttons/Button';
import ProgressiveEnhancementContext from '../contexts/ProgressiveEnhancementContext';
import AuthContext from '../contexts/AuthContext';
import { getTooltipProps } from '../lib/tooltip';
import PromotionalBanner from './PromotionalBanner';
import Logo from '../svg/Logo';
import LogoText from '../svg/LogoText';
import BookmarkIcon from '../../icons/bookmark.svg';
import styles from './MainLayout.module.css';
import LayoutIcon from '../../icons/layout.svg';
import ProfileButton from './profile/ProfileButton';
import { SimpleTooltip } from './tooltips/SimpleTooltip';
import { LinkWithTooltip } from './tooltips/LinkWithTooltip';

export interface MainLayoutProps extends HTMLAttributes<HTMLDivElement> {
showOnlyLogo?: boolean;
Expand Down Expand Up @@ -68,13 +69,14 @@ export default function MainLayout({
<>
{additionalButtons}
{mainPage && (
<HeaderButton
icon={<LayoutIcon />}
{...getTooltipProps('Settings', { position: 'down' })}
className="btn-tertiary"
onClick={() => setShowSettings(!showSettings)}
pressed={showSettings}
/>
<SimpleTooltip placement="bottom" content="Settings">
<HeaderButton
icon={<LayoutIcon />}
className="btn-tertiary"
onClick={() => setShowSettings(!showSettings)}
pressed={showSettings}
/>
</SimpleTooltip>
)}
</>
);
Expand All @@ -91,17 +93,14 @@ export default function MainLayout({
: 'non-responsive-header'
}`}
>
<Link
<LinkWithTooltip
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just throwing this one out here:
Is there no way to have the SimpleTooltip determine if the direct child is a <Link> and then do something else?

Think it would be super cool if we could just have 1 sole component for the tooltip usage.

If it's not possible, this seems like a good first step!

Copy link
Member Author

@sshanzel sshanzel Nov 26, 2021 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the review! 🚢

That's a cool idea. Though the part where it got me separating the two is the way we will be handling the trigger element itself. The other one, we will be wrapping the children, and the other one will be utilizing the ref of the actual element since next/link has problems with accepting custom components.

Combining them in a single component might provide quite a bit of complexity (as having multiple conditions whether to apply a ref or not). To keep things simple and easier to understand for each scenario, I had separated them.

href={process.env.NEXT_PUBLIC_WEBAPP_URL}
passHref
prefetch={false}
tooltip={{ placement: 'right', content: 'Home' }}
>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
<a
className="flex items-center"
onClick={onLogoClick}
{...getTooltipProps('Home', { position: 'right' })}
>
<a className="flex items-center" onClick={onLogoClick}>
<Logo className={styles.homeSvg} />
<CSSTransition
in={!showGreeting}
Expand All @@ -117,7 +116,7 @@ export default function MainLayout({
/>
</CSSTransition>
</a>
</Link>
</LinkWithTooltip>
{windowLoaded && greeting && (
<Greeting
user={user}
Expand All @@ -135,24 +134,26 @@ export default function MainLayout({
passHref
prefetch={false}
>
<HeaderButton
tag="a"
icon={<BookmarkIcon />}
{...getTooltipProps('Bookmarks', { position: 'down' })}
className="btn-tertiary"
/>
<SimpleTooltip placement="bottom" content="Bookmarks">
<HeaderButton
tag="a"
icon={<BookmarkIcon />}
className="btn-tertiary"
/>
</SimpleTooltip>
</Link>
{afterBookmarkButtons}
<ProfileButton onShowDndClick={onShowDndClick} />
</>
) : (
<>
<HeaderButton
icon={<BookmarkIcon />}
{...getTooltipProps('Bookmarks', { position: 'down' })}
onClick={() => showLogin('bookmark')}
className="btn-tertiary"
/>
<SimpleTooltip placement="bottom" content="Bookmarks">
<HeaderButton
icon={<BookmarkIcon />}
onClick={() => showLogin('bookmark')}
className="btn-tertiary"
/>
</SimpleTooltip>
{afterBookmarkButtons}
<Button
onClick={() => showLogin('main button')}
Expand Down
88 changes: 46 additions & 42 deletions packages/shared/src/components/ShareBar.tsx
View file
Open in desktop
Expand Up @@ -13,11 +13,11 @@ import {
getWhatsappShareLink,
} from '../lib/share';
import { Button, ButtonProps } from './buttons/Button';
import { getTooltipProps } from '../lib/tooltip';
import styles from './ShareBar.module.css';
import classed from '../lib/classed';
import AnalyticsContext from '../contexts/AnalyticsContext';
import { postAnalyticsEvent } from '../lib/feed';
import { SimpleTooltip } from './tooltips/SimpleTooltip';

const ShareButton = classed(Button, 'my-1');
const ColorfulShareButton = classed(
Expand Down Expand Up @@ -52,47 +52,51 @@ export default function ShareBar({ post }: { post: Post }): ReactElement {
Copied!
</div>
)}
<ShareButton
onClick={copyLink}
pressed={copying}
icon={<CopyIcon />}
buttonSize="small"
className="btn-tertiary-avocado"
{...getTooltipProps('Copy link')}
/>
<ColorfulShareButton
tag="a"
href={getWhatsappShareLink(href)}
target="_blank"
rel="noopener"
onClick={() => onClick('whatsapp')}
icon={<WhatsappIcon />}
buttonSize="small"
className="btn-tertiary"
{...getTooltipProps('Share on WhatsApp')}
/>
<ColorfulShareButton
tag="a"
href={getTwitterShareLink(href, post.title)}
target="_blank"
rel="noopener"
onClick={() => onClick('twitter')}
icon={<TwitterIcon />}
buttonSize="small"
className="btn-tertiary"
{...getTooltipProps('Share on Twitter')}
/>
<ColorfulShareButton
tag="a"
href={getFacebookShareLink(href)}
target="_blank"
rel="noopener"
onClick={() => onClick('facebook')}
icon={<FacebookIcon />}
buttonSize="small"
className="btn-tertiary"
{...getTooltipProps('Share on Facebook')}
/>
<SimpleTooltip content="Copy link">
<ShareButton
onClick={copyLink}
pressed={copying}
icon={<CopyIcon />}
buttonSize="small"
className="btn-tertiary-avocado"
/>
</SimpleTooltip>
<SimpleTooltip content="Share on WhatsApp">
<ColorfulShareButton
tag="a"
href={getWhatsappShareLink(href)}
target="_blank"
rel="noopener"
onClick={() => onClick('whatsapp')}
icon={<WhatsappIcon />}
buttonSize="small"
className="btn-tertiary"
/>
</SimpleTooltip>
<SimpleTooltip content="Share on Twitter">
<ColorfulShareButton
tag="a"
href={getTwitterShareLink(href, post.title)}
target="_blank"
rel="noopener"
onClick={() => onClick('twitter')}
icon={<TwitterIcon />}
buttonSize="small"
className="btn-tertiary"
/>
</SimpleTooltip>
<SimpleTooltip content="Share on Facebook">
<ColorfulShareButton
tag="a"
href={getFacebookShareLink(href)}
target="_blank"
rel="noopener"
onClick={() => onClick('facebook')}
icon={<FacebookIcon />}
buttonSize="small"
className="btn-tertiary"
/>
</SimpleTooltip>
</div>
</div>
);
Expand Down
82 changes: 42 additions & 40 deletions packages/shared/src/components/ShareNewCommentPopup.tsx
View file
Open in desktop
Expand Up @@ -14,13 +14,12 @@ import {
} from '../lib/share';
import { Post } from '../graphql/posts';
import { useCopyPostLink } from '../hooks/useCopyPostLink';
import { Button, ButtonProps } from './buttons/Button';
import { Button } from './buttons/Button';
import { ModalCloseButton } from './modals/ModalCloseButton';
import { getTooltipProps } from '../lib/tooltip';
import classed from '../lib/classed';
import { SimpleTooltip } from './tooltips/SimpleTooltip';

const ShareButton = classed<ButtonProps<'a'>>(Button, 'text-white');

const ShareButton = classed(Button, 'text-white');
interface ShareNewCommentPopupProps {
onRequestClose: () => void;
post: Post;
Expand Down Expand Up @@ -56,42 +55,45 @@ export default function ShareNewCommentPopup({
Give it a try!
</div>
<div className="grid grid-cols-2 gap-4">
<ShareButton
tag="a"
href={getTwitterShareLink(href, post.title)}
target="_blank"
rel="noopener"
icon={<TwitterIcon />}
className="btn-primary-twitter"
buttonSize="small"
{...getTooltipProps('Share on Twitter')}
>
Twitter
</ShareButton>
<ShareButton
tag="a"
href={getWhatsappShareLink(href)}
target="_blank"
rel="noopener"
icon={<WhatsappIcon />}
className="btn-primary-whatsapp"
buttonSize="small"
{...getTooltipProps('Share on WhatsApp')}
>
Whatsapp
</ShareButton>
<ShareButton
tag="a"
href={getFacebookShareLink(href)}
target="_blank"
rel="noopener"
icon={<FacebookIcon />}
className="btn-primary-facebook"
buttonSize="small"
{...getTooltipProps('Share on Facebook')}
>
Facebook
</ShareButton>
<SimpleTooltip content="Share on Twitter">
<ShareButton
tag="a"
href={getTwitterShareLink(href, post.title)}
target="_blank"
rel="noopener"
icon={<TwitterIcon />}
className="btn-primary-twitter"
buttonSize="small"
>
Twitter
</ShareButton>
</SimpleTooltip>
<SimpleTooltip content="Share on WhatsApp">
<ShareButton
tag="a"
href={getWhatsappShareLink(href)}
target="_blank"
rel="noopener"
icon={<WhatsappIcon />}
className="btn-primary-whatsapp"
buttonSize="small"
>
Whatsapp
</ShareButton>
</SimpleTooltip>
<SimpleTooltip content="Share on Facebook">
<ShareButton
tag="a"
href={getFacebookShareLink(href)}
target="_blank"
rel="noopener"
icon={<FacebookIcon />}
className="btn-primary-facebook"
buttonSize="small"
>
Facebook
</ShareButton>
</SimpleTooltip>
<Button
className="btn-primary"
buttonSize="small"
Expand Down