Fluid pattern v2 (#3382)

* Modal accessibility content and images (#3303)

* Modal accessibility content and images

* Update accessibility.mdx

MIssed saving updates

* Update accessibility.mdx

updating bullets in dev section

* Update accessibility.mdx

updates to correct typos and and a subheading

* Update accessibility.mdx

Adjustments to dev considerations

* Update to Do Don't pair

* Update modal-accessibility-3.png

added 2-button example

* chore(format): fix format error

* update images

* Update src/pages/components/modal/accessibility.mdx

Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com>

* update images

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com>

* Compressed Images (#3321)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* Compressed Images (#3323)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* typo fix (#3324)

* typo fix

unnecessary parenthesis

* fix(form-patterns): ran yarn format (#3326)

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* typo fix (#3325)

* typo fix

There is an unnecessary period in the description under the default variant of data table.

* fix: format

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Update tooltip accessibility.mdx (#3318)

* Update accessibility.mdx

* added first images

* Update accessibility.mdx

removed flotsam from the copy and paste exercise

* Update accessibility.mdx

tweak spacing

* Update accessibility.mdx

* Update accessibility.mdx

modifications for better readability

* Update accessibility.mdx

corrected link target

* Update tooltip-accessibility-2.png

* Update accessibility.mdx

attempting to resolved error

* Update accessibility.mdx

* chore: format mdx

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Tooltip accessibility update (#3330)

* Update accessibility.mdx

* added first images

* Update accessibility.mdx

removed flotsam from the copy and paste exercise

* Update accessibility.mdx

tweak spacing

* Update accessibility.mdx

* Update accessibility.mdx

modifications for better readability

* Update accessibility.mdx

corrected link target

* Update tooltip-accessibility-2.png

* Update accessibility.mdx

attempting to resolved error

* Update accessibility.mdx

* text and image changes for design annotations

* chore(prettier): output of yarn:format

* chore(prettier): output of yarn:format

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* update usage image (#3331)

* added fourth accessibility tab to toggletip (#3319)

* added fourth tab

* Create accessibility.mdx

First draft of accessibility tab content

* Update accessibility.mdx

updated content

* Update accessibility.mdx

remove space

* Update accessibility.mdx

* Update accessibility.mdx

* images and accessibility content

* updates

update image; remove link to non-existing Design section

* Update accessibility.mdx

alter leading description and what carbon provides

* Update accessibility.mdx

add Oxford comma

* Update accessibility.mdx

updated alts for images

* update images

* chore(formatting): output of yarn format

* Update accessibility.mdx

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* chore(release): update carbon deps (#3335)

Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>

* chore(deps): bump json5 from 1.0.1 to 1.0.2 (#3338)

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](json5/json5@v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Compressed Images (#3340)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* update .mdx (#3337)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs: tooltip a11y tab update (#3336)

* update .mdx

* update images

* fix merge conflict

* update a11y tab

* fix(tooltip): remove unused images

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* Compressed Images (#3349)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* updating the color tokens on the color page (#3345)

* chore(release): update carbon deps (#3350)

Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>

* chore(release): update carbon deps (#3355)

Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>

* Update link to 2x grid page (#3358)

The form patterns page currently uses an outdated link to the 2x grid page, resulting in a 404 not found.

This patch updates the link to the correct route.

* Dropdown accessibility (#3353)

* Update accessibility.mdx

* Update accessibility.mdx

Added comboxbox info

* added images

* Update accessibility.mdx

Updated content

* Updated image and some text content

* Update accessibility.mdx

trying to fix final link

* updated images

replaced with @laurenmrice versions

* Update accessibility.mdx

removed blank line before closed caption tag to try to address text styling

* Update accessibility.mdx

Removing "press" from caption

* Update src/pages/components/dropdown/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/accessibility.mdx

I altered a bit, but addressed

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update accessibility.mdx

fixed typo introduced by my inline edit

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Select accessibility (#3354)

* Update accessibility.mdx

* added images

* updated images

replace with @laurenmrice versions

* Update src/pages/components/select/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/select/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Create sync-platform-branch action (#3365)

* Create sync-platform-branch

* Update .github/workflows/sync-platform-branch

* Update .github/workflows/sync-platform-branch

* Update .github/workflows/sync-platform-branch

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* ci(deploy): remove ibm cloud deploy (#3367)

* Update deploy.yml

* chore: yarn format

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Compressed Images (#3371)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* [Bug] Update colors for Status indicators (#3346)

* update colors on Status indicators

* update colors 2

* update green 40

* update icon colors

* fix(color): update status-success to new values

* update images from Jeannie

---------

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

* Update .kodiak.toml (#3374)

* chore(release): update carbon deps (#3372)

Co-authored-by: aledavila <aledavila@users.noreply.github.com>

* Rename sync-platform-branch to sync-platform-branch.yml (#3376)

* Compressed Images (#3378)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* fix(react): replace codesandbox link with stackblitz (#3369)

* fix(react): replace codesandbox link with stackblitz

* fix(mdxicon): reformat stackblitz icon

---------

Co-authored-by: TJ Egan <tw15egan@gmail.com>

* Create index.mdx

* added-placeholder-images

* Updates from design review

* chore(yarn): update checksums

* updated images

* images + related updates

* Update index.mdx

* added-placement

* Update fluid-pattern-placement.png

* updated-file-name

* Update nav-items.yaml

* fixed-typos

* Apply suggestions from code review

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Mike Gower <mikegower@gmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>
Co-authored-by: jeanservaas <43144260+jeanservaas@users.noreply.github.com>
Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: Mike Gower <michael.gower@ca.ibm.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com>
Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: thyhmdo <77697351+thyhmdo@users.noreply.github.com>
Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>
Co-authored-by: Carson McCue <carsonem2003@gmail.com>
Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: aledavila <aledavila@users.noreply.github.com>

.github/workflows/deploy.yml

@@ -14,38 +14,6 @@ on:
       - main
 
 jobs:
-  build:
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v2-beta
-        with:
-          node-version: 16.x
-
-      - name: Install packages
-        run: yarn install --frozen-lockfile --network-timeout 300000
-
-      - name: Build site
-        run: yarn build:clean
-
-      - name: Install IBM Cloud CLI
-        run: curl -fsSL https://clis.cloud.ibm.com/install/osx | sh
-
-      - name: Install Cloud Foundry CLI
-        run: ibmcloud cf install -v 6.51.0
-
-      - name: Login to ibmcloud
-        env:
-          API_KEY: ${{ secrets.API_KEY }}
-        run:
-          ibmcloud login -a "https://cloud.ibm.com" -u apikey -p "$API_KEY" -o
-          "carbon-design-system" -s "production" -r "us-south"
-
-      - name: Deploy website
-        run: |
-          ibmcloud cf v3-zdt-push carbon-website -b https://github.com/cloudfoundry/nginx-buildpack.git
-
   gh-pages:
     if: github.repository == 'carbon-design-system/carbon-website'
     runs-on: ubuntu-latest

.github/workflows/sync-platform-branch.yml

@@ -0,0 +1,38 @@
+name: Sync Platform Branch
+on:
+  schedule:
+    # Runs on Fridays 6:00 UTC (-6 CT, -5 EST)
+    #       ┌───────────── minute (0 - 59)
+    #       │ ┌───────────── hour (0 - 23)
+    #       │ │ ┌───────────── day of the month (1 - 31)
+    #       │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
+    #       │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
+    #       │ │ │ │ │
+    #       │ │ │ │ │
+    #       │ │ │ │ │
+    - cron: 0 6 * * 5
+
+  # Enable running this workflow manually from the Actions tab
+  workflow_dispatch: # Allow for running this manually.
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/sync-branches@1.4.0
+        with:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          FROM_BRANCH: "main"
+          TO_BRANCH: "carbon-platform"
+          PULL_REQUEST_BODY: "Platform Sync, pulling in new content from main into carbon-platform branch"
+          CONTENT_COMPARISON: true
+          REVIEWERS: '["francinelucca","andreancardona","alisonjoseph"]'

.kodiak.toml

@@ -2,5 +2,6 @@
 version = 1
 
 [merge]
-automerge_label = "status: ready to merge 🎉"
+automerge_label = ["status: ready to merge 🎉", "status: enable automerge 🟠"]
+notify_on_conflict = "false"
 method = "squash"

package.json

@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.18.0-rc.0",
-    "@carbon/icons-react": "^11.15.0-rc.0",
-    "@carbon/pictograms": "^12.11.0",
-    "@carbon/pictograms-react": "^11.37.0",
-    "@carbon/react": "^1.21.0-rc.0",
+    "@carbon/elements": "^11.19.0",
+    "@carbon/icons-react": "^11.16.0",
+    "@carbon/pictograms": "^12.12.0",
+    "@carbon/pictograms-react": "^11.38.0",
+    "@carbon/react": "^1.22.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",

src/components/ColorGrid/ColorGrid.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   colors,
   black100,
-  green60,
+  green50,
   orange40,
   red60,
   white0,
@@ -34,7 +34,7 @@ export default function ColorGrid({ colorFamily, ...rest }) {
         <ColorSwatch hex={red60} />
         <ColorSwatch hex={orange40} />
         <ColorSwatch hex={yellow20} />
-        <ColorSwatch hex={green60} />
+        <ColorSwatch hex={green50} />
       </div>
     );
   }

src/components/MdxIcon/index.js

@@ -6,6 +6,7 @@ import { mdxIcon, iconInverse } from './MdxIcon.module.scss';
 import sketch from './icons/sketch.svg';
 import ase from './icons/ase.png';
 import codesandbox from './icons/codesandbox.svg';
+import stackblitz from './icons/stackblitz.svg';
 import codepen from './icons/codepen.svg';
 import illustrator from './icons/illustrator.svg';
 import react from './icons/react.png';
@@ -23,6 +24,7 @@ const localIcons = {
   sketch,
   ase,
   codesandbox,
+  stackblitz,
   codepen,
   illustrator,
   react,

src/data/guidelines/color-tokens.js

@@ -1922,12 +1922,12 @@ const colorTokens = {
       role: ['Success', 'On'],
       value: {
         white: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Green 50',
+          hex: '#24a148',
         },
         g10: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Green 50',
+          hex: '#24a148',
         },
         g90: {
           name: 'Green 40',

src/data/nav-items.yaml

@@ -198,6 +198,8 @@
       path: /patterns/empty-states-pattern/
     - title: Filtering
       path: /patterns/filtering/
+    - title: Fluid styles
+      path: /patterns/fluid-styles/
     - title: Forms
       path: /patterns/forms-pattern/
     - title: Global header

src/data/status-indicators/palettes.js

@@ -5,21 +5,32 @@ export const statusLight = [
     light: true,
   },
   {
-    name: 'Green 60',
-    hex: '198038',
+    name: 'Green 50',
+    hex: '24A148',
     light: true,
   },
   {
-    name: 'Orange 50',
-    hex: 'eb6200',
+    name: 'Orange 40',
+    hex: 'ff832b',
     light: false,
   },
-  { name: 'Blue 60', hex: '0f62fe', light: true },
+  {
+    name: 'Orange 60 (outline)',
+    hex: 'ba4e00',
+    light: true,
+  },
+
   {
     name: 'Yellow 30',
     hex: 'f1c21b',
     light: false,
   },
+  {
+    name: 'Yellow 60 (outline)',
+    hex: '8e6a00',
+    light: true,
+  },
+  { name: 'Blue 70', hex: '0043ce', light: true },
   { name: 'Purple 60', hex: '8a3ffc', light: true },
   {
     name: 'Gray 60',
@@ -35,8 +46,8 @@ export const statusDark = [
     light: false,
   },
   {
-    name: 'Green 50',
-    hex: '24a148',
+    name: 'Green 40',
+    hex: '42be65',
     light: false,
   },
   {