Skip to content

Commit 7084426

Browse files
noisysocksnoisysocks
committed
Use Popover in DotTip
Add yAxis=middle support to the Popover component so that we can use it to implement NUX tips.
1 parent 58a86ef commit 7084426

File tree

9 files changed

+194
-198
lines changed

9 files changed

+194
-198
lines changed

‎components/popover/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ class Popover extends Component {
3939

4040
this.focus = this.focus.bind( this );
4141
this.getAnchorRect = this.getAnchorRect.bind( this );
42+
this.updatePopoverSize = this.updatePopoverSize.bind( this );
4243
this.computePopoverPosition = this.computePopoverPosition.bind( this );
4344
this.throttledComputePopoverPosition = this.throttledComputePopoverPosition.bind( this );
4445
this.maybeClose = this.maybeClose.bind( this );
@@ -190,7 +191,6 @@ class Popover extends Component {
190191
children,
191192
className,
192193
onClickOutside = onClose,
193-
noArrow = false,
194194
// Disable reason: We generate the `...contentProps` rest as remainder
195195
// of props which aren't explicitly handled by this component.
196196
/* eslint-disable no-unused-vars */
@@ -213,6 +213,11 @@ class Popover extends Component {
213213
isMobile,
214214
} = this.state;
215215

216+
let { noArrow = false } = this.props;
217+
if ( xAxis === 'center' && yAxis === 'middle' ) {
218+
noArrow = true;
219+
}
220+
216221
const classes = classnames(
217222
'components-popover',
218223
className,

‎components/popover/style.scss‎

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,8 @@ $arrow-size: 8px;
2727
&:after {
2828
content: "";
2929
position: absolute;
30-
margin-left: -10px;
3130
height: 0;
3231
width: 0;
33-
border-left-color: transparent;
34-
border-right-color: transparent;
3532
line-height: 0;
3633
}
3734

@@ -48,13 +45,16 @@ $arrow-size: 8px;
4845

4946
&:before,
5047
&:after {
51-
border-top-style: solid;
5248
border-bottom: none;
49+
border-left-color: transparent;
50+
border-right-color: transparent;
51+
border-top-style: solid;
52+
margin-left: -10px;
5353
}
5454
}
5555

5656
&.is-bottom {
57-
margin-top: 8px;
57+
margin-top: $arrow-size;
5858

5959
&:before {
6060
top: -$arrow-size;
@@ -67,7 +67,50 @@ $arrow-size: 8px;
6767
&:before,
6868
&:after {
6969
border-bottom-style: solid;
70+
border-left-color: transparent;
71+
border-right-color: transparent;
7072
border-top: none;
73+
margin-left: -10px;
74+
}
75+
}
76+
77+
&.is-middle.is-left {
78+
margin-left: -$arrow-size;
79+
80+
&:before {
81+
right: -$arrow-size;
82+
}
83+
84+
&:after {
85+
right: -6px;
86+
}
87+
88+
&:before,
89+
&:after {
90+
border-bottom-color: transparent;
91+
border-left-style: solid;
92+
border-right: none;
93+
border-top-color: transparent;
94+
}
95+
}
96+
97+
&.is-middle.is-right {
98+
margin-left: $arrow-size;
99+
100+
&:before {
101+
left: -$arrow-size;
102+
}
103+
104+
&:after {
105+
left: -6px;
106+
}
107+
108+
&:before,
109+
&:after {
110+
border-bottom-color: transparent;
111+
border-left: none;
112+
border-right-style: solid;
113+
border-top-color: transparent;
71114
}
72115
}
73116
}
@@ -81,6 +124,11 @@ $arrow-size: 8px;
81124
top: 100%;
82125
z-index: z-index( ".components-popover.is-bottom" );
83126
}
127+
128+
&.is-middle {
129+
align-items: center;
130+
display: flex;
131+
}
84132
}
85133
}
86134

@@ -114,12 +162,18 @@ $arrow-size: 8px;
114162
.components-popover:not(.is-mobile).is-right & {
115163
position: absolute;
116164
left: 100%;
165+
}
166+
167+
.components-popover:not(.is-mobile):not(.is-middle).is-right & {
117168
margin-left: -24px;
118169
}
119170

120171
.components-popover:not(.is-mobile).is-left & {
121172
position: absolute;
122173
right: 100%;
174+
}
175+
176+
.components-popover:not(.is-mobile):not(.is-middle).is-left & {
123177
margin-right: -24px;
124178
}
125179
}

‎components/popover/utils.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,14 @@ export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
6969
const { height } = contentSize;
7070

7171
// y axis aligment choices
72+
const anchorMidPoint = anchorRect.top + ( anchorRect.height / 2 );
73+
const middleAlignment = {
74+
popoverTop: anchorMidPoint,
75+
contentHeight: (
76+
( anchorMidPoint - ( height / 2 ) > 0 ? ( height / 2 ) : anchorMidPoint ) +
77+
( anchorMidPoint + ( height / 2 ) > window.innerHeight ? window.innerHeight - anchorMidPoint : ( height / 2 ) )
78+
),
79+
};
7280
const topAlignment = {
7381
popoverTop: anchorRect.top,
7482
contentHeight: anchorRect.top - HEIGHT_OFFSET - height > 0 ? height : anchorRect.top - HEIGHT_OFFSET,
@@ -81,7 +89,9 @@ export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
8189
// Choosing the y axis
8290
let chosenYAxis;
8391
let contentHeight = null;
84-
if ( yAxis === 'top' && topAlignment.contentHeight === height ) {
92+
if ( yAxis === 'middle' && middleAlignment.contentHeight === height ) {
93+
chosenYAxis = 'middle';
94+
} else if ( yAxis === 'top' && topAlignment.contentHeight === height ) {
8595
chosenYAxis = 'top';
8696
} else if ( yAxis === 'bottom' && bottomAlignment.contentHeight === height ) {
8797
chosenYAxis = 'bottom';
@@ -91,7 +101,14 @@ export function computePopoverYAxisPosition( anchorRect, contentSize, yAxis ) {
91101
contentHeight = chosenHeight !== height ? chosenHeight : null;
92102
}
93103

94-
const popoverTop = chosenYAxis === 'top' ? topAlignment.popoverTop : bottomAlignment.popoverTop;
104+
let popoverTop;
105+
if ( chosenYAxis === 'middle' ) {
106+
popoverTop = middleAlignment.popoverTop;
107+
} else if ( chosenYAxis === 'top' ) {
108+
popoverTop = topAlignment.popoverTop;
109+
} else {
110+
popoverTop = bottomAlignment.popoverTop;
111+
}
95112

96113
return {
97114
yAxis: chosenYAxis,

‎edit-post/assets/stylesheets/_z-index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ $z-layers: (
6868
'.components-autocomplete__results': 1000000,
6969

7070
'.skip-to-selected-block': 100000,
71+
72+
// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
73+
'.nux-dot-tip': 1000001,
7174
);
7275

7376
@function z-index( $key ) {

‎edit-post/components/layout/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ function Layout( {
9898
}
9999
<Popover.Slot />
100100
<PluginArea />
101-
<DotTip.Slot />
102101
</div>
103102
);
104103
}

‎editor/components/default-block-appender/test/__snapshots__/index.js.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
3939
<WithSelect(WithDispatch(Inserter))
4040
position="top right"
4141
>
42-
<WithSelect(WithDispatch(WithGlobalEvents(DotTip)))
42+
<WithSelect(WithDispatch(DotTip))
4343
id="core/editor.inserter"
4444
>
4545
Welcome to the wonderful world of blocks! Click ‘Add block’ to insert different kinds of content—text, images, quotes, video, lists, and much more.
46-
</WithSelect(WithDispatch(WithGlobalEvents(DotTip)))>
46+
</WithSelect(WithDispatch(DotTip))>
4747
</WithSelect(WithDispatch(Inserter))>
4848
</div>
4949
`;
@@ -69,11 +69,11 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
6969
<WithSelect(WithDispatch(Inserter))
7070
position="top right"
7171
>
72-
<WithSelect(WithDispatch(WithGlobalEvents(DotTip)))
72+
<WithSelect(WithDispatch(DotTip))
7373
id="core/editor.inserter"
7474
>
7575
Welcome to the wonderful world of blocks! Click ‘Add block’ to insert different kinds of content—text, images, quotes, video, lists, and much more.
76-
</WithSelect(WithDispatch(WithGlobalEvents(DotTip)))>
76+
</WithSelect(WithDispatch(DotTip))>
7777
</WithSelect(WithDispatch(Inserter))>
7878
</div>
7979
`;
@@ -99,11 +99,11 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
9999
<WithSelect(WithDispatch(Inserter))
100100
position="top right"
101101
>
102-
<WithSelect(WithDispatch(WithGlobalEvents(DotTip)))
102+
<WithSelect(WithDispatch(DotTip))
103103
id="core/editor.inserter"
104104
>
105105
Welcome to the wonderful world of blocks! Click ‘Add block’ to insert different kinds of content—text, images, quotes, video, lists, and much more.
106-
</WithSelect(WithDispatch(WithGlobalEvents(DotTip)))>
106+
</WithSelect(WithDispatch(DotTip))>
107107
</WithSelect(WithDispatch(Inserter))>
108108
</div>
109109
`;

0 commit comments

Comments
 (0)