Skip to content

added exit button in the tour #2125

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added exit button in the tour #2125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions src/packages/tour/classNames.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,4 @@ export const activeClassName = "active";
export const fixedTooltipClassName = "introjs-fixedTooltip";
export const floatingElementClassName = "introjsFloatingElement";
export const showElementClassName = "introjs-showElement";
export const exitButtonClassName = "introjs-exitButton";
6 changes: 6 additions & 0 deletions src/packages/tour/components/TourRoot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,12 @@ export const TourRoot = ({ tour }: TourRootProps) => {

await tour.exit();
},

exitLabel: tour.getOption("exitLabel"),
onExitClick: () => {
tour.callback("complete")?.call(tour, tour.getCurrentStep(), "exit");
tour.exit();
},
buttonClass: tour.getOption("buttonClass"),
nextToDone: tour.getOption("nextToDone"),
doneLabel: tour.getOption("doneLabel"),
Expand Down
43 changes: 41 additions & 2 deletions src/packages/tour/components/TourTooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
helperNumberLayerClassName,
hiddenButtonClassName,
nextButtonClassName,
exitButtonClassName,
previousButtonClassName,
progressBarClassName,
progressClassName,
Expand Down Expand Up @@ -217,6 +218,25 @@ const NextButton = ({
return nextButton;
};

const ExitButton = ({
Copy link
Contributor

Choose a reason for hiding this comment

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

The cross (X) button in the header already provides the functionality to exit the tour. Could you please help me understand why we need a separate button for this?

From the UX point of view, adding more buttons to the footer of the dialog is not needed given that the X button already provides the same functionality.

I'm still happy to provide a way for users to customise the dialog though. That way, you can add/remove buttons to the dialog in your application when constructing the Intro.js Tour. This might require a bit of work on our side but then allows users to have fully customisable dialogs.

label,
onClick,
buttonClass,
}: {
label: string;
onClick: (e: any) => void;
buttonClass: string;
}) => {
return Button({
label,
onClick,
className: () => {
return [buttonClass, exitButtonClassName].filter(Boolean).join(" ");
},
});
};


const PrevButton = ({
label,
steps,
Expand Down Expand Up @@ -279,6 +299,9 @@ const Buttons = ({
nextLabel,
onNextClick,

exitLabel,
onExitClick,

hidePrev,
prevLabel,
onPrevClick,
Expand All @@ -295,12 +318,21 @@ const Buttons = ({
nextLabel: string;
onNextClick: (e: any) => void;

exitLabel: string;
onExitClick: (e: any) => void;


hidePrev: boolean;
prevLabel: string;
onPrevClick: (e: any) => void;
}) => {
return div(
{ className: tooltipButtonsClassName },
{ className: tooltipButtonsClassName },[
ExitButton({
label: exitLabel,
onClick: onExitClick,
buttonClass,
}),
steps.length > 1
? PrevButton({
label: prevLabel,
Expand All @@ -323,7 +355,7 @@ const Buttons = ({
nextToDone,
buttonClass,
})
);
]);
};

export const Header = ({
Expand Down Expand Up @@ -392,6 +424,8 @@ export type TourTooltipProps = Omit<
onNextClick: (e: any) => void;
prevLabel: string;
onPrevClick: (e: any) => void;
exitLabel: string;
onExitClick: (e: any) => void;
skipLabel: string;
onSkipClick: (e: any) => void;
buttonClass: string;
Expand Down Expand Up @@ -436,6 +470,8 @@ export const TourTooltip = ({
doneLabel,
hideNext,
hidePrev,
exitLabel,
onExitClick,

progress,
progressBarAdditionalClass,
Expand Down Expand Up @@ -494,6 +530,9 @@ export const TourTooltip = ({
nextLabel: nextLabel,
onNextClick: onNextClick,

exitLabel: exitLabel,
onExitClick: onExitClick,

prevLabel: prevLabel,
onPrevClick: onPrevClick,

Expand Down
3 changes: 3 additions & 0 deletions src/packages/tour/option.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export interface TourOptions {
prevLabel: string;
/* Skip button label in tooltip box */
skipLabel: string;
/* Exit button label in tooltip box */
exitLabel: string;
/* Done button label in tooltip box */
doneLabel: string;
/* Hide previous button in the first step? Otherwise, it will be disabled button. */
Expand Down Expand Up @@ -83,6 +85,7 @@ export function getDefaultTourOptions(): TourOptions {
nextLabel: "Next",
prevLabel: "Back",
skipLabel: "×",
exitLabel: "Exit",
doneLabel: "Done",
hidePrev: false,
hideNext: false,
Expand Down
15 changes: 8 additions & 7 deletions src/styles/introjs-rtl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.introjs-tooltipbuttons {
text-align: left;
text-align: center;
direction: rtl;
}

.introjs-skipbutton {
Expand All @@ -11,12 +12,12 @@
direction: rtl;
}

.introjs-prevbutton {
float: right;
}

.introjs-nextbutton {
float: left;
.introjs-prevbutton,
.introjs-nextbutton,
.introjs-exitButton {
float: none;
display: inline-block;
margin: 0 10px;
}

.introjs-bullets {
Expand Down
14 changes: 7 additions & 7 deletions src/styles/introjs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ tr.introjs-showElement {
.introjs-tooltipbuttons {
border-top: 1px solid $black300;
padding: 10px;
text-align: right;
text-align: center;
white-space: nowrap;

&:after {
Expand Down Expand Up @@ -313,12 +313,12 @@ tr.introjs-showElement {
}
}

.introjs-prevbutton {
float: left;
}

.introjs-nextbutton {
float: right;
.introjs-prevbutton,
.introjs-nextbutton,
.introjs-exitButton {
float: none;
display: inline-block;
margin: 0 10px;
}

.introjs-disabled {
Expand Down
3 changes: 3 additions & 0 deletions tests/jest/helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export function skipButton() {
export function nextButton() {
return find(".introjs-nextbutton");
}
export function exitButton() {
return find(".introjs-exitButton");
}

export function prevButton() {
return find(".introjs-prevbutton");
Expand Down
5 changes: 5 additions & 0 deletions themes/introjs-flattener.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@
border-radius: 0 .2em .2em 0;
}

.introjs-exitButton {
border-radius: 0 .2em .2em 0;
}


.introjs-button:hover, .introjs-button:focus {
background: #2c3e50;
color: #fff;
Expand Down