React-joyride: Style focus and hover states of elements

[evansjohnson]

Expected behavior
Ability to style focus and hover styles of buttonClose, buttonNext, ect.

Actual behavior
Style objects provided through javascript are added as inline styles and therefore cannot style these pseudo-classes

I think right now I will have to target the .__floater__body class and rely on potentially brittle DOM selectors in order to style hover/focus states. Am I missing some easier way of achieving hover/focus styling?

I'd propose adding a publicly documented class to each element, that could be used for this purpose (ie. .react-joyride-button-close .react-joyride-button-next). Alternatively, a user could provide an object containing class names to stick on each element, as this would allow adding the classes that style the rest of a user's app (I could add the .my-app-button-style class to all of the buttons in react-joyride). If either of these approaches sound reasonable I would love to work on a PR to get this implemented.

[gilbarbara]

You can use your own components for the Beacon/Tooltip and style them any way you want.
Check beaconComponent and tooltipComponent props in the docs.

[evansjohnson]

@gilbarbara Sorry to sound difficult but I don't think I should have to create a custom component just because the provided component lacks the ability to style focus/hover states. Any well styled app should have styling to indicate focus/hover states and I can't imagine everyone writing their own custom components is the best solution here.

Would be happy to provide a PR for either of the proposed solutions in the original issue if you change your mind on this!

[gilbarbara]

@evansjohnson

I had to rewrite this component for V2 to remove all the bloat and make it composable exactly to handle these situations.
It doesn't lack the ability to style elements, it's just not the way you expect it.

Simply React
https://www.youtube.com/watch?v=AiJ8tRRH0f8

[evansjohnson]

Requiring users to write and maintain custom components to have _full_ (hover/focus) styling capabilities is unnecessarily burdensome and makes the library harder to use.

I would need to include some version of what is pasted below from the custom components example when all I want to write is the top bit of scss:

.react-joyride-tooltip button { // add this class and publicly document
    &:hover,
    &:focus {
         background-color: blue !important; //important would be required since styles are added inline, this would be required with or without the custom component.
    }
}

const TooltipBody = styled.div`
  background-color: #daa588;
  min-width: 290px;
  max-width: 420px;
  padding-bottom: 3rem;
`;

const TooltipContent = styled.div`
  color: #fff;
  padding: 20px;
`;

const TooltipTitle = styled.h2`
  color: #fff;
  padding: 20px;
  margin: 0;
`;

const TooltipFooter = styled.div`
  background-color: #f56960;
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;

  * + * {
    margin-left: 0.5rem;
  }
`;

const Button = styled.button`
  background-color: #e11b0e;
  color: #fff;
`;

const Tooltip = ({
  content,
  continuous,
  backProps,
  closeProps,
  index,
  isLastStep,
  locale,
  primaryProps,
  setTooltipRef,
  size,
  skipProps,
  title
}) => (
  <TooltipBody innerRef={setTooltipRef}>
    {title && <TooltipTitle>{title}</TooltipTitle>}
    {content && <TooltipContent>{content}</TooltipContent>}
    <TooltipFooter>
      {index > 0 && <Button {...backProps}>{locale.back}</Button>}
      {continuous && <Button {...primaryProps}>{locale.next}</Button>}
      {!continuous && <Button {...closeProps}>{locale.close}</Button>}
    </TooltipFooter>
  </TooltipBody>
);

I hope you seen how duplicating the tooltip DOM and logic (stuff like the continuous/!continuous &&) is undesirable and how a publicly documented class on the default component could help.

[dannyshaw]

Any reason to not just provide the ability to add a className to the internal components in the styling options?

[mkotajny]

This works for me (in react-joyride ver 2.3.0):

Removing of outline in all buttons in the guide:

1. To any component (which uses import './styles.css';

2. inside of styles.css - override "react-joyride__tooltip" css class:
   .react-joyride__tooltip button:focus { outline: none; }