Skip to content

Commit

Permalink
feat(Popover): add prop to disable link styles (#280)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ogonkov
ogonkov authored Jul 29, 2022
1 parent 5e4355e commit 9ebb795
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 28 deletions.
12 changes: 8 additions & 4 deletions src/components/Popover/Popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ $block: '.#{$ns}popover';
$class: &;

&__tooltip {
$tooltip_block: &;

--yc-popover-padding: 16px;
--yc-popover-close-margin: 8px;
--yc-popover-close-size: 24px;
Expand Down Expand Up @@ -90,11 +92,13 @@ $block: '.#{$ns}popover';
}

#{$class}__tooltip-content a:not(.yc-button) {
text-decoration: none;
color: var(--yc-color-text-link);
@at-root #{$tooltip_block}_force-links-appearance#{&} {
text-decoration: none;
color: var(--yc-color-text-link);

&:hover {
color: var(--yc-color-text-link-hover);
&:hover {
color: var(--yc-color-text-link-hover);
}
}
}
}
Expand Down
15 changes: 14 additions & 1 deletion src/components/Popover/Popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,8 @@ interface PopoverDefaultProps {
initialOpen: boolean;
/** Whether the tooltip should render disabled */
disabled: boolean;
/** Force styles for links */
forceLinksAppearance: boolean;
}

export type PopoverProps = PopoverExternalProps &
Expand Down Expand Up @@ -136,6 +138,7 @@ export class Popover extends React.Component<
hasClose: false,
initialOpen: false,
disabled: false,
forceLinksAppearance: true,
};

state: PopoverState = {
Expand Down Expand Up @@ -260,12 +263,22 @@ export class Popover extends React.Component<
size,
anchorRef,
hasClose,
forceLinksAppearance,
} = this.props;

return (
<Popup
anchorRef={anchorRef || this.controlRef}
className={b('tooltip', {theme, size, ['with-close']: hasClose}, tooltipClassName)}
className={b(
'tooltip',
{
theme,
size,
['with-close']: hasClose,
'force-links-appearance': forceLinksAppearance,
},
tooltipClassName,
)}
open={open}
placement={placement}
hasArrow={hasArrow}
Expand Down
47 changes: 24 additions & 23 deletions src/components/Popover/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,30 @@ Popover component.

Наследует свойства [`QAProps`](../types.ts).

| Property | Type | Required | Values | Default | Description |
| :------------------ | :----------------- | :------- | :---------------- | :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | `ReactNode` | | | | Component that will trigger popover display |
| theme | `String` | | `info`, `special` | `info` | Popover appearance |
| placement | `Array` | | | [`right`, `bottom`] | Popover placement relative to `children` |
| hasArrow | `Boolean` | | | `true` | Display popover arrow |
| openOnHover | `Boolean` | | | `true` | Open popover on hover over `children` |
| autoclosable | `Boolean` | | | `true` | Close popover when pointer moves out of component |
| behavior | `TooltipBehavior` | | | `DelayedClosing` | Defines timings for open/close popover when `openOnHover` enabled (without delay, with delay, with delay before close). Ignored when `delayOpening` or `delayClosing` set |
| delayOpening | `Number` | | | `0` | Customize delay before popover open, ignored without `openOnHover`. It is recommended to use `behavior` instead |
| delayClosing | `Number` | | | `300` | Customize delay before popover close, ignored without `autoclosable`. It is recommended to use `behavior` instead |
| title | `String` | | | | Popover title |
| content | `ReactNode` | | | | Popover content |
| contentClassName | `String` | | | | Class name for popover `content` |
| htmlContent | `String` | | | | Render raw HTML via `dangerouslySetInnerHTML` |
| links | `Array` | | | [] | Links above content, could be <br/> `{ text: 'Link 1', href: 'https://example.com'}` or <br/> `{ text: 'Link 2', onClick: () => onLinkClick() }` |
| tooltipActionButton | `Object` | | | | Render button when value is <br/> `{ text: 'Button', onClick: () => onClick() }` |
| tooltipOffset | `[Number, Number]` | | | | Popover offset relative to `children` |
| onClick | `Function` | | | | Handler for popover `anchor`. Returned boolean value controls popover open state. |
| className | `String` | | | | Control class name |
| offset | `Object` | | | | Control offset <br/> `{ top: 0, left: 0 }` |
| anchorRef | `React.RefObject` | | | | Ref to custom anchor for popover. Disables `openByHover` and `onClick` |
| onOpenChange | `Function` | | | | Could be helpful for deffered popover content render |
| Property | Type | Required | Values | Default | Description |
| :------------------- | :----------------- | :------- | :---------------- | :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | `ReactNode` | | | | Component that will trigger popover display |
| theme | `String` | | `info`, `special` | `info` | Popover appearance |
| placement | `Array` | | | [`right`, `bottom`] | Popover placement relative to `children` |
| hasArrow | `Boolean` | | | `true` | Display popover arrow |
| forceLinksAppearance | `Boolean` | | | `true` | Force styles for `<a>` |
| openOnHover | `Boolean` | | | `true` | Open popover on hover over `children` |
| autoclosable | `Boolean` | | | `true` | Close popover when pointer moves out of component |
| behavior | `TooltipBehavior` | | | `DelayedClosing` | Defines timings for open/close popover when `openOnHover` enabled (without delay, with delay, with delay before close). Ignored when `delayOpening` or `delayClosing` set |
| delayOpening | `Number` | | | `0` | Customize delay before popover open, ignored without `openOnHover`. It is recommended to use `behavior` instead |
| delayClosing | `Number` | | | `300` | Customize delay before popover close, ignored without `autoclosable`. It is recommended to use `behavior` instead |
| title | `String` | | | | Popover title |
| content | `ReactNode` | | | | Popover content |
| contentClassName | `String` | | | | Class name for popover `content` |
| htmlContent | `String` | | | | Render raw HTML via `dangerouslySetInnerHTML` |
| links | `Array` | | | [] | Links above content, could be <br/> `{ text: 'Link 1', href: 'https://example.com'}` or <br/> `{ text: 'Link 2', onClick: () => onLinkClick() }` |
| tooltipActionButton | `Object` | | | | Render button when value is <br/> `{ text: 'Button', onClick: () => onClick() }` |
| tooltipOffset | `[Number, Number]` | | | | Popover offset relative to `children` |
| onClick | `Function` | | | | Handler for popover `anchor`. Returned boolean value controls popover open state. |
| className | `String` | | | | Control class name |
| offset | `Object` | | | | Control offset <br/> `{ top: 0, left: 0 }` |
| anchorRef | `React.RefObject` | | | | Ref to custom anchor for popover. Disables `openByHover` and `onClick` |
| onOpenChange | `Function` | | | | Could be helpful for deffered popover content render |

### Examples

Expand Down

0 comments on commit 9ebb795

Please sign in to comment.