fix: correct popover style in split-button

Refs: #6725
public-ui · Aug 14, 2024 · d7748b0 · d7748b0
1 parent e1cf6bd
commit d7748b0
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 55 deletions.
diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
@@ -51,40 +51,42 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 		const i18nDropdownLabel = 'kol-split-button-dropdown-label';
 		return (
 			<Host class="kol-split-button">
-				<KolButtonWcTag
-					class={{
-						'main-button': true,
-						button: true,
-						[this._variant as string]: this._variant !== 'custom',
-						[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-					}}
-					_ariaControls={this._ariaControls}
-					_ariaExpanded={this._ariaExpanded}
-					_ariaSelected={this._ariaSelected}
-					_customClass={this._customClass}
-					_disabled={this._disabled}
-					_icons={this._icons}
-					_hideLabel={this._hideLabel}
-					_label={this._label}
-					_name={this._name}
-					_on={this.clickButtonHandler}
-					_role={this._role}
-					_syncValueBySelector={this._syncValueBySelector}
-					_tabIndex={this._tabIndex}
-					_tooltipAlign={this._tooltipAlign}
-					_type={this._type}
-					_value={this._value}
-					_variant={this._variant}
-				></KolButtonWcTag>
-				<div class="horizontal-line"></div>
-				<KolButtonWcTag
-					class="secondary-button"
-					_disabled={this._disabled}
-					_hideLabel
-					_icons="codicon codicon-triangle-down"
-					_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}
-					_on={this.clickToggleHandler}
-				></KolButtonWcTag>
+				<div class="split-button-root">
+					<KolButtonWcTag
+						class={{
+							'main-button': true,
+							button: true,
+							[this._variant as string]: this._variant !== 'custom',
+							[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
+						}}
+						_ariaControls={this._ariaControls}
+						_ariaExpanded={this._ariaExpanded}
+						_ariaSelected={this._ariaSelected}
+						_customClass={this._customClass}
+						_disabled={this._disabled}
+						_icons={this._icons}
+						_hideLabel={this._hideLabel}
+						_label={this._label}
+						_name={this._name}
+						_on={this.clickButtonHandler}
+						_role={this._role}
+						_syncValueBySelector={this._syncValueBySelector}
+						_tabIndex={this._tabIndex}
+						_tooltipAlign={this._tooltipAlign}
+						_type={this._type}
+						_value={this._value}
+						_variant={this._variant}
+					></KolButtonWcTag>
+					<div class="horizontal-line"></div>
+					<KolButtonWcTag
+						class="secondary-button"
+						_disabled={this._disabled}
+						_hideLabel
+						_icons="codicon codicon-triangle-down"
+						_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}
+						_on={this.clickToggleHandler}
+					></KolButtonWcTag>
+				</div>
 				<KolPopoverWcTag _show={this.state._show} _align="bottom">
 					<slot />
 				</KolPopoverWcTag>

diff --git a/packages/components/src/components/split-button/style.scss b/packages/components/src/components/split-button/style.scss
@@ -8,13 +8,21 @@
 		position: relative;
 	}
 
+	:host .split-button-root {
+		display: flex;
+		position: relative;
+	}
+
 	.main-button {
 		flex-grow: 1;
 		text-align: left;
 	}
 
-	/* popover */
-	.popover {
-		position: fixed !important;
+	.kol-popover-wc .popover {
+		margin-top: rem(2);
+	}
+
+	.kol-popover-wc .arrow {
+		display: none;
 	}
 }
diff --git a/packages/components/src/components/split-button/test/html.mock.ts b/packages/components/src/components/split-button/test/html.mock.ts
@@ -16,27 +16,29 @@ export const getSplitButtonHtml = (props: SplitButtonProps): string => {
 	return `
 <kol-split-button  class="kol-split-button">
   <mock:shadow-root>
-  <${KolButtonWcTag}
-		${props._disabled ? `_disabled=""` : ''}
-		${typeof props._name === 'string' ? `_name="${props._name}"` : ''}
-		${props._hideLabel ? `_hidelabel=""` : ''}
-		${typeof props._icons === 'string' ? `_icons="${props._icons}"` : ''}
-		${typeof props._label === 'string' ? `_label="${props._label}"` : ''}
-		_tooltipalign="top"
-		_type="button"
-		_variant= ${variant}
-		class="button main-button ${variant}"
-	>
-	</${KolButtonWcTag}>
-    <div class="horizontal-line"></div>
-    <${KolButtonWcTag}
+	<div class="split-button">
+		<${KolButtonWcTag}
 			${props._disabled ? `_disabled=""` : ''}
-			_hidelabel=""
-			_icons="codicon codicon-triangle-down"
-			_label="${state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}"
-			class="secondary-button"
+			${typeof props._name === 'string' ? `_name="${props._name}"` : ''}
+			${props._hideLabel ? `_hidelabel=""` : ''}
+			${typeof props._icons === 'string' ? `_icons="${props._icons}"` : ''}
+			${typeof props._label === 'string' ? `_label="${props._label}"` : ''}
+			_tooltipalign="top"
+			_type="button"
+			_variant= ${variant}
+			class="button main-button ${variant}"
 		>
 		</${KolButtonWcTag}>
+			<div class="horizontal-line"></div>
+			<${KolButtonWcTag}
+				${props._disabled ? `_disabled=""` : ''}
+				_hidelabel=""
+				_icons="codicon codicon-triangle-down"
+				_label="${state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}"
+				class="secondary-button"
+			>
+			</${KolButtonWcTag}>
+		</div>
 		<${KolPopoverWcTag} ${state._show ? `_show ="${state._show}"` : ''} _align="bottom">
 			<slot />
 		</${KolPopoverWcTag}>