Merge branch 'master' into radioitem-disable

seek-oss · May 13, 2022 · 68435de · 68435de
2 parents 157df4b + cfc4f2a
commit 68435de
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # braid-design-system
 
+## 31.11.1
+
+### Patch Changes
+
+- **Button, ButtonLink:** Ensure `bleedY` is backwards compatibile for `transparent` variant ([#1106](https://github.com/seek-oss/braid-design-system/pull/1106))
+
+  Ensure that `bleedY` applies bleed only vertically on `transparent` variant, isolating the new horizontal bleed to the new `bleed` prop exclusively.
+
 ## 31.11.0
 
 ### Minor Changes

diff --git a/lib/components/Button/Button.screenshots.tsx b/lib/components/Button/Button.screenshots.tsx
@@ -120,6 +120,22 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'With legacy bleedY (transparent)',
+      background: 'surface',
+      Example: () => (
+        <Box background="neutralLight" borderRadius="standard" padding="gutter">
+          <Box background="surface">
+            <Heading level="2">Heading</Heading>
+            <Inline space="none">
+              <Button bleedY variant="transparent">
+                Button
+              </Button>
+            </Inline>
+          </Box>
+        </Box>
+      ),
+    },
     {
       label: 'With full bleed (transparent)',
       background: 'surface',

diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
@@ -445,7 +445,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       tone,
       icon,
       bleedY,
-      bleed: bleedProp,
+      bleed,
       variant,
       loading,
       type = 'button',
@@ -461,8 +461,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const bleed = bleedProp || bleedY;
-
     if (process.env.NODE_ENV !== 'production') {
       if (typeof bleedY !== 'undefined') {
         // eslint-disable-next-line no-console
@@ -502,7 +500,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             variant,
             tone,
             size,
-            bleed,
+            bleed: bleed || bleedY,
             loading,
           })}
         >

diff --git a/lib/components/ButtonLink/ButtonLink.tsx b/lib/components/ButtonLink/ButtonLink.tsx
@@ -33,7 +33,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       tone,
       variant,
       bleedY,
-      bleed: bleedProp,
+      bleed,
       icon,
       loading,
       data,
@@ -43,8 +43,6 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
   ) => {
     const LinkComponent = useLinkComponent(ref);
 
-    const bleed = bleedProp || bleedY;
-
     if (process.env.NODE_ENV !== 'production') {
       if (typeof bleedY !== 'undefined') {
         // eslint-disable-next-line no-console
@@ -70,7 +68,13 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           ref={ref}
           {...restProps}
           {...(data ? buildDataAttributes(data) : undefined)}
-          {...useButtonStyles({ variant, tone, size, bleed, loading })}
+          {...useButtonStyles({
+            variant,
+            tone,
+            size,
+            bleed: bleed || bleedY,
+            loading,
+          })}
         >
           <ButtonOverlays variant={variant} tone={tone} />
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "31.11.0",
+  "version": "31.11.1",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "sideEffects": [

diff --git a/site/src/componentUpdates.json b/site/src/componentUpdates.json
@@ -2503,5 +2503,17 @@
         "summary": "**Button, ButtonLink:** Improve Button `bleed`\n\nPreviously the `bleedY` prop allowed the background of `Button` to bleed vertically into the surrounding layout. This worked well for all variants except `transparent`, which needed to bleed horizontally as well.\n\nTo support this we have introduced the `bleed` prop which will apply the bleed based on the `variant`. We have also deprecated `bleedY` which will be removed in a future release.\n\n\n**EXAMPLE USAGE:**\n```diff\n <Button\n-  bleedY\n+  bleed\n   {...}\n >\n   Button\n </Button>\n```\n\n**MIGRATION GUIDE**\n\nMigration from `bleedY` to `bleed` can be automated by running the Braid upgrade command, passing the `v31.11` version. You must provide a glob to target your project’s source files. For example:\n\n```\nyarn braid-upgrade v31.11 \"**/*.{ts,tsx}\"\n```\n\nIt is recommended to visually review the any `Button` usage with the `transparent` variant, to ensure the layout is as expected."
       }
     ]
+  },
+  {
+    "version": "31.11.1",
+    "updates": [
+      {
+        "updated": [
+          "Button",
+          "ButtonLink"
+        ],
+        "summary": "**Button, ButtonLink:** Ensure `bleedY` is backwards compatibile for `transparent` variant\n\nEnsure that `bleedY` applies bleed only vertically on `transparent` variant, isolating the new horizontal bleed to the new `bleed` prop exclusively."
+      }
+    ]
   }
 ]