Skip to content

Commit

Permalink
refactor!: remove popup wrapper class, use content classes for popove…
Browse files Browse the repository at this point in the history 
…r… (#711)
  • Loading branch information
@helenjer
helenjer authored Jun 29, 2023
1 parent 2eed274 commit 3a45f20
Show file tree
Hide file tree
Showing 11 changed files with 155 additions and 140 deletions.
12 changes: 7 additions & 5 deletions src/components/Popover/Popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,13 @@ $block: '.#{variables.$ns}popover';

$buttonGap: 5px;

box-sizing: border-box;
min-height: 40px;
max-width: var(--yc-popover-max-width);
padding: var(--yc-popover-padding);
cursor: default;
&-popup-content {
box-sizing: border-box;
min-height: 40px;
max-width: var(--yc-popover-max-width);
padding: var(--yc-popover-padding);
cursor: default;
}

&-title {
@include mixins.text-subheader-3();
Expand Down
2 changes: 2 additions & 0 deletions src/components/Popover/Popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
offset = {},
tooltipOffset,
tooltipClassName,
tooltipContentClassName,
theme = 'info',
size = 's',
hasArrow = true,
Expand Down Expand Up @@ -108,6 +109,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
},
tooltipClassName,
)}
contentClassName={cnPopover('tooltip-popup-content', tooltipContentClassName)}
open={isOpen}
placement={placement}
hasArrow={hasArrow}
Expand Down
63 changes: 32 additions & 31 deletions src/components/Popover/README.md
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/components/Popover/__stories__/Popover.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export default {
tooltipCancelButton: {control: 'object'},
tooltipOffset: {control: 'array'},
tooltipClassName: {control: 'string '},
tooltipContentClassName: {control: 'string '},
className: {control: 'string '},
onClick: {action: 'onClick'},
onOpenChange: {action: 'onOpenChange'},
Expand Down
2 changes: 2 additions & 0 deletions src/components/Popover/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ export type PopoverExternalProps = {
tooltipOffset?: [number, number];
/** Tooltip's css class */
tooltipClassName?: string;
/** Tooltip's content css class */
tooltipContentClassName?: string;
/** css class for the control */
className?: string;
/**
Expand Down
147 changes: 73 additions & 74 deletions src/components/Popup/Popup.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use '../variables';

$block: '.#{variables.$ns}popup';
$blockWrapper: '.#{variables.$ns}popup-wrapper';

$arrow-size: 18px;
$arrow-offset: 9px;
Expand All @@ -16,67 +15,6 @@ $transition-distance: 10px;
--yc-popup-border-color: var(--g-color-line-solid);
--yc-popup-border-width: 1px;

position: relative;
animation-duration: 0.1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
border-radius: 4px;
background-color: var(--yc-popup-background-color);
box-shadow: 0 0 0 var(--yc-popup-border-width) var(--yc-popup-border-color),
0 8px 20px var(--yc-popup-border-width) var(--g-color-sfx-shadow);
outline: none;

// Corners rounding for content
& > :first-child:not(&__arrow),
& > &__arrow + * {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}

& > :last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}

&__arrow-content {
width: $arrow-size;
height: $arrow-size;
position: relative;
overflow: hidden;
display: flex;
}

&__arrow-circle-wrapper {
background-color: transparent;
overflow: hidden;
width: 9px;
height: 9px;
position: relative;
}

&__arrow-circle {
box-sizing: border-box;
border-radius: 50%;
box-shadow: inset 0 0 0 calc(#{$arrow-border} - var(--yc-popup-border-width))
var(--yc-popup-background-color),
inset 0 0 0 $arrow-border var(--yc-popup-border-color);
width: $arrow-circle-width;
height: $arrow-circle-height;
position: absolute;

&_left {
right: -5px;
bottom: -4px;
}

&_right {
left: -5px;
bottom: -4px;
}
}
}

#{$blockWrapper} {
z-index: 1000;
visibility: hidden;

Expand All @@ -86,71 +24,132 @@ $transition-distance: 10px;
}

&_exit_active {
&[data-popper-placement*='bottom'] #{$block} {
&[data-popper-placement*='bottom'] #{$block}__content {
animation-name: #{variables.$ns}popup-bottom;
}

&[data-popper-placement*='top'] #{$block} {
&[data-popper-placement*='top'] #{$block}__content {
animation-name: #{variables.$ns}popup-top;
}

&[data-popper-placement*='left'] #{$block} {
&[data-popper-placement*='left'] #{$block}__content {
animation-name: #{variables.$ns}popup-left;
}

&[data-popper-placement*='right'] #{$block} {
&[data-popper-placement*='right'] #{$block}__content {
animation-name: #{variables.$ns}popup-right;
}
}

// open state
&_enter_active,
&_appear_active {
&[data-popper-placement*='bottom'] #{$block} {
&[data-popper-placement*='bottom'] #{$block}__content {
animation-name: #{variables.$ns}popup-bottom-open;
}

&[data-popper-placement*='top'] #{$block} {
&[data-popper-placement*='top'] #{$block}__content {
animation-name: #{variables.$ns}popup-top-open;
}

&[data-popper-placement*='left'] #{$block} {
&[data-popper-placement*='left'] #{$block}__content {
animation-name: #{variables.$ns}popup-left-open;
}

&[data-popper-placement*='right'] #{$block} {
&[data-popper-placement*='right'] #{$block}__content {
animation-name: #{variables.$ns}popup-right-open;
}
}

// arrow
&[data-popper-placement*='bottom'] #{#{$block}}__arrow {
&[data-popper-placement*='bottom'] #{$block}__arrow {
top: -$arrow-offset;
}

&[data-popper-placement*='top'] #{#{$block}}__arrow {
&[data-popper-placement*='top'] #{$block}__arrow {
bottom: -$arrow-offset;

&-content {
transform: rotate(180deg);
}
}

&[data-popper-placement*='left'] #{#{$block}}__arrow {
&[data-popper-placement*='left'] #{$block}__arrow {
right: -$arrow-offset;

&-content {
transform: rotate(90deg);
}
}

&[data-popper-placement*='right'] #{#{$block}}__arrow {
&[data-popper-placement*='right'] #{$block}__arrow {
left: -$arrow-offset;

&-content {
transform: rotate(-90deg);
}
}

&__content {
position: relative;
animation-duration: 0.1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
border-radius: 4px;
background-color: var(--yc-popup-background-color);
box-shadow: 0 0 0 var(--yc-popup-border-width) var(--yc-popup-border-color),
0 8px 20px var(--yc-popup-border-width) var(--yc-color-sfx-shadow);
outline: none;

// Corners rounding for content
& > :first-child:not(#{$block}__arrow),
& > #{$block}__arrow + * {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}

& > :last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
}

&__arrow-content {
width: $arrow-size;
height: $arrow-size;
position: relative;
overflow: hidden;
display: flex;
}

&__arrow-circle-wrapper {
background-color: transparent;
overflow: hidden;
width: 9px;
height: 9px;
position: relative;
}

&__arrow-circle {
box-sizing: border-box;
border-radius: 50%;
box-shadow: inset 0 0 0 calc(#{$arrow-border} - var(--yc-popup-border-width))
var(--yc-popup-background-color),
inset 0 0 0 $arrow-border var(--yc-popup-border-color);
width: $arrow-circle-width;
height: $arrow-circle-height;
position: absolute;

&_left {
right: -5px;
bottom: -4px;
}

&_right {
left: -5px;
bottom: -4px;
}
}
}

@keyframes #{variables.$ns}popup-bottom {
Expand Down
11 changes: 6 additions & 5 deletions src/components/Popup/Popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps,
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
disablePortal?: boolean;
container?: HTMLElement;
contentClassName?: string;
restoreFocus?: boolean;
restoreFocusRef?: React.RefObject<HTMLElement>;
}

const b = block('popup');
const bWrapper = block('popup-wrapper');
const ARROW_SIZE = 8;

export function Popup({
Expand All @@ -60,6 +60,7 @@ export function Popup({
disableLayer,
style,
className,
contentClassName,
modifiers = [],
children,
onEscapeKeyDown,
Expand Down Expand Up @@ -118,7 +119,7 @@ export function Popup({
addEndListener={(done) =>
containerRef.current?.addEventListener('animationend', done)
}
classNames={getCSSTransitionClassNames(bWrapper)}
classNames={getCSSTransitionClassNames(b)}
mountOnEnter={!keepMounted}
unmountOnExit={!keepMounted}
appear={true}
Expand All @@ -128,16 +129,16 @@ export function Popup({
style={styles.popper}
{...attributes.popper}
{...containerProps}
className={bWrapper({open})}
className={b({open}, className)}
data-qa={qa}
>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={b({open}, className)}
className={b('content', contentClassName)}
style={style}
data-qa={qa}
>
{hasArrow && (
<PopupArrow
Expand Down
33 changes: 17 additions & 16 deletions src/components/SharePopover/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,23 @@ Sharing component

### PropTypes

| Property | Type | Required | Default | Description |
| :--------------- | :-------------------- | :------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| url | `String` | ✔ | | share link |
| title | `String` | | | link title |
| text | `String` | | | link text |
| shareOptions | `Array<ShareOptions>` | | `[]` | share options list |
| withCopyLink | `Boolean` | | `true` | display copy button |
| useWebShareApi | `Boolean` | | `false` | [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) usage setting. If turned on default share dialog will be shown (if bbrowser supports it) |
| placement | `Array` | | `['bottom-end']` | tooltip openening direction |
| openByHover | `Boolean` | | `true` | should open tooltip with hover |
| autoclosable | `Boolean` | | `true` | should close tooltip when cursor is outside |
| closeDelay | `Number` | | `300` | delay before tooltip will be hidden when cursor is otside |
| iconSize | `Number` | | | icon-control size |
| iconClass | `String` | | | icon-control mixin |
| tooltipClassName | `String` | | | tooltip mixin |
| className | `String` | | | css class for control |
| Property | Type | Required | Default | Description |
| :---------------------- | :-------------------- | :------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| url | `String` | ✔ | | share link |
| title | `String` | | | link title |
| text | `String` | | | link text |
| shareOptions | `Array<ShareOptions>` | | `[]` | share options list |
| withCopyLink | `Boolean` | | `true` | display copy button |
| useWebShareApi | `Boolean` | | `false` | [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) usage setting. If turned on default share dialog will be shown (if bbrowser supports it) |
| placement | `Array` | | `['bottom-end']` | tooltip openening direction |
| openByHover | `Boolean` | | `true` | should open tooltip with hover |
| autoclosable | `Boolean` | | `true` | should close tooltip when cursor is outside |
| closeDelay | `Number` | | `300` | delay before tooltip will be hidden when cursor is otside |
| iconSize | `Number` | | | icon-control size |
| iconClass | `String` | | | icon-control mixin |
| tooltipClassName | `String` | | | tooltip mixin |
| tooltipContentClassName | `String` | | | tooltip content mixin |
| className | `String` | | | css class for control |

### Examples

Expand Down
2 changes: 1 addition & 1 deletion src/components/SharePopover/SharePopover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $block: '.#{variables.$ns}share-popover';
#{$block} {
position: relative;

&__tooltip {
&__tooltip-content {
max-width: none;
padding: 8px;
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/SharePopover/SharePopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export interface SharePopoverProps extends ShareListProps, Partial<SharePopoverD
iconClass?: string;
/** tooltip mixin */
tooltipClassName?: string;
/** tooltip content mixin */
tooltipContentClassName?: string;
/** sitcher mixin */
switcherClassName?: string;
/** custom icon */
Expand Down Expand Up @@ -95,6 +97,7 @@ export class SharePopover extends React.PureComponent<SharePopoverInnerProps> {
iconSize,
iconClass,
tooltipClassName,
tooltipContentClassName,
switcherClassName,
className,
direction,
Expand Down Expand Up @@ -132,6 +135,7 @@ export class SharePopover extends React.PureComponent<SharePopoverInnerProps> {
content={content}
className={b(null, className)}
tooltipClassName={b('tooltip', tooltipClassName)}
tooltipContentClassName={b('tooltip-content', tooltipContentClassName)}
onClick={this.handleClick}
>
<div className={b('container', switcherClassName)}>
Expand Down
Loading

0 comments on commit 3a45f20

Please sign in to comment.