feat(sidepanel): introduce side panel component (carbon-design-system…

…#11201) Contributes to: carbon-design-system/carbon-labs#16 ### Description Very much a draft version of the SidePanel. It is currently based on the branch `clean_main`. It has a number of missing features Questions: - Button set does not re-order when stacked. I am uncertain if the behavior is possible with Web components - Story knobs not working as expected even when changing stories. Not found a declaration form that is either succinct or correctly updates even between stories. Ideally it should be possible to declare many stories with a single template and different default knobs. Review: - Feedback on the component produced so far would be useful, as it is the fist Web Component I have produced. For feature parity with the React SidePanel the following are required - [ ] button set to re-order when stacked - [ ] Selector-initial-focus not functional - [ ] Add 2nd step story - [ ] Fix action bar refresh bug - this is a circular resize/scroll issue in reality the HTML needs a refactor to correctly use sticky but that involves changing the IBM Products code carbon-design-system/ibm-products#4065 NOTES: - Storybooks feels a bit unwieldy for WebComponents, but that may just be use of V6 storybook.
ariellalgilmore · Feb 2, 2024 · c2c5bca · c2c5bca
1 parent fcbc66f
commit c2c5bca
Show file tree

Hide file tree

Showing 25 changed files with 2,332 additions and 6 deletions.
diff --git a/.yarn/cache/@carbon-ibm-products-styles-npm-2.20.1-1f210e0807-a069cae6b7.zip b/.yarn/cache/@carbon-ibm-products-styles-npm-2.20.1-1f210e0807-a069cae6b7.zip
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/cdn.html
@@ -0,0 +1,78 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-text-input:not(:defined) {
+      display: none;
+    }
+
+    cds-textarea:not(:defined) {
+      display: none;
+    }
+
+    cds-button:not(:defined) {
+      display: none;
+    }
+
+    cds-side-panel:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/text-input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/textarea.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/side-panel.min.js"></script>
+</head>
+
+<body class="cds-theme-zone-white">
+  <cds-side-panel include-overlay open label-text="An optional label" size="md" title="A title, can be omitted">
+    <!-- Content -->
+    <h5>Side panel content</h5>
+    <div class="${storyPrefix}text-inputs">
+      <cds-text-input label="Input A" id="side-panel-story-text-input-a"></cds-text-input>
+      <cds-text-input label="Input B" id="side-panel-story-text-input-b"></cds-text-input>
+    </div>
+    <div class="${storyPrefix}text-inputs">
+      <cds-text-input label="Input C" id="side-panel-story-text-input-c"></cds-text-input>
+      <cds-text-input label="Input D" id="side-panel-story-text-input-d"></cds-text-input>
+    </div>
+    <div class="${storyPrefix}textarea-container">
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    </div>
+
+    <!-- subtitle optional -->
+    <div slot="subtitle">Subtitle text which can provide more detail on the content being displayed.</div>
+
+    <!-- Action toolbar optional -->
+    <cds-button slot="action-toolbar">Copy</cds-button>
+    <cds-button slot="action-toolbar" aria-label="Settings" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Settings">
+      ${Settings({ slot: 'icon' })}
+    </cds-button>
+    <cds-button slot="action-toolbar" aria-label="Delete" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Delete">
+      ${Trashcan({ slot: 'icon' })}
+    </cds-button>
+
+    <!-- Side panel actions optional -->
+    <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
+    <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}></cds-button>
+  </cds-side-panel>
+</body>
+
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/index.html
@@ -0,0 +1,63 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-side-panel:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+
+<body>
+  <cds-side-panel include-overlay open label-text="An optional label" size="md" title="A title, can be omitted">
+    <!-- Content -->
+    <h5>Side panel content</h5>
+    <div class="${storyPrefix}text-inputs">
+      <cds-text-input label="Input A" id="side-panel-story-text-input-a"></cds-text-input>
+      <cds-text-input label="Input B" id="side-panel-story-text-input-b"></cds-text-input>
+    </div>
+    <div class="${storyPrefix}text-inputs">
+      <cds-text-input label="Input C" id="side-panel-story-text-input-c"></cds-text-input>
+      <cds-text-input label="Input D" id="side-panel-story-text-input-d"></cds-text-input>
+    </div>
+    <div class="${storyPrefix}textarea-container">
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    </div>
+
+    <!-- subtitle optional -->
+    <div slot="subtitle">Subtitle text which can provide more detail on the content being displayed.</div>
+
+    <!-- Action toolbar optional -->
+    <cds-button slot="action-toolbar">Copy</cds-button>
+    <cds-button slot="action-toolbar" aria-label="Settings" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Settings">
+      ${Settings({ slot: 'icon' })}
+    </cds-button>
+    <cds-button slot="action-toolbar" aria-label="Delete" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Delete">
+      ${Trashcan({ slot: 'icon' })}
+    </cds-button>
+
+    <!-- Side panel actions optional -->
+    <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
+    <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}></cds-button>
+  </cds-side-panel>
+</body>
+
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-side-panel-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/...arbon-web-components/examples/codesandbox/basic/components/side-panel/sandbox.config.json b/...arbon-web-components/examples/codesandbox/basic/components/side-panel/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/src/index.js
@@ -0,0 +1,13 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/textarea/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/side-panel/index.js';
diff --git a/...es/carbon-web-components/examples/codesandbox/basic/components/side-panel/src/styles.scss b/...es/carbon-web-components/examples/codesandbox/basic/components/side-panel/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
@@ -68,6 +68,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
+    "@carbon/ibm-products-styles": "2.20.1",
     "@carbon/styles": "1.48.1",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",

diff --git a/packages/carbon-web-components/src/components/button/button-set.ts b/packages/carbon-web-components/src/components/button/button-set.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -25,7 +25,7 @@ class CDSButtonSet extends LitElement {
    *
    * @private
    */
-  private _handleSlotChange(event: Event) {
+  protected _handleSlotChange(event: Event) {
     const childItems = (event.target as HTMLSlotElement)
       .assignedNodes()
       .filter((elem) =>

diff --git a/packages/carbon-web-components/src/components/button/button.scss b/packages/carbon-web-components/src/components/button/button.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -103,7 +103,8 @@ $css--plex: true !default;
   outline: none;
 }
 
-:host(#{$prefix}-button-set) {
+:host(#{$prefix}-button-set),
+:host(#{$prefix}-side-panel-button-set) {
   @extend .#{$prefix}--btn-set;
 
   ::slotted(#{$prefix}-button) {

diff --git a/packages/carbon-web-components/src/components/side-panel/defs.ts b/packages/carbon-web-components/src/components/side-panel/defs.ts
@@ -0,0 +1,46 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Modal size.
+ */
+export enum SIDE_PANEL_SIZE {
+  /**
+   * Extra small size.
+   */
+  EXTRA_SMALL = 'xs',
+
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+
+  /**
+   * 2X-Large size.
+   */
+  EXTRA_EXTRA_LARGE = '2xl',
+}
+
+export enum SIDE_PANEL_PLACEMENT {
+  /** right / default */
+  RIGHT = 'right',
+
+  /** left  */
+  LEFT = 'left',
+}
diff --git a/packages/carbon-web-components/src/components/side-panel/index.ts b/packages/carbon-web-components/src/components/side-panel/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './side-panel';
diff --git a/packages/carbon-web-components/src/components/side-panel/side-panel-button-set.ts b/packages/carbon-web-components/src/components/side-panel/side-panel-button-set.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSButtonSet from '../button/button-set';
+
+/**
+ * Button set.
+ *
+ * @element cds-side-panel-button-set
+ */
+@customElement(`${prefix}-side-panel-button-set`)
+class CDSSidePanelButtonSet extends CDSButtonSet {
+  _handleSlotChange() {
+    // do not re-order button set
+    return;
+  }
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default CDSSidePanelButtonSet;