-
Notifications
You must be signed in to change notification settings - Fork 142
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Tearsheet): Move Tearsheet into @carbon/ibm-products-web-compone…
…nts (#6204) * feat(Tearsheet): web components create component * feat(Tearsheet): add test case * feat(Tearsheet): web components wtorybook update * feat(Tearsheet): style include issue * feat(Tearsheet): style path update * fix: remove sb theme package * fix(ibm products tearsheet): theme integation issue * fix(ibm products tearsheet): theme integation issue * chore(storybook): rename preview.ts * chore(storybook): rename preview.ts * chore(storybook): update configs * chore(styles): fix web component style import paths * chore(deps): re-add @carbon/ibm-products-styles resolution * chore(deps): update yarn.lock * chore(styles): revert style import change * chore(deps): remove styles resolution * chore(deploy): update netlify.toml * chore(package): update build command * chore(package): update storybook build script * chore(netlify): test config removal --------- Co-authored-by: Matt Gallo <mdgallo@us.ibm.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
- Loading branch information
3 people
authored
Oct 25, 2024
1 parent
f7c9dd3
commit c21d102
Showing
17 changed files
with
2,269 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
4 changes: 2 additions & 2 deletions
4
...oducts-web-components/.storybook/theme.ts → ...oducts-web-components/.storybook/theme.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/ibm-products-web-components/src/components/tearsheet/defs.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * @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. | ||
| */ | ||
|
|
||
| export enum TEARSHEET_INFLUENCER_PLACEMENT { | ||
| /** right / default */ | ||
| RIGHT = 'right', | ||
|
|
||
| /** left */ | ||
| LEFT = 'left', | ||
| } | ||
|
|
||
| export enum TEARSHEET_INFLUENCER_WIDTH { | ||
| /** narrow /default */ | ||
| NARROW = 'narrow', | ||
| /** wide */ | ||
| WIDE = 'wide', | ||
| } | ||
|
|
||
| export enum TEARSHEET_WIDTH { | ||
| /** narrow */ | ||
| NARROW = 'narrow', | ||
| /** wide */ | ||
| WIDE = 'wide', | ||
| } |
10 changes: 10 additions & 0 deletions
10
packages/ibm-products-web-components/src/components/tearsheet/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2024, 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 './tearsheet'; |
23 changes: 23 additions & 0 deletions
23
packages/ibm-products-web-components/src/components/tearsheet/story-styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
| @use '@carbon/styles/scss/spacing' as *; | ||
| @use '@carbon/styles/scss/config' as *; | ||
|
|
||
| $story-prefix: 'tearsheet-stories'; | ||
|
|
||
| @use '@carbon/styles/scss/spacing' as *; | ||
|
|
||
| #page-content-selector { | ||
| position: absolute; | ||
| z-index: 9999; | ||
| inset-block-start: 0; | ||
| inset-inline-start: 0; | ||
| } | ||
|
|
||
| .#{$story-prefix}__tabs .#{$prefix}--tab-content { | ||
| display: none; | ||
| } |
101 changes: 101 additions & 0 deletions
101
packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { ArgTypes, Markdown, Meta } from '@storybook/blocks'; | ||
| import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; | ||
| import * as TearsheetStories from './tearsheet.stories'; | ||
|
|
||
| <Meta of={TearsheetStories} /> | ||
|
|
||
| # Tearsheet | ||
|
|
||
| > 💡 Check our | ||
| > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet) | ||
| > example implementation. | ||
| [](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet) | ||
|
|
||
| Tearsheets keep users in-context of a page while performing tasks like | ||
| navigating, editing, viewing details, or configuring something new. | ||
|
|
||
| ## Getting started | ||
|
|
||
| Here's a quick example to get you started. | ||
|
|
||
| ### JS (via import) | ||
|
|
||
| ```javascript | ||
| import '@carbon/web-components/es/components/tearsheet/index.js'; | ||
| // The following are used for slotted fields | ||
| 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'; | ||
| ``` | ||
|
|
||
| <Markdown>{`${cdnJs({ components: ['tearsheet'] })}`}</Markdown> | ||
| <Markdown>{`${cdnCss()}`}</Markdown> | ||
|
|
||
| ### HTML | ||
|
|
||
| ```html | ||
| <c4p-tearsheet> | ||
| <!-- Content --> | ||
| <h5>Tearsheet content</h5> | ||
| <div class="${storyPrefix}text-inputs"> | ||
| <cds-text-input | ||
| label="Input A" | ||
| id="tearsheet-story-text-input-a"></cds-text-input> | ||
| <cds-text-input | ||
| label="Input B" | ||
| id="tearsheet-story-text-input-b"></cds-text-input> | ||
| </div> | ||
| <div class="${storyPrefix}text-inputs"> | ||
| <cds-text-input | ||
| label="Input C" | ||
| id="tearsheet-story-text-input-c"></cds-text-input> | ||
| <cds-text-input | ||
| label="Input D" | ||
| id="tearsheet-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> | ||
|
|
||
| <!-- Tearsheet actions optional --> | ||
| <cds-button slot="actions" kind="${BUTTON_KIND.GHOST}">Ghost</cds-button> | ||
| <cds-button slot="actions" kind="${BUTTON_KIND.PRIMARY}"></cds-button> | ||
| </c4p-tearsheet> | ||
| ``` | ||
|
|
||
| ## `<c4p-tearsheet>` attributes, properties and events | ||
|
|
||
| Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. | ||
| `<c4p-tearsheet open>`) and `false` means not setting the attribute (e.g. | ||
| `<c4p-tearsheet>` without `open` attribute). | ||
|
|
||
| <ArgTypes of="c4p-tearsheet" /> |
Oops, something went wrong.