fix(HTL-124104): ftc attrs (#1563)

Author: PhilWelsh

common/changes/pcln-design-system/fix-HTL-124104-ftc-attrs_2025-09-16-15-10.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "add gv- attributes to Button",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Button/Button.stories.tsx

@@ -62,6 +62,16 @@ export const Playground: ButtonStory = {
   },
 }
 
+export const Attrs: ButtonStory = {
+  render: () => (
+    <StoryStage>
+      <Button size='extraLarge' gv-criticalpath='true' gv-hotelid='1234'>
+        Extra Large
+      </Button>
+    </StoryStage>
+  ),
+}
+
 export const Size: ButtonStory = {
   render: () => (
     <StoryStage>

packages/core/src/Button/Button.tsx

@@ -317,31 +317,36 @@ function getPaddingProps({ IconLeft, IconRight, size, variation, hasChildren }:
 /**
  * Use the <Button /> component to render a primitive button. Use the `variation` prop to change the look of the button.
  */
-const StyledButton: React.FC<StyledButtonProps> = styled.button.attrs((props) => {
-  const {
-    width,
-    height,
-    title,
-    'aria-label': ariaLabel,
-    borderRadius,
-    IconLeft,
-    IconRight,
-    size,
-    variation,
-    hasChildren,
-  } = props
+const StyledButton: React.FC<StyledButtonProps> = styled.button
+  .withConfig({
+    shouldForwardProp: (prop, defaultValidatorFn) => prop.startsWith('gv-') || defaultValidatorFn(prop),
+  })
+  .attrs((props) => {
+    const {
+      width,
+      height,
+      title,
+      'aria-label': ariaLabel,
+      borderRadius,
+      IconLeft,
+      IconRight,
+      size,
+      variation,
+      hasChildren,
+    } = props
 
-  const paddingProps = getPaddingProps({ IconLeft, IconRight, size, variation, hasChildren })
+    const paddingProps = getPaddingProps({ IconLeft, IconRight, size, variation, hasChildren })
 
-  return {
-    borderRadius,
-    ...boxShadowAttrs(props),
-    width,
-    height,
-    'aria-label': ariaLabel || title,
-    ...paddingProps,
-  }
-})`
+    return {
+      borderRadius,
+      ...boxShadowAttrs(props),
+      width,
+      height,
+      'aria-label': ariaLabel || title,
+      ...props,
+      ...paddingProps,
+    }
+  })`
   ${buttonStyles}
 
   ${(props) => compose(width, height, space, boxShadow)(props)}

packages/core/src/FloatingActionButton/__snapshots__/FloatingActionButton.spec.tsx.snap

@@ -97,7 +97,7 @@ exports[`FloatingActionButton it renders 1`] = `
       class="c1"
     >
       <button
-        class="c2 c3"
+        class="c2 c3 sc-gsFSXq c3"
         color="primary"
       >
         <div

packages/core/src/IconButton/__snapshots__/IconButton.spec.tsx.snap

@@ -95,7 +95,7 @@ exports[`IconButton renders without props 1`] = `
 }
 
 <button
-  className="c0 c1"
+  className="c0 c1 sc-dcJsrY c1"
   color="primary"
   size="medium"
 >

packages/core/src/Step/__snapshots__/Step.spec.tsx.snap

@@ -90,7 +90,7 @@ exports[`Step should handle onClick 1`] = `
     class="c0"
   >
     <button
-      class="c1 c2"
+      class="c1 c2 sc-imWYAI c2"
       color="primary"
       data-testid="Step"
     >
@@ -214,7 +214,7 @@ exports[`Step should render a completed step correctly 1`] = `
     class="c0"
   >
     <button
-      class="c1 c2"
+      class="c1 c2 sc-imWYAI c2"
       color="primary"
       data-testid="Step"
     >
@@ -357,7 +357,7 @@ exports[`Step should render a step that is "active" and "completed" correctly 1`
     class="c0"
   >
     <button
-      class="c1 c2"
+      class="c1 c2 sc-imWYAI c2"
       color="primary"
       data-testid="Step"
     >
@@ -486,7 +486,7 @@ exports[`Step should render an active step correctly 1`] = `
     class="c0"
   >
     <button
-      class="c1 c2"
+      class="c1 c2 sc-imWYAI c2"
       color="primary"
       data-testid="Step"
     >
@@ -596,7 +596,7 @@ exports[`Step should render correctly with no props without throwing 1`] = `
     class="c0"
   >
     <button
-      class="c1 c2"
+      class="c1 c2 sc-imWYAI c2"
       color="primary"
     >
       <div

packages/core/src/Stepper/__snapshots__/Stepper.spec.tsx.snap

@@ -114,7 +114,7 @@ exports[`Stepper renders with children 1`] = `
   className="c0 c1"
 >
   <button
-    className="c2 c3"
+    className="c2 c3 sc-kAyceB c3"
     color="primary"
     size="medium"
   >
@@ -150,7 +150,7 @@ exports[`Stepper renders with children 1`] = `
     </div>
   </button>
   <button
-    className="c2 c3"
+    className="c2 c3 sc-kAyceB c3"
     color="primary"
     size="medium"
   >
@@ -168,7 +168,7 @@ exports[`Stepper renders with children 1`] = `
     </div>
   </button>
   <button
-    className="c2 c3"
+    className="c2 c3 sc-kAyceB c3"
     color="primary"
     size="medium"
   >