fix: v5 issues (#1431)

* fix: image spacing * fix: blockquote styles * fix: prop table display * fix: image gallery display * fix: markdown link with title
carbon-design-system · Feb 29, 2024 · c6f49be · c6f49be
1 parent d45b3e0
commit c6f49be
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 33 deletions.
diff --git a/packages/example/src/pages/components/Accordion.mdx b/packages/example/src/pages/components/Accordion.mdx
@@ -55,13 +55,13 @@ ligula tempor.
 
 <Title>AccordionItem</Title>
 
-| property        | propType | required | default                        | description                                                                         |
-| --------------- | -------- | -------- | ------------------------------ | ----------------------------------------------------------------------------------- |
-| title           | node     |          | 'title'                        | The accordion title                                                                 |
-| renderExpando   | func     |          | props => <button {...props} /> | The callback function to render the expando button. Can be a React component class. |
-| iconDescription | string   |          | 'Expand/Collapse'              | The description of the expando icon                                                 |
-| open            | bool     |          | false                          | `true` to open the expando                                                          |
-| onClick         | func     |          | () => {}                       | The handler of the massaged `click` event.                                          |
-| onHeadingClick  | func     |          | () => {}                       | The handler of the massaged `click` event on the heading.                           |
-| children        | node     |          |                                | Provide the contents of your AccordionItem                                          |
-| className       | string   |          |                                | Specify an optional className to be applied to the container node                   |
+| property        | propType | required | default                          | description                                                                         |
+| --------------- | -------- | -------- | -------------------------------- | ----------------------------------------------------------------------------------- |
+| title           | node     |          | 'title'                          | The accordion title                                                                 |
+| renderExpando   | func     |          | `props => <button {...props} />` | The callback function to render the expando button. Can be a React component class. |
+| iconDescription | string   |          | 'Expand/Collapse'                | The description of the expando icon                                                 |
+| open            | bool     |          | false                            | `true` to open the expando                                                          |
+| onClick         | func     |          | () => {}                         | The handler of the massaged `click` event.                                          |
+| onHeadingClick  | func     |          | () => {}                         | The handler of the massaged `click` event on the heading.                           |
+| children        | node     |          |                                  | Provide the contents of your AccordionItem                                          |
+| className       | string   |          |                                  | Specify an optional className to be applied to the container node                   |
diff --git a/packages/example/src/pages/components/markdown.mdx b/packages/example/src/pages/components/markdown.mdx
@@ -142,8 +142,7 @@ recommend using `h2` tags for section headings within your content.
 
 [I'm a markdown link](https://www.carbondesignsystem.com)
 
-[I'm a markdown link with title](https://www.carbondesignsystem.com 'Carbon's
-Homepage')
+[I'm a markdown link with title](https://www.carbondesignsystem.com "Carbon's Homepage")
 
 URLs and URLs in angle brackets will automatically get turned into links.
 `http://www.example.com` or `<http://www.example.com>` and sometimes example.com
@@ -154,8 +153,8 @@ URLs and URLs in angle brackets will automatically get turned into links.
 ```markdown src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/markdown
 [I'm a markdown link](https://www.carbondesignsystem.com)
 
-[I'm a markdown link with title](https://www.carbondesignsystem.com 'Google's
-Homepage')
+[I'm a markdown link with title](https://www.carbondesignsystem.com "Carbon's
+Homepage")
 
 [I'm a local link](/components/demo)
 

diff --git a/packages/example/src/pages/guides/v4-migration.mdx b/packages/example/src/pages/guides/v4-migration.mdx
@@ -59,3 +59,18 @@ equivalent if your project uses `npm` as its package manager.
 The following is still being updated.
 
 </InlineNotification>
+
+Markdown link with title needs double quotes
+
+this works
+
+```
+[I'm a markdown link with title](https://www.carbondesignsystem.com "Carbon's Homepage")
+```
+
+this does not
+
+```
+[I'm a markdown link with title](https://www.carbondesignsystem.com 'Carbon's
+Homepage')
+```
diff --git a/packages/gatsby-theme-carbon/src/components/ImageGallery/ImageGallery.module.scss b/packages/gatsby-theme-carbon/src/components/ImageGallery/ImageGallery.module.scss
@@ -20,6 +20,10 @@ $z-02: 2;
   width: 100%;
   background: rgba(0, 0, 0, 0.9);
   overflow: hidden;
+
+  span {
+    width: 100%;
+  }
 }
 
 .gallery-grid {

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
@@ -155,28 +155,30 @@ ul :global(.cds--list--unordered) {
 //---------------------------------------
 // Blockquote
 //---------------------------------------
-.blockquote {
-  margin: $spacing-08 0;
-  color: $text-01;
-  margin-left: $spacing-05;
-  padding-left: 1ch;
-  @include breakpoint('md') {
-    margin-left: $spacing-08;
+div {
+  .blockquote {
+    margin: $spacing-08 0;
+    color: $text-01;
+    margin-left: $spacing-05;
+    padding-left: 1ch;
+    @include breakpoint('md') {
+      margin-left: $spacing-08;
+    }
   }
-}
 
-.blockquote .paragraph {
-  position: relative;
-  @include type-style('expressive-heading-03', true);
-  font-style: italic;
-  margin-bottom: 0;
-  width: 100%;
-}
+  .blockquote .paragraph {
+    position: relative;
+    @include type-style('expressive-heading-03', true);
+    font-style: italic;
+    margin-bottom: 0;
+    width: 100%;
+  }
 
-.blockquote .paragraph--responsive {
-  // 8 col
-  @include breakpoint('lg') {
-    width: calc(66.667% - 3rem);
+  .blockquote .paragraph--responsive {
+    // 8 col
+    @include breakpoint('lg') {
+      width: calc(66.667% - 3rem);
+    }
   }
 }
 
@@ -264,3 +266,7 @@ ul :global(.cds--list--unordered) {
 img {
   display: block;
 }
+
+span:has(:global(.gatsby-resp-image-wrapper)) {
+  display: block;
+}