Skip to content

Commit f61835d

Browse files
author
github-actions
committed
chore: sync clay source from liferay-portal
1 parent 26c11d6 commit f61835d

15 files changed

Lines changed: 241 additions & 8 deletions

File tree

‎packages/clay-card/src/CardWithInfo.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ export function ClayCardWithInfo({
192192
['aspect-ratio-item-vertical-flush']: flushVertical,
193193
}
194194
)}
195+
draggable={false}
195196
{...(typeof imgProps === 'string'
196197
? {src: imgProps}
197198
: imgProps)}

‎packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1926,6 +1926,7 @@ exports[`ClayCardWithInfo renders as image card specifying imageProps and not th
19261926
>
19271927
<img
19281928
class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid"
1929+
draggable="false"
19291930
src="path/to/an/image"
19301931
/>
19311932
<span
@@ -2004,6 +2005,7 @@ exports[`ClayCardWithInfo renders as image card specifying the displayType and i
20042005
>
20052006
<img
20062007
class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid"
2008+
draggable="false"
20072009
src="path/to/an/image"
20082010
/>
20092011
<span
@@ -2167,6 +2169,7 @@ exports[`ClayCardWithInfo renders as image card with flush horizontal 1`] = `
21672169
>
21682170
<img
21692171
class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-flush"
2172+
draggable="false"
21702173
src="path/to/an/image"
21712174
/>
21722175
<span
@@ -2245,6 +2248,7 @@ exports[`ClayCardWithInfo renders as image card with flush vertical 1`] = `
22452248
>
22462249
<img
22472250
class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-vertical-flush"
2251+
draggable="false"
22482252
src="path/to/an/image"
22492253
/>
22502254
<span

‎packages/clay-core/src/picker/Picker.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,41 @@ export function Picker<T extends Record<string, any> | string | number>({
412412
listRef.current?.removeEventListener('scroll', onScroll, true);
413413
}, [active]);
414414

415+
useEffect(() => {
416+
if (!active || !listRef.current) {
417+
return;
418+
}
419+
420+
const key = selectedKey ?? activeDescendant;
421+
422+
if (key === undefined) {
423+
return;
424+
}
425+
426+
const list = listRef.current;
427+
428+
const item = list.querySelector<HTMLElement>(
429+
`[id="${CSS.escape(String(key))}"]`
430+
);
431+
432+
if (!item) {
433+
return;
434+
}
435+
436+
const itemRect = item.getBoundingClientRect();
437+
const listRect = list.getBoundingClientRect();
438+
439+
const itemOffsetInList = itemRect.top - listRect.top + list.scrollTop;
440+
441+
const centeredTop =
442+
itemOffsetInList - (list.clientHeight - itemRect.height) / 2;
443+
444+
list.scrollTop = Math.max(
445+
0,
446+
Math.min(centeredTop, list.scrollHeight - list.clientHeight)
447+
);
448+
}, [active]);
449+
415450
const onMoveFocus = useCallback(
416451
(
417452
key: 'PageUp' | 'PageDown',

‎packages/clay-core/src/picker/__tests__/IncrementalInteractions.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,111 @@ describe('Picker incremental interactions', () => {
188188
expect(combobox.getAttribute('aria-activedescendant')).toBe('Banana');
189189
});
190190

191+
it('scrolls the selected option into view when expanding the menu', () => {
192+
const items = Array.from({length: 50}, (_, i) => `Item ${i + 1}`);
193+
194+
const ITEM_HEIGHT = 20;
195+
const LIST_CLIENT_HEIGHT = 200;
196+
197+
const originalScrollTo = HTMLElement.prototype.scrollTo;
198+
199+
HTMLElement.prototype.scrollTo = jest.fn() as any;
200+
201+
const getBoundingClientRectSpy = jest
202+
.spyOn(Element.prototype, 'getBoundingClientRect')
203+
.mockImplementation(function (this: HTMLElement) {
204+
if (this.getAttribute('role') === 'option') {
205+
const top = items.indexOf(this.id) * ITEM_HEIGHT;
206+
207+
return {
208+
bottom: top + ITEM_HEIGHT,
209+
height: ITEM_HEIGHT,
210+
left: 0,
211+
right: 0,
212+
toJSON: () => ({}),
213+
top,
214+
width: 0,
215+
x: 0,
216+
y: top,
217+
};
218+
}
219+
220+
if (this.getAttribute('role') === 'listbox') {
221+
return {
222+
bottom: LIST_CLIENT_HEIGHT,
223+
height: LIST_CLIENT_HEIGHT,
224+
left: 0,
225+
right: 0,
226+
toJSON: () => ({}),
227+
top: 0,
228+
width: 0,
229+
x: 0,
230+
y: 0,
231+
};
232+
}
233+
234+
return {
235+
bottom: 0,
236+
height: 0,
237+
left: 0,
238+
right: 0,
239+
toJSON: () => ({}),
240+
top: 0,
241+
width: 0,
242+
x: 0,
243+
y: 0,
244+
};
245+
});
246+
247+
const clientHeightSpy = jest
248+
.spyOn(HTMLElement.prototype, 'clientHeight', 'get')
249+
.mockImplementation(function (this: HTMLElement) {
250+
return this.getAttribute('role') === 'listbox'
251+
? LIST_CLIENT_HEIGHT
252+
: 0;
253+
});
254+
255+
const scrollHeightSpy = jest
256+
.spyOn(HTMLElement.prototype, 'scrollHeight', 'get')
257+
.mockImplementation(function (this: HTMLElement) {
258+
return this.getAttribute('role') === 'listbox'
259+
? items.length * ITEM_HEIGHT
260+
: 0;
261+
});
262+
263+
try {
264+
const {getByRole} = render(
265+
<Picker items={items} selectedKey="Item 40">
266+
{(item) => <Option key={item}>{item}</Option>}
267+
</Picker>
268+
);
269+
270+
userEvent.click(getByRole('combobox'));
271+
272+
const selectedIndex = items.indexOf('Item 40');
273+
274+
const expected = Math.max(
275+
0,
276+
Math.min(
277+
selectedIndex * ITEM_HEIGHT -
278+
(LIST_CLIENT_HEIGHT - ITEM_HEIGHT) / 2,
279+
items.length * ITEM_HEIGHT - LIST_CLIENT_HEIGHT
280+
)
281+
);
282+
283+
expect(getByRole('listbox').scrollTop).toBe(expected);
284+
}
285+
finally {
286+
getBoundingClientRectSpy.mockRestore();
287+
288+
clientHeightSpy.mockRestore();
289+
290+
scrollHeightSpy.mockRestore();
291+
292+
HTMLElement.prototype.scrollTo = originalScrollTo;
293+
}
294+
});
295+
191296
describe('expanded menu', () => {
192297
it.concurrent.each([
193298
['enter', '[Enter]'],

‎packages/clay-css/src/scss/atlas-custom-properties/variables/_breadcrumbs.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ $breadcrumb-link: map-deep-merge(
147147
border-radius: 1px,
148148
color: var(--breadcrumb-link-color, $breadcrumb-link-color),
149149
display: block,
150+
line-height: 1.5rem,
150151
text-decoration:
151152
var(
152153
--breadcrumb-link-text-decoration,
@@ -177,14 +178,15 @@ $breadcrumb-toggle: () !default;
177178
$breadcrumb-toggle: map-merge(
178179
(
179180
color: $breadcrumb-link-color,
181+
flex-shrink: 0,
182+
margin-top: $breadcrumb-padding-y,
180183
),
181184
$breadcrumb-toggle
182185
);
183186

184187
$breadcrumb-bar: () !default;
185188
$breadcrumb-bar: map-deep-merge(
186189
(
187-
align-items: center,
188190
display: flex,
189191
),
190192
$breadcrumb-bar

‎packages/clay-css/src/scss/atlas-custom-properties/variables/_reorder.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ $clay-reorder-underlay-focus: map-deep-merge(
4949
--clay-reorder-underlay-focus-border-color,
5050
$input-focus-border-color
5151
),
52+
box-shadow:
53+
var(
54+
--clay-reorder-underlay-focus-box-shadow,
55+
$input-focus-box-shadow
56+
),
5257
),
5358
$clay-reorder-underlay-focus
5459
);

‎packages/clay-css/src/scss/atlas/variables/_reorder.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$clay-reorder-underlay-focus: () !default;
22
$clay-reorder-underlay-focus: map-deep-merge(
33
(
4-
box-shadow: null,
4+
box-shadow: $input-focus-box-shadow,
55
),
66
$clay-reorder-underlay-focus
77
);

‎packages/clay-css/src/scss/cadmin/variables/_breadcrumbs.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ $cadmin-breadcrumb-link: map-deep-merge(
134134
border-radius: 1px,
135135
color: $cadmin-breadcrumb-link-color,
136136
display: block,
137+
line-height: 1.5rem,
137138
text-decoration: $cadmin-breadcrumb-link-text-decoration,
138139
text-transform: $cadmin-breadcrumb-text-transform,
139140
transition: box-shadow 0.15s ease-in-out,
@@ -159,14 +160,15 @@ $cadmin-breadcrumb-toggle: () !default;
159160
$cadmin-breadcrumb-toggle: map-merge(
160161
(
161162
color: $cadmin-breadcrumb-link-color,
163+
flex-shrink: 0,
164+
margin-top: $cadmin-breadcrumb-padding-y,
162165
),
163166
$cadmin-breadcrumb-toggle
164167
);
165168

166169
$cadmin-breadcrumb-bar: () !default;
167170
$cadmin-breadcrumb-bar: map-deep-merge(
168171
(
169-
align-items: center,
170172
display: flex,
171173
),
172174
$cadmin-breadcrumb-bar

‎packages/clay-css/src/scss/cadmin/variables/_reorder.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ $cadmin-clay-reorder-underlay-focus: map-deep-merge(
4444
(
4545
background-color: $cadmin-input-focus-bg,
4646
border-color: $cadmin-input-focus-border-color,
47+
box-shadow: $cadmin-input-focus-box-shadow,
4748
),
4849
$cadmin-clay-reorder-underlay-focus
4950
);

‎packages/clay-css/src/scss/variables/_breadcrumbs.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ $breadcrumb-link: map-deep-merge(
132132
(
133133
color: $breadcrumb-link-color,
134134
display: block,
135+
line-height: 1.5rem,
135136
text-decoration: $breadcrumb-link-text-decoration,
136137
text-transform: $breadcrumb-text-transform,
137138

@@ -154,14 +155,15 @@ $breadcrumb-toggle: () !default;
154155
$breadcrumb-toggle: map-merge(
155156
(
156157
color: $breadcrumb-link-color,
158+
flex-shrink: 0,
159+
margin-top: $breadcrumb-padding-y,
157160
),
158161
$breadcrumb-toggle
159162
);
160163

161164
$breadcrumb-bar: () !default;
162165
$breadcrumb-bar: map-deep-merge(
163166
(
164-
align-items: center,
165167
display: flex,
166168
),
167169
$breadcrumb-bar

0 commit comments

Comments
 (0)