Skip to content

Releases: carbon-design-system/gatsby-theme-carbon

v1.3.1

25 Jun 15:24
Compare
Choose a tag to compare

Fixes:

  • caption widths
  • leftnav icon logic
  • fix ordered lists >10
  • dynamic positioning of homepage banner
  • broken slugs

v1.3.0

20 Jun 02:49
Compare
Choose a tag to compare

New

gatsby-theme-carbon/styles/_global.scss

You can inject global styles into the theme's style bundle by shadowing gatsby-theme-carbon/styles/_global.scss in your project's src directory. This technique is especially useful for node_module dependencies that assume a single bundle (such as individual carbon-components).

For your application's local styles, you can just import your style sheet directly into a gatsby-browser.js file at the root of your project.

TLDR

  • If needed, shadow _global.scss to inject global dependencies such as individual carbon-components
  • _global.scss does nothing if it's not shadowed
  • _global.scss gets injected after our globals but before theme styles.

Bug fixes

  • markdown paragraph widths #185
  • more flexible first-child in markdown content + semantic markdown guidelines #181

v1.2.1

18 Jun 11:59
Compare
Choose a tag to compare

Update margin bottom on some components. Update research link in switcher.

v1.2.0

14 Jun 03:27
Compare
Choose a tag to compare

New

  • Video component enhancements #160

    • You can now use local videos from your static directory
    • You can also add posters/subtitle files to these local videos
  • We separated the MDXProvider from the components. A shadowed MDXProvider will now receive the default components as props. This allows the users to spread the default components into a new object and override individual components #170

  • The markdown components now use sass modules and have their styles colocated in a single file. #170

  • Since the h1 role effectively consumed by the page header, we now style h1 tags the same as h2 tags with one exception: h1 components have no margin-top. This means the start of your content should be either a PageDescription or an h1 tag (single #).

    We recommend the former strategy. For most content, we think PageDescriptionAnchorLinks creates a nice hierarchy.

Fixes

  • Fixes left nav active state logic for tabs #167
  • Small bug fixes to prop-types #161 and DoDontExample images #164
  • Switcher wouldn't open after scrolling down and switcher svg icons were misaligned #171

v1.1.1

07 Jun 19:04
Compare
Choose a tag to compare

This pins carbon to v10.2 and 7.2 due to some ui-shell and tabs issues

v1.1.0

07 Jun 16:38
Compare
Choose a tag to compare

@channel we just published v1.1.0 That allows you to enable and configure WebP image processing (it’s disabled by default). This dramatically improves image performance on browsers that support it.

But primarily it activates the AI link in the the website-switcher. Congrats to @lhumphrey and the folks on AI for the first public use of the theme. You can check it out here, or click the link in the switcher ;)

https://www.ibm.com/design/ai/

v1.0.1

04 Jun 21:47
Compare
Choose a tag to compare

Fixed: Multiple Sidebar items active simultaneously #44

v1.0.0

31 May 16:32
Compare
Choose a tag to compare

New since pre-release

  • Side-nav and page-tab scrolling
  • homepage alignment fixes
  • body copy length adjustments
  • add italic plex + document italics

New in v1.0.0

  • Add metadata from siteMetadata

This will automatically inject a title, description and keywords into the head of your document. Simply provide them to siteMetadata in your gatsby-config.js file.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Theme Carbon',
    description: 'A Gatsby theme for the carbon design system',
    keywords: 'gatsby,theme,carbon',
  },
  __experimentalThemes: [
    {
      resolve: 'gatsby-theme-carbon',
    },
  ],
};
  • All of our components are global now, if it comes from us you don't need to import it at the top of your .mdx files

    	~~`import { PageDescription, Row, Column } from 'gatsby-theme-carbon'`~~
    
  • Add Link styles to markdown w/ support for local links
  • Added manifest config to example w/ docs
  • Add default favicon
  • Update sass build: blazing fast hot module reloading and smaller bundle size
  • gatsby-image: higher default image quality, and WebP for browsers that support it
  • Tabs component!

Screen Shot 2019-05-30 at 9 46 42 PM

Breaking

Two possible breaking changes:

  1. If you were using the theme options to configure some manifest options (name, short_name, short_url, background/theme color) the preferred method is to now pass those options into the manifest plugin itself. We were just passing them in for you anyway.

    This configuration is demonstrated in the example project.

  2. If you're using a carbon-components-react component for your own custom components, you'll need to import the styles for that component.

    While you can just include the entire css stylesheet from carbon-components, we recommend importing just the component you need (example below). You can read more about importing Carbon's individual components' styles from our medium post here.

    The new Link component demonstrates this pattern.

v1.0.0-alpha.0

31 May 02:54
Compare
Choose a tag to compare
v1.0.0-alpha.0 Pre-release
Pre-release
v1.0.0-alpha.0

v0.7.0

28 May 23:48
Compare
Choose a tag to compare

Bug fixes

  • Overlay and navigation state improvements
  • Alignment fixes for Cards and Footer
  • PageHeader height adjustments

Features

  • ImageCard – Customizable image block for assembling stylized groups of links
  • New Switcher with updated default links and styles
  • ArticleCard subtitle
  • Email Icon for all cards
  • Global Search custom hook interface
  • New example doc pages for components
  • Add support for Plex special characters and additional font weights
  • Advanced configuration and shadowing guides
    • 404 implementation
    • Modifying image compression
    • Global Search
    • Extra font weights

Breaking changes

  • Global Search is disabled by default, you'll need to turn it on and configure a custom hook for your chose search provider
  • If you've shadowed/overridden components previously to accommodate for spacing issues, give the new, native, updates a try.