From 00a130a52e5866a7dc87c8577460606a506fa2cc Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 11 May 2022 14:57:42 +1000 Subject: [PATCH 1/2] Button, ButtonLink: Ensure bleedY backwards compat for transparent variant (#1106) --- .changeset/spicy-poems-visit.md | 13 +++++++++++++ lib/components/Button/Button.screenshots.tsx | 16 ++++++++++++++++ lib/components/Button/Button.tsx | 6 ++---- lib/components/ButtonLink/ButtonLink.tsx | 12 ++++++++---- 4 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 .changeset/spicy-poems-visit.md diff --git a/.changeset/spicy-poems-visit.md b/.changeset/spicy-poems-visit.md new file mode 100644 index 00000000000..9885fc2e88c --- /dev/null +++ b/.changeset/spicy-poems-visit.md @@ -0,0 +1,13 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Button + - ButtonLink +--- + +**Button, ButtonLink:** Ensure `bleedY` is backwards compatibile for `transparent` variant + +Ensure that `bleedY` applies bleed only vertically on `transparent` variant, isolating the new horizontal bleed to the new `bleed` prop exclusively. diff --git a/lib/components/Button/Button.screenshots.tsx b/lib/components/Button/Button.screenshots.tsx index 7bee3226c92..591fa1865fd 100644 --- a/lib/components/Button/Button.screenshots.tsx +++ b/lib/components/Button/Button.screenshots.tsx @@ -120,6 +120,22 @@ export const screenshots: ComponentScreenshot = { ), }, + { + label: 'With legacy bleedY (transparent)', + background: 'surface', + Example: () => ( + + + Heading + + + + + + ), + }, { label: 'With full bleed (transparent)', background: 'surface', diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx index 008eca216aa..e655a3fab2d 100644 --- a/lib/components/Button/Button.tsx +++ b/lib/components/Button/Button.tsx @@ -445,7 +445,7 @@ export const Button = forwardRef( tone, icon, bleedY, - bleed: bleedProp, + bleed, variant, loading, type = 'button', @@ -461,8 +461,6 @@ export const Button = forwardRef( }, 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( variant, tone, size, - bleed, + bleed: bleed || bleedY, loading, })} > diff --git a/lib/components/ButtonLink/ButtonLink.tsx b/lib/components/ButtonLink/ButtonLink.tsx index 134b45f279c..84802bae7af 100644 --- a/lib/components/ButtonLink/ButtonLink.tsx +++ b/lib/components/ButtonLink/ButtonLink.tsx @@ -33,7 +33,7 @@ export const ButtonLink = forwardRef( tone, variant, bleedY, - bleed: bleedProp, + bleed, icon, loading, data, @@ -43,8 +43,6 @@ export const ButtonLink = forwardRef( ) => { 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( ref={ref} {...restProps} {...(data ? buildDataAttributes(data) : undefined)} - {...useButtonStyles({ variant, tone, size, bleed, loading })} + {...useButtonStyles({ + variant, + tone, + size, + bleed: bleed || bleedY, + loading, + })} > From cfc4f2addadfaf9f9bfafa907ab39b2ef8a725dd Mon Sep 17 00:00:00 2001 From: seek-oss-ci <34733141+seek-oss-ci@users.noreply.github.com> Date: Wed, 11 May 2022 15:19:22 +1000 Subject: [PATCH 2/2] Version Packages (#1107) --- .changeset/spicy-poems-visit.md | 13 ------------- CHANGELOG.md | 8 ++++++++ package.json | 2 +- site/src/componentUpdates.json | 12 ++++++++++++ 4 files changed, 21 insertions(+), 14 deletions(-) delete mode 100644 .changeset/spicy-poems-visit.md diff --git a/.changeset/spicy-poems-visit.md b/.changeset/spicy-poems-visit.md deleted file mode 100644 index 9885fc2e88c..00000000000 --- a/.changeset/spicy-poems-visit.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -'braid-design-system': patch ---- - ---- -updated: - - Button - - ButtonLink ---- - -**Button, ButtonLink:** Ensure `bleedY` is backwards compatibile for `transparent` variant - -Ensure that `bleedY` applies bleed only vertically on `transparent` variant, isolating the new horizontal bleed to the new `bleed` prop exclusively. diff --git a/CHANGELOG.md b/CHANGELOG.md index 21a66bc764d..44aaf9f4508 100644 --- 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/package.json b/package.json index 92ee6d2dea1..521dfb9e1e9 100644 --- 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 index 818525db2dc..a832c428b35 100644 --- 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 \n Button\n \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." + } + ] } ]