fix(HTL-124104): ftc attrs

Author: PhilWelsh

packages/core/src/Box/Box.stories.tsx

@@ -30,6 +30,14 @@ const Template = (args) => (
 
 export const _Box = Template.bind({})
 
+export const Attrs = Template.bind({})
+Attrs.storyName = 'With custom Attributes'
+Attrs.args = {
+  color: 'alert.base',
+  'gv-criticalpath': 'true',
+  'gv-hotelid': '1234',
+}
+
 export const DisplayAndSize = Template.bind({})
 DisplayAndSize.storyName = 'Display and Size'
 DisplayAndSize.args = {

packages/core/src/Box/Box.tsx

@@ -93,10 +93,16 @@ export type BoxProps = Omit<BorderRadiusProps, 'borderRadius'> &
 /**
  * @public
  */
-export const Box: React.FC<BoxProps> = styled.div.attrs((props) => ({
-  ...borderRadiusAttrs(props),
-  ...boxShadowAttrs(props),
-}))`
+export const Box: React.FC<BoxProps> = styled.div
+  .withConfig({
+    shouldForwardProp: (prop, defaultValidatorFn) =>
+      ['gv-criticalpath', 'gv-hotelid'].includes(prop) || defaultValidatorFn(prop),
+  })
+  .attrs((props) => ({
+    ...props,
+    ...borderRadiusAttrs(props),
+    ...boxShadowAttrs(props),
+  }))`
   ${applyVariations('Box')}
   ${color}
   ${colorScheme}

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,37 @@ 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) =>
+      ['gv-criticalpath', 'gv-hotelid'].includes(prop) || 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)}