@carbon/ibm-products 2.1.3 → 2.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +246 -777
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +11 -210
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +48 -412
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +121 -344
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +4 -2
- package/es/components/ActionBar/ActionBar.js +6 -2
- package/es/components/AddSelect/AddSelectFormControl.js +6 -6
- package/es/components/AddSelect/AddSelectRow.js +5 -15
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -5
- package/es/components/ButtonMenu/ButtonMenu.js +4 -4
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +9 -3
- package/es/components/Cascade/Cascade.js +1 -11
- package/es/components/CreateFullPage/CreateFullPage.js +0 -13
- package/es/components/CreateModal/CreateModal.js +0 -7
- package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +2 -3
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +47 -39
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +24 -20
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +15 -44
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +21 -0
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +10 -12
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/useActionsColumn.js +7 -10
- package/es/components/Datagrid/useCustomizeColumns.js +7 -9
- package/es/components/Datagrid/useExpandedRow.js +7 -11
- package/es/components/Datagrid/useFiltering.js +8 -12
- package/es/components/Datagrid/useInlineEdit.js +0 -3
- package/es/components/Datagrid/useNestedRows.js +6 -10
- package/es/components/Datagrid/useStickyColumn.js +3 -10
- package/es/components/Datagrid/utils/DatagridActions.js +14 -6
- package/es/components/EditFullPage/EditFullPage.js +1 -2
- package/es/components/EditSidePanel/EditSidePanel.js +1 -1
- package/es/components/EditTearsheet/EditTearsheet.js +0 -4
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/es/components/EditUpdateCards/EditUpdateCards.js +2 -3
- package/es/components/EmptyStates/EmptyState.js +0 -4
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +0 -4
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +0 -4
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +0 -4
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +0 -4
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +0 -4
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +0 -4
- package/es/components/ExportModal/ExportModal.js +0 -4
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +0 -6
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +0 -6
- package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +0 -6
- package/es/components/ImportModal/ImportModal.js +6 -13
- package/es/components/MultiAddSelect/MultiAddSelect.js +0 -4
- package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +17 -2
- package/es/components/PageHeader/PageHeader.js +6 -2
- package/es/components/PageHeader/PageHeaderUtils.js +2 -2
- package/es/components/RemoveModal/RemoveModal.js +0 -6
- package/es/components/SidePanel/SidePanel.js +3 -1
- package/es/components/SingleAddSelect/SingleAddSelect.js +0 -4
- package/es/components/StatusIcon/StatusIcon.js +0 -10
- package/es/components/TagSet/TagSet.js +7 -4
- package/es/components/Tearsheet/TearsheetShell.js +6 -11
- package/es/components/UserProfileImage/UserProfileImage.js +3 -14
- package/es/components/WebTerminal/WebTerminal.js +0 -4
- package/es/global/js/hooks/useCreateComponentStepChange.js +15 -16
- package/es/global/js/hooks/useResizeObserver.js +28 -14
- package/es/global/js/package-settings.js +1 -14
- package/es/global/js/utils/story-helper.js +6 -108
- package/lib/components/AboutModal/AboutModal.js +4 -2
- package/lib/components/ActionBar/ActionBar.js +6 -2
- package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
- package/lib/components/AddSelect/AddSelectRow.js +5 -15
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -5
- package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +9 -3
- package/lib/components/Cascade/Cascade.js +1 -11
- package/lib/components/CreateFullPage/CreateFullPage.js +0 -13
- package/lib/components/CreateModal/CreateModal.js +0 -7
- package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +2 -3
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +45 -37
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +24 -20
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +7 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +13 -42
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +30 -0
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +10 -12
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/useActionsColumn.js +7 -12
- package/lib/components/Datagrid/useCustomizeColumns.js +8 -10
- package/lib/components/Datagrid/useExpandedRow.js +6 -9
- package/lib/components/Datagrid/useFiltering.js +7 -10
- package/lib/components/Datagrid/useInlineEdit.js +0 -3
- package/lib/components/Datagrid/useNestedRows.js +6 -9
- package/lib/components/Datagrid/useStickyColumn.js +3 -10
- package/lib/components/Datagrid/utils/DatagridActions.js +13 -5
- package/lib/components/EditFullPage/EditFullPage.js +1 -2
- package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
- package/lib/components/EditTearsheet/EditTearsheet.js +0 -4
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.js +2 -3
- package/lib/components/EmptyStates/EmptyState.js +0 -4
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +0 -4
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +0 -4
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +0 -4
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +0 -4
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +0 -4
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +0 -4
- package/lib/components/ExportModal/ExportModal.js +0 -4
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +0 -6
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +0 -6
- package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +0 -6
- package/lib/components/ImportModal/ImportModal.js +6 -13
- package/lib/components/MultiAddSelect/MultiAddSelect.js +0 -4
- package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +17 -2
- package/lib/components/PageHeader/PageHeader.js +6 -2
- package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
- package/lib/components/RemoveModal/RemoveModal.js +0 -6
- package/lib/components/SidePanel/SidePanel.js +3 -1
- package/lib/components/SingleAddSelect/SingleAddSelect.js +0 -4
- package/lib/components/StatusIcon/StatusIcon.js +0 -10
- package/lib/components/TagSet/TagSet.js +7 -4
- package/lib/components/Tearsheet/TearsheetShell.js +6 -11
- package/lib/components/UserProfileImage/UserProfileImage.js +3 -14
- package/lib/components/WebTerminal/WebTerminal.js +0 -4
- package/lib/global/js/hooks/useCreateComponentStepChange.js +15 -16
- package/lib/global/js/hooks/useResizeObserver.js +27 -13
- package/lib/global/js/package-settings.js +1 -14
- package/lib/global/js/utils/story-helper.js +7 -115
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +0 -4
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +1 -0
- package/scss/components/ButtonMenu/_button-menu.scss +1 -32
- package/scss/components/Cascade/_storybook-styles.scss +2 -3
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -6
- package/scss/components/Datagrid/_datagrid.scss +2 -4
- package/scss/components/Datagrid/_storybook-styles.scss +2 -16
- package/scss/components/Datagrid/styles/_datagrid.scss +13 -26
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +0 -7
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +0 -4
- package/scss/components/HTTPErrors/_storybook-styles.scss +6 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +1 -1
- package/scss/components/NotificationsPanel/_storybook-styles.scss +2 -10
- package/scss/components/PageHeader/_page-header.scss +1 -0
- package/scss/components/PageHeader/_storybook-styles.scss +14 -24
- package/scss/components/SidePanel/_side-panel.scss +2 -0
- package/scss/components/Tearsheet/_tearsheet.scss +6 -7
- package/scss/components/WebTerminal/_storybook-styles.scss +1 -11
- package/scss/global/styles/_display-box.scss +0 -1
- package/es/components/APIKeyModal/APIKeyModal.docs-page.js +0 -26
- package/es/components/AboutModal/AboutModal.docs-page.js +0 -21
- package/es/components/Cascade/Cascade.docs-page.js +0 -22
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +0 -39
- package/es/components/CreateModal/CreateModal.docs-page.js +0 -24
- package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +0 -18
- package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +0 -29
- package/es/components/EditFullPage/EditFullPage.docs-page.js +0 -39
- package/es/components/EditTearsheet/EditTearsheet.docs-page.js +0 -25
- package/es/components/ExampleComponent/ExampleComponent.docs-page.js +0 -22
- package/es/components/ImportModal/ImportModal.docs-page.js +0 -18
- package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +0 -17
- package/es/components/RemoveModal/RemoveModal.docs-page.js +0 -18
- package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +0 -15
- package/es/components/StatusIcon/StatusIcon.docs-page.js +0 -17
- package/es/components/Toolbar/Toolbar.docs-page.js +0 -14
- package/es/components/UserProfileImage/UserProfileImage.docs-page.js +0 -17
- package/es/components/WebTerminal/WebTerminal.docs-page.js +0 -52
- package/es/global/js/utils/StoryDocsPage.js +0 -218
- package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +0 -37
- package/lib/components/AboutModal/AboutModal.docs-page.js +0 -32
- package/lib/components/Cascade/Cascade.docs-page.js +0 -33
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +0 -50
- package/lib/components/CreateModal/CreateModal.docs-page.js +0 -35
- package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +0 -29
- package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +0 -40
- package/lib/components/EditFullPage/EditFullPage.docs-page.js +0 -50
- package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +0 -36
- package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +0 -33
- package/lib/components/ImportModal/ImportModal.docs-page.js +0 -26
- package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +0 -25
- package/lib/components/RemoveModal/RemoveModal.docs-page.js +0 -26
- package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +0 -23
- package/lib/components/StatusIcon/StatusIcon.docs-page.js +0 -28
- package/lib/components/Toolbar/Toolbar.docs-page.js +0 -25
- package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +0 -28
- package/lib/components/WebTerminal/WebTerminal.docs-page.js +0 -63
- package/lib/global/js/utils/StoryDocsPage.js +0 -225
@@ -4,9 +4,3 @@
|
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
6
6
|
//
|
7
|
-
|
8
|
-
$story-anchor: 'data-spreadsheet';
|
9
|
-
div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
|
10
|
-
overflow: auto;
|
11
|
-
width: 100%;
|
12
|
-
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp. 2022,
|
2
|
+
// Copyright IBM Corp. 2022, 2022
|
3
3
|
//
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
@@ -22,7 +22,6 @@
|
|
22
22
|
|
23
23
|
// Datagrid uses the following Carbon for IBM Products components:
|
24
24
|
// TODO: @use(s) of IBM Products component styles used by Datagrid
|
25
|
-
@use '../ButtonMenu';
|
26
25
|
|
27
26
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
28
27
|
$block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
@@ -34,8 +33,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
|
34
33
|
display: none;
|
35
34
|
}
|
36
35
|
|
37
|
-
|
38
|
-
> .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
|
36
|
+
.bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
|
39
37
|
left: $spacing-01;
|
40
38
|
width: 112px;
|
41
39
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp. 2022,
|
2
|
+
// Copyright IBM Corp. 2022, 2022
|
3
3
|
//
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
@@ -20,7 +20,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
|
20
20
|
height: 100vh;
|
21
21
|
}
|
22
22
|
|
23
|
-
.sb-show-main.sb-main-centered #
|
23
|
+
.sb-show-main.sb-main-centered #root {
|
24
24
|
width: 100%;
|
25
25
|
height: 100vh;
|
26
26
|
padding: $spacing-07;
|
@@ -114,17 +114,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
|
114
114
|
margin-right: $spacing-03;
|
115
115
|
background-color: $field-01;
|
116
116
|
}
|
117
|
-
|
118
|
-
.#{c4p-settings.$carbon-prefix}--body--with-modal-open {
|
119
|
-
.#{$block-class}__mobile-toolbar-modal.#{c4p-settings.$carbon-prefix}--modal {
|
120
|
-
top: -$spacing-07;
|
121
|
-
left: -$spacing-07;
|
122
|
-
width: 100vw;
|
123
|
-
}
|
124
|
-
}
|
125
|
-
|
126
|
-
$story-anchor: 'datagrid';
|
127
|
-
div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
|
128
|
-
overflow: auto;
|
129
|
-
width: 100%;
|
130
|
-
}
|
@@ -1,9 +1,10 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
/*
|
2
|
+
* Licensed Materials - Property of IBM
|
3
|
+
* 5724-Q36
|
4
|
+
* (c) Copyright IBM Corp. 2020 - 2021
|
5
|
+
* US Government Users Restricted Rights - Use, duplication or disclosure
|
6
|
+
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
7
|
+
*/
|
7
8
|
|
8
9
|
@use '@carbon/styles/scss/theme' as *;
|
9
10
|
@use '@carbon/styles/scss/spacing' as *;
|
@@ -581,6 +582,12 @@
|
|
581
582
|
width: 100%;
|
582
583
|
}
|
583
584
|
|
585
|
+
.#{c4p-settings.$carbon-prefix}--body--with-modal-open
|
586
|
+
.#{$block-class}__grid-container {
|
587
|
+
overflow: hidden;
|
588
|
+
height: 100vh;
|
589
|
+
}
|
590
|
+
|
584
591
|
.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
|
585
592
|
width: 100%;
|
586
593
|
}
|
@@ -625,23 +632,3 @@
|
|
625
632
|
.#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
|
626
633
|
background-color: $layer-accent;
|
627
634
|
}
|
628
|
-
|
629
|
-
.#{$block-class}
|
630
|
-
.#{c4p-settings.$carbon-prefix}--action-list
|
631
|
-
.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$pkg-prefix}--button-menu {
|
632
|
-
padding: 0;
|
633
|
-
}
|
634
|
-
|
635
|
-
// TODO: Revisit batch action list button and button icon alignment after
|
636
|
-
// https: //github.com/carbon-design-system/carbon/issues/14021 is fixed
|
637
|
-
.#{$block-class}
|
638
|
-
.#{c4p-settings.$carbon-prefix}--action-list
|
639
|
-
.#{c4p-settings.$carbon-prefix}--btn {
|
640
|
-
align-items: center;
|
641
|
-
}
|
642
|
-
|
643
|
-
.#{$block-class}
|
644
|
-
.#{c4p-settings.$carbon-prefix}--action-list
|
645
|
-
.#{c4p-settings.$carbon-prefix}--btn__icon {
|
646
|
-
margin-top: 0;
|
647
|
-
}
|
@@ -75,13 +75,6 @@ $action-set-height: rem(64px);
|
|
75
75
|
}
|
76
76
|
|
77
77
|
// Carbon overrides
|
78
|
-
.#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
|
79
|
-
display: flex;
|
80
|
-
width: 3rem;
|
81
|
-
height: 3rem;
|
82
|
-
justify-content: center;
|
83
|
-
}
|
84
|
-
|
85
78
|
.#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
|
86
79
|
position: relative;
|
87
80
|
background-color: $layer-02;
|
@@ -124,10 +124,6 @@
|
|
124
124
|
}
|
125
125
|
|
126
126
|
.#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
|
127
|
-
display: flex;
|
128
|
-
width: 3rem;
|
129
|
-
height: 3rem;
|
130
|
-
justify-content: center;
|
131
127
|
border-right: 1px solid $layer-accent-01;
|
132
128
|
border-bottom: none;
|
133
129
|
}
|
@@ -10,14 +10,6 @@
|
|
10
10
|
|
11
11
|
$storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
|
12
12
|
|
13
|
-
.#{$storybook-block-class}--
|
14
|
-
|
15
|
-
max-height: var(--doc-story-height); // set in core if needed;
|
16
|
-
}
|
17
|
-
|
18
|
-
.#{$storybook-block-class}__add {
|
19
|
-
display: flex;
|
20
|
-
height: 100%;
|
21
|
-
align-items: center;
|
22
|
-
justify-content: center;
|
13
|
+
.#{$storybook-block-class}--header {
|
14
|
+
@include theme(themes.$g100);
|
23
15
|
}
|
@@ -29,6 +29,7 @@ $block-class: #{$pkg-prefix}--page-header;
|
|
29
29
|
$breadcrumb-block-class: #{$pkg-prefix}--breadcrumb-with-overflow;
|
30
30
|
|
31
31
|
$raised-z-index: 99;
|
32
|
+
/* stylelint-disable-next-line function-no-unknown */
|
32
33
|
$z-index-header-minus: utilities.z('header') - 1;
|
33
34
|
|
34
35
|
$left-section-std-width: 60%;
|
@@ -15,6 +15,15 @@
|
|
15
15
|
|
16
16
|
$story-class: 'page-header-stories';
|
17
17
|
|
18
|
+
// cspell:disable-next-line
|
19
|
+
.sbdocs .#{$story-class}__viewport {
|
20
|
+
max-height: 500px;
|
21
|
+
background-color: $background;
|
22
|
+
box-shadow: 0 0 4px 1px $layer-accent-01;
|
23
|
+
color: $text-primary;
|
24
|
+
overflow-y: auto;
|
25
|
+
}
|
26
|
+
|
18
27
|
.#{$story-class}__content-switcher {
|
19
28
|
justify-content: flex-start;
|
20
29
|
}
|
@@ -57,34 +66,15 @@ $story-class: 'page-header-stories';
|
|
57
66
|
flex-direction: column;
|
58
67
|
}
|
59
68
|
|
60
|
-
.#{$story-class}
|
69
|
+
.#{$story-class}__app--whole-page-scroll {
|
61
70
|
overflow: hidden;
|
62
|
-
height: 100vh;
|
63
|
-
}
|
64
|
-
|
65
|
-
.#{$story-class}__viewport--scroll {
|
66
|
-
overflow-y: auto;
|
67
71
|
}
|
68
72
|
|
69
|
-
.#{$story-class}
|
73
|
+
.#{$story-class}__content-container {
|
70
74
|
height: 100%;
|
71
|
-
|
72
|
-
}
|
73
|
-
|
74
|
-
.#{$story-class}__viewport
|
75
|
-
.#{$story-class}__content-container--with-global-header {
|
76
|
-
height: calc(100% - #{$spacing-09});
|
77
|
-
margin-top: $spacing-09;
|
75
|
+
padding: 0;
|
78
76
|
}
|
79
77
|
|
80
|
-
.#{$story-class}
|
81
|
-
overflow-y:
|
82
|
-
}
|
83
|
-
|
84
|
-
// cspell:disable-next-line
|
85
|
-
.sbdocs .#{$story-class}__viewport {
|
86
|
-
max-height: 50vh;
|
87
|
-
background-color: $background;
|
88
|
-
box-shadow: 0 0 4px 1px $layer-accent-01;
|
89
|
-
color: $text-primary;
|
78
|
+
.#{$story-class}__app--whole-page-scroll .#{$story-class}__content-container {
|
79
|
+
overflow-y: auto;
|
90
80
|
}
|
@@ -64,6 +64,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
64
64
|
|
65
65
|
position: fixed;
|
66
66
|
// Need to disable stylelint until dart sass namespace support is added
|
67
|
+
/* stylelint-disable-next-line function-no-unknown */
|
67
68
|
z-index: utilities.z('modal');
|
68
69
|
top: $spacing-09;
|
69
70
|
height: calc(100% - 3rem);
|
@@ -440,6 +441,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
440
441
|
.#{$block-class}__overlay {
|
441
442
|
position: fixed;
|
442
443
|
// Need to disable stylelint until dart sass namespace support is added
|
444
|
+
/* stylelint-disable-next-line function-no-unknown */
|
443
445
|
z-index: utilities.z('overlay');
|
444
446
|
width: 100%;
|
445
447
|
height: 100%;
|
@@ -30,6 +30,7 @@ $motion-duration: $duration-moderate-02;
|
|
30
30
|
@include block-wrap($block-class) {
|
31
31
|
&.#{$block-class} {
|
32
32
|
// Need to disable stylelint until dart sass namespace support is added
|
33
|
+
/* stylelint-disable-next-line function-no-unknown */
|
33
34
|
z-index: utilities.z('modal') + 1;
|
34
35
|
align-items: flex-end;
|
35
36
|
color: $text-primary;
|
@@ -43,6 +44,7 @@ $motion-duration: $duration-moderate-02;
|
|
43
44
|
|
44
45
|
&.is-visible {
|
45
46
|
// Need to disable stylelint until dart sass namespace support is added
|
47
|
+
/* stylelint-disable-next-line function-no-unknown */
|
46
48
|
z-index: utilities.z('modal');
|
47
49
|
align-items: flex-end;
|
48
50
|
// stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
|
@@ -56,6 +58,7 @@ $motion-duration: $duration-moderate-02;
|
|
56
58
|
|
57
59
|
&.#{$block-class}--stacked-1-of-2 {
|
58
60
|
// Need to disable stylelint until dart sass namespace support is added
|
61
|
+
/* stylelint-disable-next-line function-no-unknown */
|
59
62
|
z-index: utilities.z('modal') - 1;
|
60
63
|
// stylelint-disable-next-line carbon/theme-token-use
|
61
64
|
background-color: rgba($overlay-color, 0.33);
|
@@ -63,6 +66,7 @@ $motion-duration: $duration-moderate-02;
|
|
63
66
|
|
64
67
|
&.#{$block-class}--stacked-1-of-3 {
|
65
68
|
// Need to disable stylelint until dart sass namespace support is added
|
69
|
+
/* stylelint-disable-next-line function-no-unknown */
|
66
70
|
z-index: utilities.z('modal') - 2;
|
67
71
|
// stylelint-disable-next-line carbon/theme-token-use
|
68
72
|
background-color: rgba($overlay-color, 0.11);
|
@@ -70,6 +74,7 @@ $motion-duration: $duration-moderate-02;
|
|
70
74
|
|
71
75
|
&.#{$block-class}--stacked-2-of-3 {
|
72
76
|
// Need to disable stylelint until dart sass namespace support is added
|
77
|
+
/* stylelint-disable-next-line function-no-unknown */
|
73
78
|
z-index: utilities.z('modal') - 1;
|
74
79
|
// stylelint-disable-next-line carbon/theme-token-use
|
75
80
|
background-color: rgba($overlay-color, 0.25);
|
@@ -146,14 +151,12 @@ $motion-duration: $duration-moderate-02;
|
|
146
151
|
padding: $spacing-06 $spacing-07;
|
147
152
|
border-bottom: 1px solid $border-subtle-01;
|
148
153
|
margin: 0;
|
149
|
-
background-color: $layer;
|
150
154
|
}
|
151
155
|
|
152
156
|
&.#{$block-class}--narrow .#{$block-class}__header {
|
153
157
|
padding: $spacing-05;
|
154
158
|
border-bottom: 1px solid $border-subtle-01;
|
155
159
|
margin: 0;
|
156
|
-
background-color: $layer;
|
157
160
|
}
|
158
161
|
|
159
162
|
.#{$block-class}__header-content {
|
@@ -267,15 +270,11 @@ $motion-duration: $duration-moderate-02;
|
|
267
270
|
.#{$block-class}__main {
|
268
271
|
display: flex;
|
269
272
|
flex-direction: row;
|
270
|
-
background-color: $
|
273
|
+
background-color: $layer;
|
271
274
|
grid-column: 1 / -1;
|
272
275
|
grid-row: 1 / -1;
|
273
276
|
}
|
274
277
|
|
275
|
-
&.#{$block-class}--narrow .#{$block-class}__main {
|
276
|
-
background-color: $layer;
|
277
|
-
}
|
278
|
-
|
279
278
|
.#{$block-class}__main .#{$block-class}__influencer {
|
280
279
|
border-right: none;
|
281
280
|
border-left: 1px solid $border-subtle-01;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp. 2021,
|
2
|
+
// Copyright IBM Corp. 2021, 2022
|
3
3
|
//
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
@@ -34,13 +34,3 @@ $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
|
|
34
34
|
font-size: 14px;
|
35
35
|
}
|
36
36
|
}
|
37
|
-
|
38
|
-
$story-anchor: 'web-terminal';
|
39
|
-
#storybook-docs {
|
40
|
-
ul {
|
41
|
-
list-style: initial;
|
42
|
-
}
|
43
|
-
ol {
|
44
|
-
list-style: decimal;
|
45
|
-
}
|
46
|
-
}
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import { useOf } from '@storybook/blocks';
|
4
|
-
import { storyDocsGuidelines } from '../../global/js/utils/story-helper';
|
5
|
-
import * as stories from './APIKeyModal.stories';
|
6
|
-
var DocsPage = function DocsPage() {
|
7
|
-
var _useOf = useOf('meta', ['meta']),
|
8
|
-
csfFile = _useOf.csfFile;
|
9
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
10
|
-
altGuidelinesHref: [storyDocsGuidelines(csfFile), {
|
11
|
-
href: 'https://www.carbondesignsystem.com/components/modal/usage',
|
12
|
-
label: 'Carbon Modal usage guidelines'
|
13
|
-
}, {
|
14
|
-
href: 'https://react.carbondesignsystem.com/?path=/docs/modal--default',
|
15
|
-
label: 'Carbon Modal documentation'
|
16
|
-
}],
|
17
|
-
blocks: [{
|
18
|
-
story: stories.Edit,
|
19
|
-
description: "API key creation / generation is assumed to be the default mode for this modal.\nTo enable key editing you have to set the `edit` prop to true and supply any\nother edit related props with the relevant input."
|
20
|
-
}, {
|
21
|
-
description: "By default generate and edit only supply a name input for your key. If you need additional input you should use custom steps",
|
22
|
-
story: stories.CustomEdit
|
23
|
-
}]
|
24
|
-
});
|
25
|
-
};
|
26
|
-
export default DocsPage;
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './AboutModal.stories';
|
4
|
-
var DocsPage = function DocsPage() {
|
5
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
-
guidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/about-modal/usage",
|
7
|
-
blocks: [{
|
8
|
-
story: stories.aboutModal
|
9
|
-
}, {
|
10
|
-
story: stories.fullyLoaded
|
11
|
-
}, {
|
12
|
-
title: 'Overriding the Carbon theme',
|
13
|
-
description: 'The design recommendation is to use a dark theme for the AboutModal if the application is currently using a light theme, and vice versa. The theme applied to the AboutModal can easily be customized as follows:',
|
14
|
-
source: {
|
15
|
-
language: 'css',
|
16
|
-
code: ".#{$pkg-prefix}--about-modal {\n @include carbon--theme(\n $theme: $carbon--theme--g90\n );\n}"
|
17
|
-
}
|
18
|
-
}]
|
19
|
-
});
|
20
|
-
};
|
21
|
-
export default DocsPage;
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './Cascade.stories';
|
4
|
-
import { useOf } from '@storybook/blocks';
|
5
|
-
import { storyDocsGuidelines } from '../../global/js/utils/story-helper';
|
6
|
-
var DocsPage = function DocsPage() {
|
7
|
-
var _useOf = useOf('meta', ['meta']),
|
8
|
-
csfFile = _useOf.csfFile;
|
9
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
10
|
-
altGuidelinesHref: [storyDocsGuidelines(csfFile), {
|
11
|
-
href: 'https://www.carbondesignsystem.com/guidelines/motion/overview/',
|
12
|
-
label: 'Carbon motion guidelines'
|
13
|
-
}],
|
14
|
-
blocks: [{
|
15
|
-
story: stories.WithoutGrid
|
16
|
-
}, {
|
17
|
-
description: 'When using `Cascade` with grid support its important that you follow the example code structure and provide the rows and columns. The component will assume this structure and add the appropriate CSS classes to the columns.',
|
18
|
-
story: stories.WithGrid
|
19
|
-
}]
|
20
|
-
});
|
21
|
-
};
|
22
|
-
export default DocsPage;
|
@@ -1,39 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './CreateFullPage.stories';
|
4
|
-
var DocsPage = function DocsPage() {
|
5
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
-
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#full-page",
|
7
|
-
blocks: [{
|
8
|
-
description: "There are **2** components that make up a Create Full Page component, which can\nbe used in unison to create the desired look, or flow. Please note, to utilize\nthe Create Full Page component, you'll need to have a minimum of two steps. If\nyou are looking for a one step creation flow, consider Create Tearsheet, Create\nSide Panel, or Create Modal."
|
9
|
-
}, {
|
10
|
-
story: stories.createFullPage,
|
11
|
-
description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateFullPage />` component and the `<CreateFullPageStep />`\ncomponent with form items as children:\n",
|
12
|
-
source: {
|
13
|
-
code: "<CreateFullPage {...props}>\n <CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </Column>\n </Row>\n </CreateFullPageStep>\n </CreateFullPage>"
|
14
|
-
}
|
15
|
-
}, {
|
16
|
-
story: stories.createFullPageWithSections,
|
17
|
-
description: "This is used when you have several sections per step. This can be created by\npassing in the overall `<CreateFullPage />` component and the\n`<CreateFullPageStep />` component for the first `section`. All additional\n`sections` must be passed in as children, as shown below:",
|
18
|
-
source: {
|
19
|
-
code: "<CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n Optional subtitle\n </h6>\n <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n Optional description\n </p>\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-2\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n</CreateFullPageStep>"
|
20
|
-
}
|
21
|
-
}, {
|
22
|
-
title: 'Using custom components',
|
23
|
-
description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
|
24
|
-
source: {
|
25
|
-
code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n return (\n <CreateFullPageStep\n {...rest}\n subtitle={subtitle}\n title=\"Step 1\"\n onNext={() => console.log('optional validation check')}\n onMount={() => console.log('optional onMount fn')}\n disableSubmit={false}\n >\n step content here\n </CreateFullPageStep>\n );\n};\n\nconst CreateComponent = () => {\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateStepCustom subtitle=\"Custom step subtitle\" />\n <CreateFullPageStep\n title=\"Topic name\"\n fieldsetLegendText=\"Topic information\"\n disableSubmit={!value}\n subtitle=\"This is the unique name used to recognize your topic\"\n description=\"It will also be used by your producers and consumers as part of the\n connection information, so make it something easy to recognize.\"\n >\n Content for second step\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
26
|
-
}
|
27
|
-
}, {
|
28
|
-
title: 'Using dynamic steps',
|
29
|
-
description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
|
30
|
-
source: {
|
31
|
-
code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n useState(false);\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateFullPageStep {...step1Props}>\n Step 1 content\n <Checkbox\n labelText={`Include additional step`}\n id=\"include-additional-step-checkbox\"\n onChange={(value) => setShouldIncludeAdditionalStep(value)}\n checked={shouldIncludeAdditionalStep}\n />\n </CreateFullPageStep>\n <CreateFullPageStep\n {...step2Props}\n includeStep={shouldIncludeAdditionalStep}\n >\n Dynamic step content\n </CreateFullPageStep>\n <CreateFullPageStep {...step3Props}>\n Final step content\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
32
|
-
}
|
33
|
-
}, {
|
34
|
-
title: 'Class names',
|
35
|
-
description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name | Element | Features |\n| ---------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-full-page__step-title` | title | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-full-page__step-subtitle` | subtitle | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-full-page__step-description` | description | `body-long-01` & `margin-bottom` of `$spacing-06` |\n| `#{$pkg-prefix}--create-full-page__step-fieldset` | fieldset | `margin-bottom` of `$spacing-05` to all children elements |\n| `#{$pkg-prefix}--create-full-page__section-divider` | divider | Includes a `1px` divider line inside the `main` content |\n"
|
36
|
-
}]
|
37
|
-
});
|
38
|
-
};
|
39
|
-
export default DocsPage;
|
@@ -1,24 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './CreateModal.stories';
|
4
|
-
var DocsPage = function DocsPage() {
|
5
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
-
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#modal",
|
7
|
-
blocks: [{
|
8
|
-
story: stories.Default
|
9
|
-
}, {
|
10
|
-
title: 'Form validation',
|
11
|
-
description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
|
12
|
-
}, {
|
13
|
-
title: 'Overriding Carbon theme',
|
14
|
-
description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",
|
15
|
-
source: {
|
16
|
-
language: 'css',
|
17
|
-
code: " .#{$pkg-prefix}--create-modal {\n @include carbon--theme(\n $theme: $carbon--theme--g90\n );\n }"
|
18
|
-
}
|
19
|
-
}, {
|
20
|
-
description: "Alternatively, the required Carbon theme can be set as above in a custom CSS\nclass which is then applied to the CreateModal using the `className` prop."
|
21
|
-
}]
|
22
|
-
});
|
23
|
-
};
|
24
|
-
export default DocsPage;
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './CreateSidePanel.stories';
|
4
|
-
var DocsPage = function DocsPage() {
|
5
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
-
altGuidelinesHref: [{
|
7
|
-
href: 'https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#side-panel',
|
8
|
-
label: 'Carbon create flows side panel usage guidelines'
|
9
|
-
}],
|
10
|
-
blocks: [{
|
11
|
-
story: stories.Default
|
12
|
-
}, {
|
13
|
-
title: 'Form validation',
|
14
|
-
description: "All forms, including that within the `CreateSidePanel` should follow C&CS\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
|
15
|
-
}]
|
16
|
-
});
|
17
|
-
};
|
18
|
-
export default DocsPage;
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './CreateTearsheet.stories';
|
4
|
-
var DocsPage = function DocsPage() {
|
5
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
-
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#wide-tearsheet",
|
7
|
-
blocks: [{
|
8
|
-
story: stories.multiStepTearsheet,
|
9
|
-
description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateTearsheet />` component and the `<CreateTearsheetStep />`\ncomponent with form items as children:",
|
10
|
-
source: {
|
11
|
-
code: " <CreateTearsheet {...props}>\n <CreateTearsheetStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n disableSubmit={}\n >\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </CreateTearsheetStep>\n </CreateTearsheet>"
|
12
|
-
}
|
13
|
-
}, {
|
14
|
-
title: 'Using custom components',
|
15
|
-
description: "It is possible to use custom components that return `CreateTearsheetStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateTearsheet`. _It is required that each child of the `CreateTearsheet`\neither be a custom step or a `CreateTearsheetStep`_. An example of this could\nlook like the following:",
|
16
|
-
source: {
|
17
|
-
code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n return (\n <CreateTearsheetStep\n {...rest}\n subtitle={subtitle}\n title=\"Step 1\"\n onNext={() => console.log('optional validation check')}\n onMount={() => console.log('optional onMount fn')}\n disableSubmit={false}\n >\n step content here\n </CreateTearsheetStep>\n );\n};\n\nconst CreateComponent = () => {\n return (\n <CreateTearsheet {...createTearsheetProps}>\n <CreateStepCustom subtitle=\"Custom step subtitle\" />\n <CreateTearsheetStep\n title=\"Topic name\"\n fieldsetLegendText=\"Topic information\"\n disableSubmit={!value}\n subtitle=\"This is the unique name used to recognize your topic\"\n description=\"It will also be used by your producers and consumers as part of the\n connection information, so make it something easy to recognize.\"\n >\n Content for second step\n </CreateTearsheetStep>\n </CreateTearsheet>\n );\n};"
|
18
|
-
}
|
19
|
-
}, {
|
20
|
-
title: 'Using dynamic steps',
|
21
|
-
description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
|
22
|
-
code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n useState(false);\n return (\n <CreateTearsheet {...createTearsheetProps}>\n <CreateTearsheetStep {...step1Props}>\n Step 1 content\n <Checkbox\n labelText={`Include additional step`}\n id=\"include-additional-step-checkbox\"\n onChange={(value) => setShouldIncludeAdditionalStep(value)}\n checked={shouldIncludeAdditionalStep}\n />\n </CreateTearsheetStep>\n <CreateTearsheetStep\n {...step2Props}\n includeStep={shouldIncludeAdditionalStep}\n >\n Dynamic step content\n </CreateTearsheetStep>\n <CreateTearsheetStep {...step3Props}>\n Final step content\n </CreateTearsheetStep>\n </CreateTearsheet>\n );\n};"
|
23
|
-
}, {
|
24
|
-
title: 'Class names',
|
25
|
-
description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name | Element | Features |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__step--title` | title | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__step--subtitle` | subtitle | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__step--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06` |\n| `#{$pkg-prefix}--create-tearsheet__step--fieldset` | fieldset | `margin-bottom` of `$spacing-05` to all children elements |\n| `#{$pkg-prefix}--create-tearsheet__section--divider` | divider | Includes a `1px` divider line inside the `main` content |\n"
|
26
|
-
}]
|
27
|
-
});
|
28
|
-
};
|
29
|
-
export default DocsPage;
|
@@ -1,39 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
-
import * as stories from './EditFullPage.stories';
|
4
|
-
var DocsPage = function DocsPage() {
|
5
|
-
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
-
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#full-page-edit",
|
7
|
-
blocks: [{
|
8
|
-
description: "There are **2** components that make up a Create Full Page component, which can\nbe used in unison to create the desired look, or flow. Please note, to utilize\nthe Create Full Page component, you'll need to have a minimum of two steps. If\nyou are looking for a one step creation flow, consider Create Tearsheet, Create\nSide Panel, or Create Modal."
|
9
|
-
}, {
|
10
|
-
story: stories.editFullPage,
|
11
|
-
description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateFullPage />` component and the `<CreateFullPageStep />`\ncomponent with form items as children:",
|
12
|
-
source: {
|
13
|
-
code: "<CreateFullPage {...props}>\n <CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </Column>\n </Row>\n </CreateFullPageStep>\n </CreateFullPage>"
|
14
|
-
}
|
15
|
-
}, {
|
16
|
-
story: stories.editFullPageWithSections,
|
17
|
-
description: "This is used when you have several sections per step. This can be created by\npassing in the overall `<CreateFullPage />` component and the\n`<CreateFullPageStep />` component for the first `section`. All additional\n`sections` must be passed in as children, as shown below:",
|
18
|
-
source: {
|
19
|
-
code: "<CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n Optional subtitle\n </h6>\n <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n Optional description\n </p>\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-2\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n</CreateFullPageStep>"
|
20
|
-
}
|
21
|
-
}, {
|
22
|
-
title: 'Using custom components',
|
23
|
-
description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
|
24
|
-
source: {
|
25
|
-
code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n return (\n <CreateFullPageStep\n {...rest}\n subtitle={subtitle}\n title=\"Step 1\"\n onNext={() => console.log('optional validation check')}\n onMount={() => console.log('optional onMount fn')}\n disableSubmit={false}\n >\n step content here\n </CreateFullPageStep>\n );\n};\n\nconst CreateComponent = () => {\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateStepCustom subtitle=\"Custom step subtitle\" />\n <CreateFullPageStep\n title=\"Topic name\"\n fieldsetLegendText=\"Topic information\"\n disableSubmit={!value}\n subtitle=\"This is the unique name used to recognize your topic\"\n description=\"It will also be used by your producers and consumers as part of the\n connection information, so make it something easy to recognize.\"\n >\n Content for second step\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
26
|
-
}
|
27
|
-
}, {
|
28
|
-
title: 'Using dynamic steps',
|
29
|
-
description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
|
30
|
-
source: {
|
31
|
-
code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n useState(false);\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateFullPageStep {...step1Props}>\n Step 1 content\n <Checkbox\n labelText={`Include additional step`}\n id=\"include-additional-step-checkbox\"\n onChange={(value) => setShouldIncludeAdditionalStep(value)}\n checked={shouldIncludeAdditionalStep}\n />\n </CreateFullPageStep>\n <CreateFullPageStep\n {...step2Props}\n includeStep={shouldIncludeAdditionalStep}\n >\n Dynamic step content\n </CreateFullPageStep>\n <CreateFullPageStep {...step3Props}>\n Final step content\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
32
|
-
}
|
33
|
-
}, {
|
34
|
-
title: 'Class names',
|
35
|
-
description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name | Element | Features |\n| ---------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-full-page__step-title` | title | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-full-page__step-subtitle` | subtitle | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-full-page__step-description` | description | `body-long-01` & `margin-bottom` of `$spacing-06` |\n| `#{$pkg-prefix}--create-full-page__step-fieldset` | fieldset | `margin-bottom` of `$spacing-05` to all children elements |\n| `#{$pkg-prefix}--create-full-page__section-divider` | divider | Includes a `1px` divider line inside the `main` content |\n"
|
36
|
-
}]
|
37
|
-
});
|
38
|
-
};
|
39
|
-
export default DocsPage;
|