[QUAR-642] add btn container styling

Skyscanner · Jan 29, 2025 · 7f3ca09 · 7f3ca09
1 parent ece5251
commit 7f3ca09
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/packages/bpk-component-card/src/BpkCardWrapper.module.scss b/packages/bpk-component-card/src/BpkCardWrapper.module.scss
@@ -96,19 +96,22 @@
       justify-content: space-between;
       align-items: flex-end;
 
-      &--button {
+      &--button-container {
         margin: tokens.bpk-spacing-md() tokens.bpk-spacing-base();
+        cursor: pointer;
+      }
+
+      &--button {
         all: unset;
 
         &:focus {
           @include utils.bpk-focus-indicator;
         }
       }
 
-      &--toggleLabel {
+      &--toggle-label {
         display: flex;
         align-items: center;
-        cursor: pointer;
 
         &--text {
           margin-inline-end: tokens.bpk-spacing-md();

diff --git a/packages/bpk-component-card/src/BpkCardWrapper.tsx b/packages/bpk-component-card/src/BpkCardWrapper.tsx
@@ -64,11 +64,11 @@ const BpkCardWrapper = ({
         fill: body?.moreInfoBtnColor,
         color: body?.moreInfoBtnColor,
       }}
-      className={getClassName('bpk-card-wrapper--body--header--toggleLabel')}
+      className={getClassName('bpk-card-wrapper--body--header--toggle-label')}
     >
       <div
         className={getClassName(
-          'bpk-card-wrapper--body--header--toggleLabel--text',
+          'bpk-card-wrapper--body--header--toggle-label--text',
         )}
       >
         <BpkText textStyle={TEXT_STYLES.caption}>{toggleLabel}</BpkText>
@@ -87,13 +87,19 @@ const BpkCardWrapper = ({
       <div className={getClassName('bpk-card-wrapper--body--header--content')}>
         {header}
       </div>
-      <button
-        type="button"
-        onClick={toggleExpand}
-        className={getClassName('bpk-card-wrapper--body--header--button')}
+      <div
+        className={getClassName(
+          'bpk-card-wrapper--body--header--button-container',
+        )}
       >
-        {moreInfoToggle}
-      </button>
+        <button
+          type="button"
+          onClick={toggleExpand}
+          className={getClassName('bpk-card-wrapper--body--header--button')}
+        >
+          {moreInfoToggle}
+        </button>
+      </div>
       <Portal
         isOpen={isBodyOpen}
         renderTarget={document.getElementById('body-header')}