diff --git a/package.json b/package.json index 3d8051c5fb0..0f6f08306ae 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ ], "dependencies": { "@babel/core": "^7.15.8", - "@carbon/charts-react": "0.50.8", + "@carbon/charts-react": "0.54.2", "@carbon/elements": "^10.46.0", "@carbon/icons": "^10.42.0", "@carbon/icons-react": "^10.42.0", @@ -49,8 +49,8 @@ "@slack/web-api": "^5.11.0", "babel-preset-env": "^1.7.0", "babel-preset-gatsby": "^1.14.0", - "carbon-components": "^10.47.1", - "carbon-components-react": "^7.47.2", + "carbon-components": "^10.50.0", + "carbon-components-react": "^7.50.0", "change-case": "^4.1.1", "classnames": "^2.2.6", "codesandbox": "^2.1.10", @@ -59,7 +59,7 @@ "gatsby": "^3.14.3", "gatsby-image": "^3.7.1", "gatsby-plugin-image": "^1.14.1", - "gatsby-theme-carbon": "^2.1.5", + "gatsby-theme-carbon": "^2.2.0", "lodash-es": "^4.17.15", "markdown-it": "^9.0.1", "nanoid": "^2.1.11", diff --git a/src/components/StatusIndicatorTable/StatusIndicator.module.scss b/src/components/StatusIndicatorTable/StatusIndicator.module.scss index 73399749f83..edd392576d6 100644 --- a/src/components/StatusIndicatorTable/StatusIndicator.module.scss +++ b/src/components/StatusIndicatorTable/StatusIndicator.module.scss @@ -6,7 +6,11 @@ .iconGroup { padding: 1rem; display: flex; - width: 50%; + width: 100%; + + @include carbon--breakpoint('lg') { + width: 50%; + } } .iconGroup.isDark { @@ -79,16 +83,43 @@ border-bottom: none; } -@media (max-width: 600px) { +.statusIndicatorTableWrapper { + margin-left: -1rem; + margin-right: -1rem; +} + +@include carbon--breakpoint-between('sm', 'lg') { .statusIndicatorTableWrapper { - margin-right: -1rem; - margin-left: -1rem; overflow: scroll; } - .iconGroup { - width: 100%; - } .iconGroup.isDark { display: none; } } + +//Needed for Safari +.statusIndicatorTableWrapper { + @include carbon--breakpoint('md') { + :global(.bx--col-md-1) { + width: 12.5%; + } + + :global(.bx--col-md-2) { + width: 25%; + } + + :global(.bx--col-md-3) { + width: 37.5%; + } + } + + @include carbon--breakpoint('lg') { + :global(.bx--col-lg-4) { + width: 33.333333%; + } + + :global(.bx--col-lg-2) { + width: 16.66667%; + } + } +} diff --git a/src/components/StatusIndicatorTable/StatusIndicatorTable.js b/src/components/StatusIndicatorTable/StatusIndicatorTable.js index 2e09cac038f..aa138dd18f9 100644 --- a/src/components/StatusIndicatorTable/StatusIndicatorTable.js +++ b/src/components/StatusIndicatorTable/StatusIndicatorTable.js @@ -18,18 +18,18 @@ import { const StatusIndicatorTable = ({ attention }) => (
- - - + + + Icon - + Name - + Token - + Description & usage diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 47fb0a750a8..f977d045daa 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -268,7 +268,6 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/heatmap.svg) diff --git a/src/pages/data-visualization/complex-charts/index.mdx b/src/pages/data-visualization/complex-charts/index.mdx index c7a89d62b6c..968a303ac81 100755 --- a/src/pages/data-visualization/complex-charts/index.mdx +++ b/src/pages/data-visualization/complex-charts/index.mdx @@ -74,18 +74,12 @@ or all negative. Sequential heat maps can leverage the full range of the palette (from 10–100) to maximize contrast. Please note that the 3:1 minimum contrast requirement does not apply to heat maps. - - - -![Sequential heat map](images/04_adv_heatmap_928.png) + When cells get extremely small, a white border can hinder the intended effect. - - - #### Heat map behaviors Axis ticks and legend can be used to leverage the chart potential giving the @@ -98,14 +92,6 @@ users additional information and dedicated kinds of interaction. Exploration of a domain axis hover behavior - - - - -![Heat map interactive legend detail](images/04b_adv_heatmap_detail_288.png) - -Exploration of an interactive legend - @@ -133,18 +119,6 @@ exceptions. The data for a divergent heat map does not need to be symmetrical on either side of the inflection point. For example, the data set could have a zero value between -20 and +100 as well. - - - -![Divergent heat map](images/05_adv_heatmap_928.png) - - - Example of a symmetrical divergent heat map with optional cell borders - - - - - ## Network diagrams A network diagram is a way of visually representing network architecture. It diff --git a/src/pages/designing/kits/figma.mdx b/src/pages/designing/kits/figma.mdx index 049f78ab89e..80cfe512f32 100644 --- a/src/pages/designing/kits/figma.mdx +++ b/src/pages/designing/kits/figma.mdx @@ -40,12 +40,30 @@ libraries. #### 2. Turn on the theme libraries -Inside of a design file, navigate to the **Asset** panel on the left and click -on the **Team library** icon in the upper right of the panel. Find the team -called `[NEW] IBM Design Systems` and switch the toggle beside -`White theme - Carbon Design System` to on. +Inside of a design file, navigate to the **Main menu** panel in the top left of +the toolbar (A). Open the menu and select **Libraries** from the list (B). -To view the actual library, visit this + + + +![figma instructions part 1](images/kit-figma-1.png) + + + + +Then in the Libraries modal that appears, find the team called +`[NEW] IBM Design Systems` (C) and switch the toggle beside +`White theme - Carbon Design System` to on (D). + + + + +![figma instructions part 2](images/kit-figma-2.png) + + + + +To preview the library, visit this [view-only link](https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/White-Theme---Carbon-Design-System?node-id=456%3A14680). #### 3. Turn on the other IBM Design Language libraries  diff --git a/src/pages/designing/kits/images/kit-figma-1.png b/src/pages/designing/kits/images/kit-figma-1.png new file mode 100644 index 00000000000..4c3ab3b1f47 Binary files /dev/null and b/src/pages/designing/kits/images/kit-figma-1.png differ diff --git a/src/pages/designing/kits/images/kit-figma-2.png b/src/pages/designing/kits/images/kit-figma-2.png new file mode 100644 index 00000000000..51f94b83622 Binary files /dev/null and b/src/pages/designing/kits/images/kit-figma-2.png differ diff --git a/src/pages/whats-happening/v11-release/images/carbon_2021-beta-2.png b/src/pages/whats-happening/v11-release/images/carbon_2021-beta-2.png new file mode 100644 index 00000000000..08107b0d023 Binary files /dev/null and b/src/pages/whats-happening/v11-release/images/carbon_2021-beta-2.png differ diff --git a/src/pages/whats-happening/v11-release/images/carbon_2021-beta-3.png b/src/pages/whats-happening/v11-release/images/carbon_2021-beta-3.png new file mode 100644 index 00000000000..39346635faa Binary files /dev/null and b/src/pages/whats-happening/v11-release/images/carbon_2021-beta-3.png differ diff --git a/src/pages/whats-happening/v11-release/index.mdx b/src/pages/whats-happening/v11-release/index.mdx index 573ef8d6b95..41c7516ee70 100644 --- a/src/pages/whats-happening/v11-release/index.mdx +++ b/src/pages/whats-happening/v11-release/index.mdx @@ -13,8 +13,10 @@ developers, and with no brand updates, no product redesigns are required. - To learn more about the v11 Beta Release head over to the{' '} - Migration guide overview page. + +**Note:** The Carbon v11 release is currently an alpha release. Be on the +lookout for the public preview release available in the coming months. + @@ -58,37 +60,37 @@ brand-driven product redesigns. -![Carbon v11 Beta 1](images/carbon_2021-beta-1.png) +![Carbon v11 Beta 3](images/carbon_2021-beta-3.png) -![Carbon’s 2021 release: April update](images/carbon_2021-april-update.png) +![Carbon v11 Beta 2](images/carbon_2021-beta-2.png) -![Carbon 2021 release](images/carbon_2021.png) +![Carbon v11 Beta 1](images/carbon_2021-beta-1.png) @@ -217,8 +219,9 @@ feedback. - A lot of the changes made will be name-based. -As part of IBM's front-end developer educational series, FEDucation, Josh Black -introduces the upcoming v11 release, its features, and how to get involved and -provide feedback. +- Some changes with components will require updating to the new component API. -