From 566cfe77f4a7489e5f300eb0e94f64aebf3ee2f6 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Thu, 28 Oct 2021 11:21:14 -0500 Subject: [PATCH 01/44] fix: medium post image aspect ratio closes #1176 (#1185) * fix: medium post image aspect ratio closes #1176 * fix: only add background to the bottom half of article cards --- .../src/components/ArticleCard/ArticleCard.js | 13 +++++++---- .../components/ArticleCard/article-card.scss | 17 ++++++++++---- .../MediumPosts/MediumPosts.module.scss | 23 +++---------------- 3 files changed, 23 insertions(+), 30 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js b/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js index 907075a4e..9ad0214d9 100755 --- a/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js +++ b/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js @@ -45,9 +45,10 @@ export default class ArticleCard extends React.Component { [`${prefix}--aspect-ratio--2x1`] ); - const carbonTileclassNames = cx( + const cardContentClassNames = cx( [`${prefix}--tile`], - [`${prefix}--tile--clickable`] + [`${prefix}--tile--clickable`], + [`${prefix}--article-card_content`] ); const cardContent = ( @@ -101,16 +102,18 @@ export default class ArticleCard extends React.Component { let cardContainer; if (disabled === true) { - cardContainer =
{cardContent}
; + cardContainer = ( +
{cardContent}
+ ); } else if (isLink === true) { cardContainer = ( - + {cardContent} ); } else { cardContainer = ( - + {cardContent} ); diff --git a/packages/gatsby-theme-carbon/src/components/ArticleCard/article-card.scss b/packages/gatsby-theme-carbon/src/components/ArticleCard/article-card.scss index a83ba542f..2d6b1c46b 100644 --- a/packages/gatsby-theme-carbon/src/components/ArticleCard/article-card.scss +++ b/packages/gatsby-theme-carbon/src/components/ArticleCard/article-card.scss @@ -10,7 +10,7 @@ } } -.#{$prefix}--article-card:hover .#{$prefix}--tile { +.#{$prefix}--article-card:hover .#{$prefix}--article-card__tile { background: $hover-ui; } @@ -43,6 +43,13 @@ @include carbon--type-style('caption-01'); } +// At the moment, we force 16:9 for medium posts, this +// is how we would force 16:9 for all article cards +// +// .#{$prefix}--article-card__img { +// aspect-ratio: 16 / 9; +// } + .#{$prefix}--article-card__img .gatsby-resp-image-wrapper { margin-bottom: 0; } @@ -60,11 +67,11 @@ } // Dark -.#{$prefix}--article-card--dark .#{$prefix}--tile { +.#{$prefix}--article-card--dark .#{$prefix}--article-card__tile { background: $carbon--gray-90; //$ui-background for gray 90 theme } -.#{$prefix}--article-card--dark:hover .#{$prefix}--tile { +.#{$prefix}--article-card--dark:hover .#{$prefix}--article-card__tile { background: $carbon--gray-80; //$hover-ui for gray 90 theme } @@ -86,7 +93,7 @@ cursor: not-allowed; } -.#{$prefix}--article-card--disabled .#{$prefix}--tile:hover { +.#{$prefix}--article-card--disabled .#{$prefix}--article-card__tile:hover { background: $ui-01; cursor: not-allowed; } @@ -105,7 +112,7 @@ // Disabled dark .#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark - .#{$prefix}--tile:hover { + .#{$prefix}--article-card__tile:hover { background: $carbon--gray-90; //$ui-background for gray 90 theme } diff --git a/packages/gatsby-theme-carbon/src/components/MediumPosts/MediumPosts.module.scss b/packages/gatsby-theme-carbon/src/components/MediumPosts/MediumPosts.module.scss index bbcb3959c..566520be8 100644 --- a/packages/gatsby-theme-carbon/src/components/MediumPosts/MediumPosts.module.scss +++ b/packages/gatsby-theme-carbon/src/components/MediumPosts/MediumPosts.module.scss @@ -1,11 +1,7 @@ // Fixes the gutter of the article cards on the homepage .card-container { - padding-right: 0; - padding-left: 0; - @include carbon--breakpoint('md') { - padding-right: 1rem; - padding-left: 1rem; - } + padding-right: 1rem; + padding-left: 1rem; } // Fixs the breaking type @@ -40,18 +36,5 @@ .image { object-fit: cover; - width: 100%; - - @include carbon--breakpoint('sm') { - height: 315px; - } - @include carbon--breakpoint('md') { - height: 290px; - } - @include carbon--breakpoint('lg') { - height: 165px; - } - @include carbon--breakpoint('xlg') { - height: 215px; - } + aspect-ratio: 16 / 9; } From 9a44a87b8958c5a790e1c5726a341e31e4a5ae63 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 28 Oct 2021 12:07:38 -0500 Subject: [PATCH 02/44] fix: grid alignment at max breakpoint (#1181) * fix: grid alignment at max breakpoint * fix: update to 424px because math * fix: grid at large xlg breakpoint --- .../src/components/Code/Code.module.scss | 2 +- .../src/components/FeatureCard/feature-card.scss | 4 ---- .../src/components/FourOhFour/FourOhFour.module.scss | 10 +++++----- .../src/components/Homepage/Banner.js | 1 + .../src/components/Homepage/Callout.module.scss | 2 +- .../src/components/Homepage/homepage.scss | 7 +++---- .../gatsby-theme-carbon/src/styles/internal/_page.scss | 10 +++------- 7 files changed, 14 insertions(+), 22 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Code/Code.module.scss b/packages/gatsby-theme-carbon/src/components/Code/Code.module.scss index 8e4bdae08..ac8aee3d2 100644 --- a/packages/gatsby-theme-carbon/src/components/Code/Code.module.scss +++ b/packages/gatsby-theme-carbon/src/components/Code/Code.module.scss @@ -36,7 +36,7 @@ @include carbon--type-style('code-02'); width: calc(100% + 2rem); @include carbon--breakpoint('lg') { - width: calc(67% + 1rem); + width: calc(67% + 1.15rem); } } diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss index 424aa89ee..bfa7c1b32 100644 --- a/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss +++ b/packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss @@ -17,10 +17,6 @@ 100% + 2rem ); //needed to make the row the same width as other rows with the negative margins } - - @include carbon--breakpoint('max') { - width: calc(100% + 1rem); - } } .#{$prefix}--feature-card__img { diff --git a/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss index 5c34bd9c9..e7809cbfe 100644 --- a/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss +++ b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss @@ -16,6 +16,10 @@ animation: gradient 2s ease infinite; } +:global(.container--dark) .link { + color: $carbon--gray-10; +} + .list .link { @include carbon--type-style('body-short-02'); margin-bottom: $spacing-03; @@ -43,10 +47,6 @@ } } -:global(.container--dark) .link { - color: $carbon--gray-10; -} - .paragraph { @include carbon--type-style('body-long-01'); font-size: 1.25rem; @@ -75,7 +75,7 @@ } @include carbon--breakpoint('max') { - padding-left: 400px; + padding-left: 424px; } } diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js b/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js index b16b62c96..4918c9cdd 100644 --- a/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js +++ b/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js @@ -6,6 +6,7 @@ const HomepageBanner = ({ image, position, renderText }) => ( Date: Thu, 28 Oct 2021 12:49:00 -0500 Subject: [PATCH 03/44] chore: release 2.1.5 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- packages/example/package.json | 4 ++-- packages/gatsby-theme-carbon/package.json | 2 +- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6b411dd7..78f998ea0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +### [2.1.5](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4...v2.1.5) (2021-10-28) + + +### Bug Fixes + +* grid alignment at max breakpoint ([#1181](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1181)) ([9a44a87](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/9a44a87b8958c5a790e1c5726a341e31e4a5ae63)) +* medium post image aspect ratio closes [#1176](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1176) ([#1185](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1185)) ([566cfe7](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/566cfe77f4a7489e5f300eb0e94f64aebf3ee2f6)) + ### [2.1.4](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4-next.0...v2.1.4) (2021-10-19) ### [2.1.4-next.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.3...v2.1.4-next.0) (2021-10-19) diff --git a/package.json b/package.json index a24e13ae5..a2c786ec0 100644 --- a/package.json +++ b/package.json @@ -102,5 +102,5 @@ "stylelint-scss": "^3.16.0", "yarn": "^1.22.4" }, - "version": "2.1.4" + "version": "2.1.5" } diff --git a/packages/example/package.json b/packages/example/package.json index a3066d033..62f24e1fc 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "private": true, - "version": "2.1.4", + "version": "2.1.5", "license": "Apache 2.0", "scripts": { "dev": "gatsby develop -H 0.0.0.0", @@ -13,7 +13,7 @@ }, "dependencies": { "gatsby": "^3.3.1", - "gatsby-theme-carbon": "^2.1.4", + "gatsby-theme-carbon": "^2.1.5", "react": "^17.0.2", "react-dom": "^17.0.2" } diff --git a/packages/gatsby-theme-carbon/package.json b/packages/gatsby-theme-carbon/package.json index 2d2a7e3ce..f30d60779 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/packages/gatsby-theme-carbon/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-theme-carbon", - "version": "2.1.4", + "version": "2.1.5", "main": "index.js", "author": "vpicone (@vpicone)", "repository": { From 3ca8b4dd6a7a5cd97d558199e746d4f652f4a78e Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 18 Nov 2021 20:56:42 -0600 Subject: [PATCH 04/44] Update CODEOWNERS (#1190) --- .github/CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a785b1def..e97904b29 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1 @@ -* @carbon-design-system/developers-auxiliary \ No newline at end of file +* @carbon-design-system/developers-carbon-brand From 00817e4aa5149b2d124deceaaf3de407b1e8fe6a Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 30 Nov 2021 10:43:10 -0600 Subject: [PATCH 05/44] Update v2-migration.mdx (#1193) * Update v2-migration.mdx * update docs --- packages/example/src/pages/guides/v2-migration.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/example/src/pages/guides/v2-migration.mdx b/packages/example/src/pages/guides/v2-migration.mdx index 9c3979653..7f5a719b0 100644 --- a/packages/example/src/pages/guides/v2-migration.mdx +++ b/packages/example/src/pages/guides/v2-migration.mdx @@ -43,9 +43,9 @@ equivalent if your project uses `npm` as its package manager. -1. Update Gatsby +1. Update Gatsby to v3 ``` - yarn add gatsby@latest + yarn add gatsby@latest-v3 ``` 2. Update gatsby plugins (including the theme) ``` From d9d4e010a7c9246690c1fe46a3adc2d9e958d49a Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 2 Dec 2021 13:17:02 -0600 Subject: [PATCH 06/44] Update Switcher.js (#1192) --- .../gatsby-theme-carbon/src/components/Switcher/Switcher.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js index de9072b61..97047fd91 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js @@ -123,8 +123,8 @@ const DefaultChildren = () => ( - IBM Universal Experiences + href="https://w3.ibm.com/design/experience-standards/"> + IBM Experience Standards Community From 8966ddf86abf0bbdb7626bf19ddbfa6c53072bb6 Mon Sep 17 00:00:00 2001 From: Ale Davila Date: Fri, 3 Dec 2021 11:21:24 -0600 Subject: [PATCH 07/44] chore: release 2.1.6 --- CHANGELOG.md | 2 ++ package.json | 2 +- packages/example/package.json | 4 ++-- packages/gatsby-theme-carbon/package.json | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78f998ea0..b76f01617 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +### [2.1.6](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.5...v2.1.6) (2021-12-03) + ### [2.1.5](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4...v2.1.5) (2021-10-28) diff --git a/package.json b/package.json index a2c786ec0..5cc2e0af8 100644 --- a/package.json +++ b/package.json @@ -102,5 +102,5 @@ "stylelint-scss": "^3.16.0", "yarn": "^1.22.4" }, - "version": "2.1.5" + "version": "2.1.6" } diff --git a/packages/example/package.json b/packages/example/package.json index 62f24e1fc..dc4da9ecb 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "private": true, - "version": "2.1.5", + "version": "2.1.6", "license": "Apache 2.0", "scripts": { "dev": "gatsby develop -H 0.0.0.0", @@ -13,7 +13,7 @@ }, "dependencies": { "gatsby": "^3.3.1", - "gatsby-theme-carbon": "^2.1.5", + "gatsby-theme-carbon": "^2.1.6", "react": "^17.0.2", "react-dom": "^17.0.2" } diff --git a/packages/gatsby-theme-carbon/package.json b/packages/gatsby-theme-carbon/package.json index f30d60779..f8d2041ad 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/packages/gatsby-theme-carbon/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-theme-carbon", - "version": "2.1.5", + "version": "2.1.6", "main": "index.js", "author": "vpicone (@vpicone)", "repository": { From b858aa660c8849c192f88bc4ee9f825ede9e2dc5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 Dec 2021 09:13:54 -0600 Subject: [PATCH 08/44] build(deps): bump semver-regex from 3.1.2 to 3.1.3 (#1196) Bumps [semver-regex](https://github.com/sindresorhus/semver-regex) from 3.1.2 to 3.1.3. - [Release notes](https://github.com/sindresorhus/semver-regex/releases) - [Commits](https://github.com/sindresorhus/semver-regex/commits) --- updated-dependencies: - dependency-name: semver-regex dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 443ec0736..d032b0145 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16312,9 +16312,9 @@ semver-diff@^3.1.1: semver "^6.3.0" semver-regex@^3.1.2: - version "3.1.2" - resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807" - integrity sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA== + version "3.1.3" + resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.3.tgz#b2bcc6f97f63269f286994e297e229b6245d0dc3" + integrity sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ== "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1: version "5.7.1" From 8a4dd50c4d81eef57b98891c14bd00b8c2d5dace Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 7 Jan 2022 11:32:28 -0600 Subject: [PATCH 09/44] fix: aside docs (#1202) --- packages/example/src/pages/components/Aside.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/example/src/pages/components/Aside.mdx b/packages/example/src/pages/components/Aside.mdx index f561759c9..2b2926653 100644 --- a/packages/example/src/pages/components/Aside.mdx +++ b/packages/example/src/pages/components/Aside.mdx @@ -103,8 +103,8 @@ attitudes and approach used at the time. Without hanging rule ```mdx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Aside - -