fix(sheet): fix rounded corners when displayMode="float" (#11086)

**Related Issue:** #10731 ## Summary - add a new content container to hide overflowed slotted content - add story screenshot test BEGIN_COMMIT_OVERRIDE END_COMMIT_OVERRIDE
Esri · Dec 17, 2024 · e0f5a85 · e0f5a85
1 parent 8206d77
commit e0f5a85
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/sheet/resources.ts b/packages/calcite-components/src/components/sheet/resources.ts
@@ -4,6 +4,7 @@ export const CSS = {
   container: "container",
   containerOpen: "container--open",
   content: "content",
+  contentContainer: "content-container",
   containerEmbedded: "container--embedded",
   resizeHandle: "resize-handle",
   resizeHandleBar: "resize-handle-bar",

diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss
@@ -175,12 +175,17 @@
   transform: var(--calcite-sheet-hidden-position-internal);
 }
 
+.content-container {
+  @apply flex flex-1 relative max-h-full max-w-full overflow-hidden;
+}
+
 .container--open .content {
   transform: translate3d(0, 0, 0);
 }
 
 :host([display-mode="float"]) .content,
-:host([display-mode="float"]) .container {
+:host([display-mode="float"]) .container,
+:host([display-mode="float"]) .content-container {
   @apply rounded;
 }
 
@@ -229,20 +234,30 @@
   @apply flex-col-reverse;
 }
 
-:host([resizable][position="inline-start"]),
-:host([resizable][position="inline-end"]) {
+:host([resizable][position="inline-start"]) {
   .content {
     padding-inline-end: var(--calcite-size-fixed-sm-plus);
   }
 }
 
-:host([resizable][position="block-start"]),
-:host([resizable][position="block-end"]) {
+:host([resizable][position="inline-end"]) {
+  .content {
+    padding-inline-start: var(--calcite-size-fixed-sm-plus);
+  }
+}
+
+:host([resizable][position="block-start"]) {
   .content {
     padding-block-end: var(--calcite-size-fixed-sm-plus);
   }
 }
 
+:host([resizable][position="block-end"]) {
+  .content {
+    padding-block-start: var(--calcite-size-fixed-sm-plus);
+  }
+}
+
 .resize-handle {
   @apply absolute flex justify-center items-center select-none box-border outline-none;
   --calcite-internal-sheet-resize-handle-offset: calc(
@@ -279,6 +294,10 @@
     inline-size: var(--calcite-size-fixed-sm-plus);
     border-inline-start: 1px solid var(--calcite-color-border-3);
   }
+
+  &:host([display-mode="float"]) .resize-handle-bar {
+    @apply rounded-e;
+  }
 }
 
 :host([position="inline-end"]) {
@@ -293,11 +312,15 @@
     inline-size: var(--calcite-size-fixed-sm-plus);
     border-inline-end: 1px solid var(--calcite-color-border-3);
   }
+
+  &:host([display-mode="float"]) .resize-handle-bar {
+    @apply rounded-s;
+  }
 }
 
 :host([position="block-start"]) {
   .resize-handle {
-    block-size: var(--calcite-size-fixed-sm-plus);
+    block-size: var(--calcite-size-fixed-xxl);
     inline-size: 100%;
     inset-block-end: var(--calcite-internal-sheet-resize-handle-offset);
   }
@@ -307,11 +330,15 @@
     block-size: var(--calcite-size-fixed-sm-plus);
     border-block-start: 1px solid var(--calcite-color-border-3);
   }
+
+  &:host([display-mode="float"]) .resize-handle-bar {
+    @apply rounded-b;
+  }
 }
 
 :host([position="block-end"]) {
   .resize-handle {
-    block-size: var(--calcite-size-fixed-sm-plus);
+    block-size: var(--calcite-size-fixed-xxl);
     inline-size: 100%;
     inset-block-start: var(--calcite-internal-sheet-resize-handle-offset);
   }
@@ -321,6 +348,10 @@
     block-size: var(--calcite-size-fixed-sm-plus);
     border-block-end: 1px solid var(--calcite-color-border-3);
   }
+
+  &:host([display-mode="float"]) .resize-handle-bar {
+    @apply rounded-t;
+  }
 }
 
 /**

diff --git a/packages/calcite-components/src/components/sheet/sheet.stories.ts b/packages/calcite-components/src/components/sheet/sheet.stories.ts
@@ -71,6 +71,26 @@ export const resizable = (): string =>
 export const resizableBlockStart = (): string =>
   html`<calcite-sheet resizable label="libero nunc" open position="block-start">${panelHTML}</calcite-sheet>`;
 
+export const resizableFloatInlineStart = (): string =>
+  html`<calcite-sheet display-mode="float" resizable label="libero nunc" open position="inline-start"
+    >${panelHTML}</calcite-sheet
+  >`;
+
+export const resizableFloatInlineEnd = (): string =>
+  html`<calcite-sheet display-mode="float" resizable label="libero nunc" open position="inline-end"
+    >${panelHTML}</calcite-sheet
+  >`;
+
+export const resizableFloatBlockStart = (): string =>
+  html`<calcite-sheet display-mode="float" resizable label="libero nunc" open position="block-start"
+    >${panelHTML}</calcite-sheet
+  >`;
+
+export const resizableFloatBlockEnd = (): string =>
+  html`<calcite-sheet display-mode="float" resizable label="libero nunc" open position="block-end"
+    >${panelHTML}</calcite-sheet
+  >`;
+
 export const resizableLoremIpsum = (): string =>
   html`<calcite-sheet resizable label="libero nunc" open position="inline-end"
     >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel viverra purus. Vestibulum fringilla fringilla orci

diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -635,7 +635,9 @@ export class Sheet
       >
         <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />
         <div class={CSS.content} ref={this.setContentEl}>
-          <slot />
+          <div class={CSS.contentContainer}>
+            <slot />
+          </div>
           {resizable ? (
             <div
               ariaLabel={this.messages.resizeEnabled}