Skip to content

Commit b3ffd7f

Browse files
driskullbenelan
driskull
authored and
benelan
committed
fix: set floating-ui elements max size set to the view (#11577)
**Related Issue:** #11579 ## Summary - Makes sure floating elements are not larger than `100vw`/`100vh` - Add screenshot tests
1 parent aee9940 commit b3ffd7f

File tree

6 files changed

+83
-5
lines changed

6 files changed

+83
-5
lines changed

‎packages/calcite-components/src/assets/styles/_floating-ui.scss

+2
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ $floating-ui-transition-offset: 5px;
7171
@mixin floating-ui-container() {
7272
inline-size: max-content;
7373
display: none;
74+
max-inline-size: 100vw;
75+
max-block-size: 100vh;
7476
inset-block-start: 0;
7577
/* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
7678
left: 0;

‎packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts

+14
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,20 @@ export const simple = (args: AutocompleteStoryArgs): string => html`
134134
</div>
135135
`;
136136

137+
export const smallViewport = (): string => html`
138+
<calcite-autocomplete open>
139+
<calcite-autocomplete-item-group heading="Dogs">
140+
<calcite-autocomplete-item label="Rover" value="rover" heading="Rover"></calcite-autocomplete-item>
141+
<calcite-autocomplete-item label="Fido" value="one" heading="Fido"></calcite-autocomplete-item>
142+
</calcite-autocomplete-item-group>
143+
<calcite-autocomplete-item-group heading="Cats">
144+
<calcite-autocomplete-item label="Felix" value="felix" heading="Felix"></calcite-autocomplete-item>
145+
<calcite-autocomplete-item label="Garfield" value="garfield" heading="Garfield"></calcite-autocomplete-item>
146+
</calcite-autocomplete-item-group>
147+
</calcite-autocomplete>
148+
`;
149+
smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
150+
137151
export const customIcon = (): string => html`
138152
<div style="width:350px">
139153
<calcite-autocomplete icon="banana"></calcite-autocomplete>

‎packages/calcite-components/src/components/combobox/combobox.stories.ts

+33-5
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,34 @@ export const single = (): string => html`
9393
</div>
9494
`;
9595

96+
export const smallViewport = (): string => html`
97+
<calcite-combobox
98+
selection-display="all"
99+
selection-mode="single"
100+
label="demo"
101+
open
102+
max-items="0"
103+
placeholder="placeholder"
104+
scale="m"
105+
status="idle"
106+
>
107+
<calcite-combobox-item icon="altitude" value="altitude" text-label="Altitude" selected></calcite-combobox-item>
108+
<calcite-combobox-item icon="article" value="article" text-label="Article"></calcite-combobox-item>
109+
<calcite-combobox-item icon="attachment" value="attachment" text-label="Attachment"></calcite-combobox-item>
110+
<calcite-combobox-item icon="banana" value="banana" text-label="Banana"></calcite-combobox-item>
111+
<calcite-combobox-item icon="battery3" value="battery" text-label="Battery Charging"></calcite-combobox-item>
112+
<calcite-combobox-item icon="beaker" value="beaker" text-label="Beaker"></calcite-combobox-item>
113+
<calcite-combobox-item icon="bell" value="bell" text-label="Bell"></calcite-combobox-item>
114+
<calcite-combobox-item icon="bookmark" value="bookmark" text-label="Bookmark"></calcite-combobox-item>
115+
<calcite-combobox-item icon="brightness" value="brightness" text-label="Brightness"></calcite-combobox-item>
116+
<calcite-combobox-item icon="calendar" value="calendar" text-label="Calendar"></calcite-combobox-item>
117+
<calcite-combobox-item icon="camera" value="camera" text-label="Camera"></calcite-combobox-item>
118+
<calcite-combobox-item icon="car" value="car" text-label="Car"></calcite-combobox-item>
119+
<calcite-combobox-item icon="clock" value="clock" text-label="Clock"></calcite-combobox-item>
120+
</calcite-combobox>
121+
`;
122+
smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
123+
96124
export const multiple = (): string => html`
97125
<div style="width:400px;max-width:100%;background-color:white;padding:100px">
98126
<h2>selection-display="all" (default)</h2>
@@ -384,8 +412,8 @@ const style = html`
384412

385413
export const longItemsAllSelectionModes = (): string => html`
386414
${style}
387-
<div style="display: flex; flex-direction: column;">
388-
<div style="display: flex; flex-direction: row; margin-block-end: 160px;">
415+
<div style="display: flex; flex-direction: column;">
416+
<div style="display: flex; flex-direction: row; margin-block-end: 160px;">
389417
<calcite-combobox open selection-mode="single" style="margin-right: 20px;">
390418
<calcite-combobox-item text-label="Layers">
391419
<calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
@@ -399,7 +427,7 @@ export const longItemsAllSelectionModes = (): string => html`
399427
</calcite-combobox>
400428
</div>
401429
402-
<div style="display: flex; flex-direction: row;">
430+
<div style="display: flex; flex-direction: row;">
403431
<calcite-combobox open selection-mode="multiple" style="margin-right: 20px;">
404432
<calcite-combobox-item-group label="First item group">
405433
<calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
@@ -418,8 +446,8 @@ export const longItemsAllSelectionModes = (): string => html`
418446
</calcite-combobox-item>
419447
</calcite-combobox-item-group>
420448
</calcite-combobox>
421-
</div>
422-
<div>
449+
</div>
450+
<div>
423451
`;
424452

425453
export const disabled_TestOnly = (): string =>

‎packages/calcite-components/src/components/dropdown/dropdown.stories.ts

+12
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,18 @@ export const simple = (args: DropdownStoryArgs): string => html`
7575
</calcite-dropdown>
7676
`;
7777

78+
export const smallViewport = (): string => html`
79+
<calcite-dropdown open>
80+
<calcite-button slot="trigger">Open Dropdown</calcite-button>
81+
<calcite-dropdown-group group-title="Sort by">
82+
<calcite-dropdown-item>Relevance</calcite-dropdown-item>
83+
<calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
84+
<calcite-dropdown-item>Title</calcite-dropdown-item>
85+
</calcite-dropdown-group>
86+
</calcite-dropdown>
87+
`;
88+
smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
89+
7890
export const simpleAutoWidth = (): string => html`
7991
<calcite-dropdown open placement="${defaultMenuPlacement}" scale="m" type="click">
8092
<calcite-button slot="trigger">Open Dropdown</calcite-button>

‎packages/calcite-components/src/components/popover/popover.stories.ts

+13
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,19 @@ export const simple = (args: PopoverStoryArgs): string => html`
6868
</div>
6969
`;
7070

71+
export const smallViewport = (): string => html`
72+
${referenceElementHTML}
73+
<calcite-popover reference-element="reference-element" open>
74+
<b>I am a title!</b> <br />
75+
<p>
76+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
77+
magna aliqua.
78+
</p>
79+
<calcite-link>I am an inline link</calcite-link>
80+
</calcite-popover>
81+
`;
82+
smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
83+
7184
export const darkModeRTL_TestOnly = (): string =>
7285
html` <div style="width: 400px;">
7386
${referenceElementHTML}

‎packages/calcite-components/src/components/tooltip/tooltip.stories.ts

+9
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,15 @@ export const simple = (args: TooltipStoryArgs): string => html`
4141
</div>
4242
`;
4343

44+
export const smallViewport = (): string => html`
45+
<calcite-button appearance="transparent" kind="neutral" id="reference-element">nostrud</calcite-button>
46+
<calcite-tooltip reference-element="reference-element" open
47+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
48+
aliqua</calcite-tooltip
49+
>
50+
`;
51+
smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
52+
4453
export const open_TestOnly = (): string => html`
4554
<div style="width: 400px;">
4655
${referenceElementHTML}

0 commit comments

Comments
 (0)