Skip to content

Commit 24317e7

Browse files
committed
fix(HTL-124104): ftc attrs
1 parent cb12413 commit 24317e7

File tree

4 files changed

+57
-27
lines changed

4 files changed

+57
-27
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ const Template = (args) => (
3030

3131
export const _Box = Template.bind({})
3232

33+
export const Attrs = Template.bind({})
34+
Attrs.storyName = 'With custom Attributes'
35+
Attrs.args = {
36+
color: 'alert.base',
37+
'gv-criticalpath': 'true',
38+
'gv-hotelid': '1234',
39+
}
40+
3341
export const DisplayAndSize = Template.bind({})
3442
DisplayAndSize.storyName = 'Display and Size'
3543
DisplayAndSize.args = {

packages/core/src/Box/Box.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,16 @@ export type BoxProps = Omit<BorderRadiusProps, 'borderRadius'> &
9393
/**
9494
* @public
9595
*/
96-
export const Box: React.FC<BoxProps> = styled.div.attrs((props) => ({
97-
...borderRadiusAttrs(props),
98-
...boxShadowAttrs(props),
99-
}))`
96+
export const Box: React.FC<BoxProps> = styled.div
97+
.withConfig({
98+
shouldForwardProp: (prop, defaultValidatorFn) =>
99+
['gv-criticalpath', 'gv-hotelid'].includes(prop) || defaultValidatorFn(prop),
100+
})
101+
.attrs((props) => ({
102+
...props,
103+
...borderRadiusAttrs(props),
104+
...boxShadowAttrs(props),
105+
}))`
100106
${applyVariations('Box')}
101107
${color}
102108
${colorScheme}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,16 @@ export const Playground: ButtonStory = {
6262
},
6363
}
6464

65+
export const Attrs: ButtonStory = {
66+
render: () => (
67+
<StoryStage>
68+
<Button size='extraLarge' gv-criticalpath='true' gv-hotelid='1234'>
69+
Extra Large
70+
</Button>
71+
</StoryStage>
72+
),
73+
}
74+
6575
export const Size: ButtonStory = {
6676
render: () => (
6777
<StoryStage>

packages/core/src/Button/Button.tsx

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -317,31 +317,37 @@ function getPaddingProps({ IconLeft, IconRight, size, variation, hasChildren }:
317317
/**
318318
* Use the <Button /> component to render a primitive button. Use the `variation` prop to change the look of the button.
319319
*/
320-
const StyledButton: React.FC<StyledButtonProps> = styled.button.attrs((props) => {
321-
const {
322-
width,
323-
height,
324-
title,
325-
'aria-label': ariaLabel,
326-
borderRadius,
327-
IconLeft,
328-
IconRight,
329-
size,
330-
variation,
331-
hasChildren,
332-
} = props
320+
const StyledButton: React.FC<StyledButtonProps> = styled.button
321+
.withConfig({
322+
shouldForwardProp: (prop, defaultValidatorFn) =>
323+
['gv-criticalpath', 'gv-hotelid'].includes(prop) || defaultValidatorFn(prop),
324+
})
325+
.attrs((props) => {
326+
const {
327+
width,
328+
height,
329+
title,
330+
'aria-label': ariaLabel,
331+
borderRadius,
332+
IconLeft,
333+
IconRight,
334+
size,
335+
variation,
336+
hasChildren,
337+
} = props
333338

334-
const paddingProps = getPaddingProps({ IconLeft, IconRight, size, variation, hasChildren })
339+
const paddingProps = getPaddingProps({ IconLeft, IconRight, size, variation, hasChildren })
335340

336-
return {
337-
borderRadius,
338-
...boxShadowAttrs(props),
339-
width,
340-
height,
341-
'aria-label': ariaLabel || title,
342-
...paddingProps,
343-
}
344-
})`
341+
return {
342+
borderRadius,
343+
...boxShadowAttrs(props),
344+
width,
345+
height,
346+
'aria-label': ariaLabel || title,
347+
...props,
348+
...paddingProps,
349+
}
350+
})`
345351
${buttonStyles}
346352
347353
${(props) => compose(width, height, space, boxShadow)(props)}

0 commit comments

Comments
 (0)