Skip to content

Commit

Permalink
feat: IconicButton can have complex tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
jherdman committed Mar 8, 2024
1 parent 1cb7d42 commit d9aa314
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 23 deletions.
10 changes: 10 additions & 0 deletions src/Button/IconicButton.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,16 @@ WithATooltipAndLabel.story = {
name: "with a tooltip and label",
};

export const WithAComplicatedTooltipAndLabel = () => (
<IconicButton tooltip={<Box>Hello</Box>} icon="close">
Please stop
</IconicButton>
);

WithAComplicatedTooltipAndLabel.story = {
name: "with a complicated tooltip and label",
};

export const rightAligned = () => (
<Flex px="x3" height="150px">
<Flex justifyContent="flex-end" alignItems="flex-start" width="100%">
Expand Down
33 changes: 12 additions & 21 deletions src/Button/IconicButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import { space, SpaceProps, variant } from "styled-system";
import { Manager, Reference, Popper } from "react-popper-2";
import { transparentize } from "polished";
Expand All @@ -10,18 +9,21 @@ import { Text } from "../Type";
import { DefaultNDSThemeType } from "../theme.type";
import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";

type BaseProps = {
interface BaseProps {
size?: ComponentSize;
color?: string;
labelHidden?: boolean;
icon?: any;
icon?: string;
iconSize?: string;
hoverBackgroundColor?: string;
fontSize?: string;
tooltip?: string;
};
tooltip?: React.ReactNode;
}

type IconicButtonProps = BaseProps & SpaceProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>;
interface IconicButtonProps
extends BaseProps,
SpaceProps,
Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {}

const IconWrapper = styled.span(({ theme, size }: { theme: DefaultNDSThemeType; size: string }) => ({
display: "inline-flex",
Expand All @@ -34,7 +36,7 @@ const IconWrapper = styled.span(({ theme, size }: { theme: DefaultNDSThemeType;
transition: ".2s",
}));

const HoverText: React.FC<any> = styled.div(({ theme }) => ({
const HoverText = styled.div(({ theme }) => ({
whiteSpace: "nowrap",
ontSize: theme.fontSizes.small,
lineHeight: theme.lineHeights.smallTextCompressed,
Expand All @@ -47,7 +49,7 @@ const HoverText: React.FC<any> = styled.div(({ theme }) => ({
}));

const WrapperButton = styled.button<IconicButtonProps>(
({ disabled, hoverBackgroundColor, theme }: any) => ({
({ disabled, hoverBackgroundColor, theme }) => ({
background: "transparent",
border: "none",
position: "relative",
Expand Down Expand Up @@ -165,9 +167,9 @@ const IconicButton = React.forwardRef<HTMLButtonElement, IconicButtonProps>(
},
]}
>
{({ ref, style, placement }) =>
{({ ref, style }) =>
labelHidden || tooltip ? (
<HoverText ref={ref} style={style} placement={placement}>
<HoverText ref={ref} style={style}>
{tooltip ? tooltip : children}
</HoverText>
) : null
Expand All @@ -190,15 +192,4 @@ const IconicButton = React.forwardRef<HTMLButtonElement, IconicButtonProps>(

export const iconNames = Object.keys(icons);

IconicButton.propTypes = {
className: PropTypes.string,
color: PropTypes.string,
disabled: PropTypes.bool,
onClick: PropTypes.func,
icon: PropTypes.string,
iconSize: PropTypes.string,
tooltip: PropTypes.string,
children: PropTypes.node,
};

export default IconicButton;
4 changes: 2 additions & 2 deletions src/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import icons from "@nulogy/icons";
import theme from "../theme";
import LoadingIcon from "./LoadingIcon";

type IconProps = SpaceProps & {
interface IconProps extends SpaceProps {
icon: string;
className?: string;
size?: string;
title?: string;
color?: string;
focusable?: boolean;
style?: React.CSSProperties;
};
}

/* eslint-disable react/no-array-index-key */
const getPathElements = (icon: any) => (
Expand Down

0 comments on commit d9aa314

Please sign in to comment.