fix: Make popover white-space style deterministic (#3047)

cloudscape-design · Nov 26, 2024 · 6605b1c · 6605b1c
1 parent f545a80
commit 6605b1c
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/src/copy-to-clipboard/internal.tsx b/src/copy-to-clipboard/internal.tsx
@@ -63,7 +63,7 @@ export default function InternalCopyToClipboard({
   const isInline = variant === 'inline';
   const trigger = (
     <InternalPopover
-      className={clsx(isInline && styles['inline-trigger'])}
+      isInline={isInline}
       size="medium"
       position="top"
       triggerType="custom"

diff --git a/src/copy-to-clipboard/styles.scss b/src/copy-to-clipboard/styles.scss
@@ -16,7 +16,3 @@
     margin-inline-end: awsui.$space-scaled-xxs;
   }
 }
-
-.inline-trigger {
-  white-space: nowrap;
-}
diff --git a/src/internal/styles/utils/styles-reset.scss b/src/internal/styles/utils/styles-reset.scss
@@ -14,12 +14,9 @@
   direction: inherit;
   empty-cells: show;
   font-family: serif;
-  font-size: medium;
   font-style: normal;
   font-variant: normal;
-  font-weight: 400;
   font-stretch: normal;
-  line-height: normal;
   hyphens: none;
   letter-spacing: normal;
   list-style: disc outside none;

diff --git a/src/popover/internal.tsx b/src/popover/internal.tsx
@@ -28,6 +28,7 @@ export interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' |
   triggerType?: PopoverProps.TriggerType | 'filtering-token';
   size: PopoverProps.Size | 'content';
   __closeAnalyticsAction?: string;
+  isInline?: boolean;
 }
 
 export interface InternalPopoverRef {
@@ -51,11 +52,13 @@ function InternalPopover(
     triggerAriaLabel,
 
     wrapTriggerText = true,
+    isInline = false,
     renderWithPortal = false,
 
     __onOpen,
     __internalRootRef = null,
     __closeAnalyticsAction,
+
     ...restProps
   }: InternalPopoverProps,
   ref: React.Ref<InternalPopoverRef>
@@ -186,7 +189,8 @@ function InternalPopover(
       className={clsx(
         styles.root,
         baseProps.className,
-        triggerType === 'filtering-token' && styles['root-filtering-token']
+        triggerType === 'filtering-token' && styles['root-filtering-token'],
+        isInline && styles['no-wrap']
       )}
       ref={mergedRef}
       onMouseDown={() => {

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
@@ -15,6 +15,9 @@
 .root {
   @include styles.styles-reset;
   color: inherit;
+  &.no-wrap {
+    white-space: nowrap;
+  }
 }
 
 .root-filtering-token {