carbon-design-system · davidmenendez · Oct 3, 2025 · Oct 3, 2025 · Oct 16, 2025 · Oct 16, 2025
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.yarn/*
+yarn.lock
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
@@ -0,0 +1,4 @@
+{
+  "label": "Create sidepanel pattern",
+  "template": "node"
+}
@@ -0,0 +1,24 @@
+<!--
+@license
+
+Copyright IBM Corp. 2025
+
+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>Create Sidepanel patterns</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="src/styles.scss" />
+    <script type="module" src="src/index.ts"></script>
+  </head>
+  <body>
+    <section>
+      <h4>Create Sidepanel patterns</h4>
+      <p>Default</p>
+      <create-side-panel-default></create-side-panel-default>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,22 @@
+{
+  "name": "ibm-products-web-components-create-side-panel-pattern-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Delete and remove pattern using Carbon web components",
+  "license": "Apache-2",
+  "main": "index.html",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@carbon/web-components": "^2.37.0",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "sass": "^1.87.0",
+    "vite": "^6.2.3",
+    "vite-plugin-lit-css": "^2.1.0"
+  }
+}
@@ -0,0 +1,61 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '@carbon/ibm-products-web-components/es/components/side-panel/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/number-input/index.js';
+import '@carbon/web-components/es/components/form/form-item.js';
+
+@customElement('create-side-panel-default')
+export class CreateSidepanelDefault extends LitElement {
+  @state()
+  open: boolean = true;
+
+  private _openHandler() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <div>
+        <cds-button @click=${this._openHandler}>Create partitions</cds-button>
+        <c4p-side-panel
+          include-overlay
+          ?open=${this.open}
+          size="md"
+          title="Create partitions"
+        >
+          <div slot="subtitle">
+            Specify the details of the partitions you're creating
+          </div>
+          <h5>Core configuration</h5>
+          <p>We recommend you fill out and evaluate these details at a minimum before deploying your topic.</p>
+          <cds-form-input>
+            <cds-text-input value="Topic" label="Topic name"></cds-text-input>
+          </cds-form-input>
+          <cds-form-item>
+            <cds-number-input value="50" min="0" max="100" step="1" label="Partitions" size="md">
+            </cds-number-input>
+          </cds-form-item>
+          <cds-form-item>
+            <cds-number-input value="50" min="0" max="100" step="1" label="Replicas" size="md">
+            </cds-number-input>
+          </cds-form-item>
+          <cds-button slot="actions" kind="secondary" @click=${this._openHandler}>Cancel</cds-button>
+          <cds-button slot="actions" kind="primary" @click=${this._openHandler}>Create</cds-button>
+        </c4p-side-panel>
+      </div>
+    `;
+  }
+}
+
+export default CreateSidepanelDefault;
@@ -0,0 +1,61 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '@carbon/ibm-products-web-components/es/components/side-panel/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/number-input/index.js';
+import '@carbon/web-components/es/components/form/form-item.js';
+
+@customElement('create-side-panel-stepped')
+export class CreateSidepanelStepped extends LitElement {
+  @state()
+  open: boolean = true;
+
+  private _openHandler() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <div>
+        <cds-button @click=${this._openHandler}>Create partitions</cds-button>
+        <c4p-side-panel
+          include-overlay
+          ?open=${this.open}
+          size="md"
+          title="Create partitions"
+        >
+          <div slot="subtitle">
+            Specify the details of the partitions you're creating
+          </div>
+          <h5>Core configuration</h5>
+          <p>We recommend you fill out and evaluate these details at a minimum before deploying your topic.</p>
+          <cds-form-input>
+            <cds-text-input value="Topic" label="Topic name"></cds-text-input>
+          </cds-form-input>
+          <cds-form-item>
+            <cds-number-input value="50" min="0" max="100" step="1" label="Partitions" size="md">
+            </cds-number-input>
+          </cds-form-item>
+          <cds-form-item>
+            <cds-number-input value="50" min="0" max="100" step="1" label="Replicas" size="md">
+            </cds-number-input>
+          </cds-form-item>
+          <cds-button slot="actions" kind="secondary" @click=${this._openHandler}>Cancel</cds-button>
+          <cds-button slot="actions" kind="primary" @click=${this._openHandler}>Create</cds-button>
+        </c4p-side-panel>
+      </div>
+    `;
+  }
+}
+
+export default CreateSidepanelStepped;
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as CreateSidepanelDefault } from './create-side-panel-default';
+export { default as CreateSidepanelStepped } from './create-side-panel-stepped';
@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 '@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);
+}
+
+.example-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.example-header {
+  background: #393939;
+}
+
+.example-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["DOM", "ES2022"],
+    "moduleResolution": "bundler",
+    "experimentalDecorators": true, 
+    "useDefineForClassFields": false,
+  }
+}
@@ -0,0 +1,24 @@
+// cspell:words litcss
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { resolve } from 'path';
+import { defineConfig } from 'vite';
+import litcss from 'vite-plugin-lit-css';
+
+export default defineConfig({
+  plugins: [litcss()],
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});
@@ -0,0 +1,82 @@
+import { Markdown, Meta, Story } from '@storybook/addon-docs/blocks';
+
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as Stories from './create-side-panel.stories';
+
+<Meta of={Stories} />
+
+# Create Sidepanel
+
+[Create sidepanel usage guidelines](https://pages.github.ibm.com/carbon/ibm-products/patterns/create-flows/usage/#side-panel)
+
+## Overview
+
+Use with medium complexity creations if the user needs page context. On-page content can be seen and interacted with.
+
+Patterns have multiple ways of accomplishing a user need and typically use a
+combination of components with additional design considerations. The pattern
+code we share is meant to serve as an example implementation that can be built
+and extended further.
+
+#### Ingredients
+
+To build this pattern, we recommend including the following components:
+
+- [c4p-sidepanel](https://ibm-products-web-components.netlify.app/?path=/docs/components-sidepanel--overview)
+- [cds-button](https://web-components.carbondesignsystem.com/?path=/docs/components-button--overview)
+- [cds-form-item](https://web-components.carbondesignsystem.com/?path=/docs/components-form--overview)
+- [cds-number-input](https://web-components.carbondesignsystem.com/?path=/docs/components-number-input--overview)
+- [cds-text-input](https://web-components.carbondesignsystem.com/?path=/docs/components-text-input--overview)
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components/examples/create-side-panel)
+> example implementation.
+
+[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components/examples/create-side-panel)
+
+### Example
+
+Here's a quick example to get you started.
+
+#### JS (via import)
+
+```javascript
+import '@carbon/ibm-products-web-components/es/components/side-panel/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/form/form-item.js';
+import '@carbon/web-components/es/components/number-input/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+```
+
+#### HTML
+
+```html
+<div>
+  <cds-button @click=${this._openHandler}>Create partitions</cds-button>
+  <c4p-side-panel
+    include-overlay
+    ?open=${this.open}
+    size="md"
+    title="Create partitions"
+  >
+    <div slot="subtitle">
+      Specify the details of the partitions you're creating
+    </div>
+    <h5>Core configuration</h5>
+    <p>We recommend you fill out and evaluate these details at a minimum before deploying your topic.</p>
+    <cds-form-input>
+      <cds-text-input value="Topic" label="Topic name"></cds-text-input>
+    </cds-form-input>
+    <cds-form-item>
+      <cds-number-input value="50" min="0" max="100" step="1" label="Partitions" size="md">
+      </cds-number-input>
+    </cds-form-item>
+    <cds-form-item>
+      <cds-number-input value="50" min="0" max="100" step="1" label="Replicas" size="md">
+      </cds-number-input>
+    </cds-form-item>
+    <cds-button slot="actions" kind="secondary" @click=${this._openHandler}>Cancel</cds-button>
+    <cds-button slot="actions" kind="primary" @click=${this._openHandler}>Create</cds-button>
+  </c4p-side-panel>
+</div>
+```