Button: Do not add [data-size="medium"]` when size is explicitly specified as medium (#2929)

* Do not add data attribute for medium size

* add changeset

* add comment that I accidently deleted

Author: broccolinisoup

.changeset/calm-moons-serve.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Button: Fixes the style override issue when size is explicitly specified as medium

src/Button/Button.dev.stories.tsx

@@ -38,6 +38,14 @@ export const TestSxProp = () => {
   const count = 4
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button
+        size="medium"
+        sx={{
+          color: 'deeppink',
+        }}
+      >
+        Medium Pink
+      </Button>
       <Button
         size="small"
         sx={{

src/Button/Button.tsx

@@ -67,7 +67,7 @@ export function generateCustomSxProp(
   providedSx: BetterSystemStyleObject,
 ) {
   // Possible data attributes: data-size, data-block, data-no-visuals
-  const size = props.size ? `[data-size="${props.size}"]` : ''
+  const size = props.size && props.size !== 'medium' ? `[data-size="${props.size}"]` : '' // medium is a default size therefore it doesn't have a data attribute that used for styling
   const block = props.block ? `[data-block="block"]` : ''
   const noVisuals = props.leadingIcon || props.trailingIcon || props.trailingAction ? '' : '[data-no-visuals="true"]'