Skip to content

Commit

Permalink
fix(panel, flow-item): remove overflow rule (#8055)
Browse files Browse the repository at this point in the history 
**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
  • Loading branch information
@asangma
asangma committed Nov 10, 2023
1 parent e7165cc commit d0c3ed2
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/flow-item/flow-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

:host {
@extend %component-host;
@apply relative flex w-full flex-auto overflow-hidden;
@apply relative flex w-full flex-auto;
}

@include disabled();
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/panel/panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

:host {
@extend %component-host;
@apply relative flex w-full h-full flex-auto overflow-hidden;
@apply relative flex w-full h-full flex-auto;

--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
}
Expand Down
209 changes: 209 additions & 0 deletions packages/calcite-components/src/demos/flow-and-panel-action-menu-overflow.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />

<title>Flow</title>

<style>
.parent {
display: flex;
align-items: center;
margin: 25px 0;
}

.child {
flex: 0 0 40%;
margin: 0 25px;
color: var(--calcite-ui-text-3);
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
font-weight: var(--calcite-font-weight-medium);
padding: 10px 0;
}

.right-aligned-text {
text-align: right;
flex: 0 0 15%;
}
.features {
display: flex;
flex: 1;
width: 100%;
}

.main-container {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
z-index: 1;
pointer-events: auto;
background-color: #fff;
width: 340px;
min-height: 48px;
max-height: 340px;
display: flex;
position: relative;
margin-inline-end: 0.5rem;
/* overflow: hidden; */
}
.panel-container {
display: flex;
flex-flow: row;
}
</style>

<script src="./_assets/head.js"></script>
</head>

<body>
<demo-dom-swapper>
<div class="panel-container">
<div class="main-container">
<div class="features">
<calcite-flow>
<calcite-flow-item heading="I'm the second FlowItem"> Wee! </calcite-flow-item>
<calcite-flow-item heading="I have a FlowItem" class="content-feature">
<!-- <calcite-action icon="minimize" slot="header-actions-end"></calcite-action>
<calcite-action icon="chevron-down" slot="header-actions-end"></calcite-action> -->
<calcite-action icon="x" slot="header-actions-end"></calcite-action>

<calcite-action-bar slot="action-bar" expand-disabled expanded>
<calcite-action-group scale="s" overlay-positioning="fixed">
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-list>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>

<calcite-list-item label="I'm a list item"></calcite-list-item>

<calcite-list-item label="I'm a list item"></calcite-list-item>

<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
</calcite-list>

<div class="features-footer" slot="footer">
<calcite-action-bar
class="pagination-action-bar"
expand-disabled=""
layout="horizontal"
overflow-actions-disabled=""
scale="s"
>
<calcite-action-group layout="horizontal" overlay-positioning="absolute" scale="s">
<calcite-action
class="pagination-previous"
title="Previous"
appearance="solid"
icon="chevron-left"
scale="s"
></calcite-action>
<calcite-action title="Next" appearance="solid" icon="chevron-right" scale="s"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-action
title="Select feature"
appearance="solid"
scale="s"
text-enabled=""
icon="list"
></calcite-action>
</div>
</calcite-flow-item>
</calcite-flow>
</div>
</div>

<div class="main-container">
<div class="features">
<calcite-flow>
<calcite-panel heading="I have a Panel" class="content-feature">
<!-- <calcite-action icon="minimize" slot="header-actions-end"></calcite-action>
<calcite-action icon="chevron-down" slot="header-actions-end"></calcite-action> -->
<calcite-action icon="x" slot="header-actions-end"></calcite-action>

<calcite-action-bar slot="action-bar" expand-disabled expanded>
<calcite-action-group scale="s" overlay-positioning="fixed">
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
<calcite-action scale="s" text="Shoes not slippers" icon="banana" text-enabled></calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-list>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>

<calcite-list-item label="I'm a list item"></calcite-list-item>

<calcite-list-item label="I'm a list item"></calcite-list-item>

<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
<calcite-list-item label="I'm a list item"></calcite-list-item>
</calcite-list>
<div class="features-footer" slot="footer">
<calcite-action-bar
class="pagination-action-bar"
expand-disabled=""
layout="horizontal"
overflow-actions-disabled=""
scale="s"
>
<calcite-action-group layout="horizontal" overlay-positioning="absolute" scale="s">
<calcite-action
class="pagination-previous"
title="Previous"
appearance="solid"
icon="chevron-left"
scale="s"
></calcite-action>
<calcite-action title="Next" appearance="solid" icon="chevron-right" scale="s"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-action
title="Select feature"
appearance="solid"
scale="s"
text-enabled=""
icon="list"
></calcite-action>
</div>
</calcite-panel>
</calcite-flow>
</div>
</div>
</div>
</demo-dom-swapper>
</body>
</html>

0 comments on commit d0c3ed2

Please sign in to comment.