Skip to content

Commit a3a28bc

Browse files
asangmabenelan
asangma
authored and
benelan
committed
fix(panel, flow-item): remove overflow rule (#8055)
**Related Issue:** #8028 ## Summary Attempt to fix the clipping of action-menu in Panel and FlowItem. This adds a test demo to approximate one of the use cases where the issue is appearing. I could use some help testing if this update breaks other stuff. cc @geospatialem
1 parent 1fc1ba5 commit a3a28bc

File tree

3 files changed

+211
-2
lines changed

3 files changed

+211
-2
lines changed

‎packages/calcite-components/src/components/flow-item/flow-item.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
:host {
1111
@extend %component-host;
12-
@apply relative flex w-full flex-auto overflow-hidden;
12+
@apply relative flex w-full flex-auto;
1313
}
1414

1515
@include disabled();

‎packages/calcite-components/src/components/panel/panel.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
:host {
1111
@extend %component-host;
12-
@apply relative flex w-full h-full flex-auto overflow-hidden;
12+
@apply relative flex w-full h-full flex-auto;
1313

1414
--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
1515
}

‎packages/calcite-components/src/demos/flow-and-panel-action-menu-overflow.html

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
6+
7+
<title>Flow</title>
8+
9+
<style>
10+
.parent {
11+
display: flex;
12+
align-items: center;
13+
margin: 25px 0;
14+
}
15+
16+
.child {
17+
flex: 0 0 40%;
18+
margin: 0 25px;
19+
color: var(--calcite-ui-text-3);
20+
font-family: var(--calcite-sans-family);
21+
font-size: var(--calcite-font-size-0);
22+
font-weight: var(--calcite-font-weight-medium);
23+
padding: 10px 0;
24+
}
25+
26+
.right-aligned-text {
27+
text-align: right;
28+
flex: 0 0 15%;
29+
}
30+
.features {
31+
display: flex;
32+
flex: 1;
33+
width: 100%;
34+
}
35+
36+
.main-container {
37+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
38+
z-index: 1;
39+
pointer-events: auto;
40+
background-color: #fff;
41+
width: 340px;
42+
min-height: 48px;
43+
max-height: 340px;
44+
display: flex;
45+
position: relative;
46+
margin-inline-end: 0.5rem;
47+
/* overflow: hidden; */
48+
}
49+
.panel-container {
50+
display: flex;
51+
flex-flow: row;
52+
}
53+
</style>
54+
55+
<script src="./_assets/head.js"></script>
56+
</head>
57+
58+
<body>
59+
<demo-dom-swapper>
60+
<div class="panel-container">
61+
<div class="main-container">
62+
<div class="features">
63+
<calcite-flow>
64+
<calcite-flow-item heading="I'm the second FlowItem"> Wee! </calcite-flow-item>
65+
<calcite-flow-item heading="I have a FlowItem" class="content-feature">
66+
<!-- <calcite-action icon="minimize" slot="header-actions-end"></calcite-action>
67+
<calcite-action icon="chevron-down" slot="header-actions-end"></calcite-action> -->
68+
<calcite-action icon="x" slot="header-actions-end"></calcite-action>
69+
70+
<calcite-action-bar slot="action-bar" expand-disabled expanded>
71+
<calcite-action-group scale="s" overlay-positioning="fixed">
72+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
73+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
74+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
75+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
76+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
77+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
78+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
79+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
80+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
81+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
82+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
83+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
84+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
85+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
86+
</calcite-action-group>
87+
</calcite-action-bar>
88+
<calcite-list>
89+
<calcite-list-item label="I'm a list item"></calcite-list-item>
90+
<calcite-list-item label="I'm a list item"></calcite-list-item>
91+
<calcite-list-item label="I'm a list item"></calcite-list-item>
92+
<calcite-list-item label="I'm a list item"></calcite-list-item>
93+
94+
<calcite-list-item label="I'm a list item"></calcite-list-item>
95+
96+
<calcite-list-item label="I'm a list item"></calcite-list-item>
97+
98+
<calcite-list-item label="I'm a list item"></calcite-list-item>
99+
<calcite-list-item label="I'm a list item"></calcite-list-item>
100+
<calcite-list-item label="I'm a list item"></calcite-list-item>
101+
</calcite-list>
102+
103+
<div class="features-footer" slot="footer">
104+
<calcite-action-bar
105+
class="pagination-action-bar"
106+
expand-disabled=""
107+
layout="horizontal"
108+
overflow-actions-disabled=""
109+
scale="s"
110+
>
111+
<calcite-action-group layout="horizontal" overlay-positioning="absolute" scale="s">
112+
<calcite-action
113+
class="pagination-previous"
114+
title="Previous"
115+
appearance="solid"
116+
icon="chevron-left"
117+
scale="s"
118+
></calcite-action>
119+
<calcite-action title="Next" appearance="solid" icon="chevron-right" scale="s"></calcite-action>
120+
</calcite-action-group>
121+
</calcite-action-bar>
122+
<calcite-action
123+
title="Select feature"
124+
appearance="solid"
125+
scale="s"
126+
text-enabled=""
127+
icon="list"
128+
></calcite-action>
129+
</div>
130+
</calcite-flow-item>
131+
</calcite-flow>
132+
</div>
133+
</div>
134+
135+
<div class="main-container">
136+
<div class="features">
137+
<calcite-flow>
138+
<calcite-panel heading="I have a Panel" class="content-feature">
139+
<!-- <calcite-action icon="minimize" slot="header-actions-end"></calcite-action>
140+
<calcite-action icon="chevron-down" slot="header-actions-end"></calcite-action> -->
141+
<calcite-action icon="x" slot="header-actions-end"></calcite-action>
142+
143+
<calcite-action-bar slot="action-bar" expand-disabled expanded>
144+
<calcite-action-group scale="s" overlay-positioning="fixed">
145+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
146+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
147+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
148+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
149+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
150+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
151+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
152+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
153+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
154+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
155+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
156+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
157+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
158+
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
159+
</calcite-action-group>
160+
</calcite-action-bar>
161+
<calcite-list>
162+
<calcite-list-item label="I'm a list item"></calcite-list-item>
163+
<calcite-list-item label="I'm a list item"></calcite-list-item>
164+
<calcite-list-item label="I'm a list item"></calcite-list-item>
165+
<calcite-list-item label="I'm a list item"></calcite-list-item>
166+
167+
<calcite-list-item label="I'm a list item"></calcite-list-item>
168+
169+
<calcite-list-item label="I'm a list item"></calcite-list-item>
170+
171+
<calcite-list-item label="I'm a list item"></calcite-list-item>
172+
<calcite-list-item label="I'm a list item"></calcite-list-item>
173+
<calcite-list-item label="I'm a list item"></calcite-list-item>
174+
</calcite-list>
175+
<div class="features-footer" slot="footer">
176+
<calcite-action-bar
177+
class="pagination-action-bar"
178+
expand-disabled=""
179+
layout="horizontal"
180+
overflow-actions-disabled=""
181+
scale="s"
182+
>
183+
<calcite-action-group layout="horizontal" overlay-positioning="absolute" scale="s">
184+
<calcite-action
185+
class="pagination-previous"
186+
title="Previous"
187+
appearance="solid"
188+
icon="chevron-left"
189+
scale="s"
190+
></calcite-action>
191+
<calcite-action title="Next" appearance="solid" icon="chevron-right" scale="s"></calcite-action>
192+
</calcite-action-group>
193+
</calcite-action-bar>
194+
<calcite-action
195+
title="Select feature"
196+
appearance="solid"
197+
scale="s"
198+
text-enabled=""
199+
icon="list"
200+
></calcite-action>
201+
</div>
202+
</calcite-panel>
203+
</calcite-flow>
204+
</div>
205+
</div>
206+
</div>
207+
</demo-dom-swapper>
208+
</body>
209+
</html>

0 commit comments

Comments
 (0)