@carbon/ibm-products 2.15.2 → 2.17.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/css/config-dev.css +3 -0
  2. package/css/config-dev.css.map +1 -0
  3. package/css/index-full-carbon.css +195 -1
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +1 -1
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +1852 -38
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +1 -1
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +195 -1
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +1 -1
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +5 -1
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +1 -1
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  20. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
  21. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +36 -22
  22. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -11
  23. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
  24. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +24 -13
  25. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  26. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +50 -14
  27. package/es/components/Datagrid/Datagrid.docs-page.js +4 -4
  28. package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  29. package/es/components/Datagrid/useActionsColumn.js +1 -4
  30. package/es/components/Datagrid/useDatagrid.js +5 -1
  31. package/es/components/Datagrid/useFlexResize.js +19 -9
  32. package/es/components/Datagrid/useInfiniteScroll.js +1 -5
  33. package/es/components/Datagrid/useOnRowClick.js +6 -7
  34. package/es/components/Datagrid/useSelectRows.js +8 -5
  35. package/es/components/Datagrid/useSortableColumns.js +5 -7
  36. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
  37. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
  38. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
  39. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
  40. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
  41. package/es/components/EmptyStates/assets/ErrorIllustration.js +5 -3
  42. package/es/components/EmptyStates/assets/NoDataIllustration.js +5 -3
  43. package/es/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
  44. package/es/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
  45. package/es/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
  46. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
  47. package/es/components/InlineTip/InlineTip.docs-page.js +13 -0
  48. package/es/components/InlineTip/InlineTip.js +217 -0
  49. package/es/components/InlineTip/InlineTipButton.js +53 -0
  50. package/es/components/InlineTip/InlineTipLink.js +57 -0
  51. package/es/components/InlineTip/index.js +10 -0
  52. package/es/components/InlineTip/utils.js +36 -0
  53. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +11 -0
  54. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +140 -0
  55. package/es/components/SteppedAnimatedMedia/assets/index.js +4 -0
  56. package/es/components/SteppedAnimatedMedia/index.js +8 -0
  57. package/es/global/js/package-settings.js +3 -4
  58. package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  59. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
  60. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +41 -29
  61. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -11
  62. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
  63. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +23 -12
  64. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  65. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +51 -15
  66. package/lib/components/Datagrid/Datagrid.docs-page.js +4 -4
  67. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  68. package/lib/components/Datagrid/useActionsColumn.js +1 -7
  69. package/lib/components/Datagrid/useDatagrid.js +5 -1
  70. package/lib/components/Datagrid/useFlexResize.js +19 -9
  71. package/lib/components/Datagrid/useInfiniteScroll.js +0 -4
  72. package/lib/components/Datagrid/useOnRowClick.js +6 -7
  73. package/lib/components/Datagrid/useSelectRows.js +8 -5
  74. package/lib/components/Datagrid/useSortableColumns.js +5 -7
  75. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
  76. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
  77. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
  78. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
  79. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
  80. package/lib/components/EmptyStates/assets/ErrorIllustration.js +5 -3
  81. package/lib/components/EmptyStates/assets/NoDataIllustration.js +5 -3
  82. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
  83. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
  84. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
  85. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
  86. package/lib/components/InlineTip/InlineTip.docs-page.js +23 -0
  87. package/lib/components/InlineTip/InlineTip.js +224 -0
  88. package/lib/components/InlineTip/InlineTipButton.js +57 -0
  89. package/lib/components/InlineTip/InlineTipLink.js +61 -0
  90. package/lib/components/InlineTip/index.js +26 -0
  91. package/lib/components/InlineTip/utils.js +43 -0
  92. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +21 -0
  93. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +148 -0
  94. package/lib/components/SteppedAnimatedMedia/assets/index.js +9 -0
  95. package/lib/components/SteppedAnimatedMedia/index.js +12 -0
  96. package/lib/global/js/package-settings.js +3 -4
  97. package/package.json +6 -7
  98. package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
  99. package/scss/components/{TooltipTrigger/_storybook-styles.scss → InlineTip/_index.scss} +2 -0
  100. package/scss/components/InlineTip/_inline-tip.scss +229 -0
  101. package/scss/components/SidePanel/_side-panel.scss +1 -4
  102. package/scss/components/_index-released-only-with-carbon.scss +1 -0
  103. package/scss/components/_index-released-only.scss +1 -0
  104. package/scss/components/_index.scss +1 -0
  105. package/scss/config-dev.scss +3 -0
  106. package/scss/components/APIKeyModal/_storybook-styles.scss +0 -35
  107. package/scss/components/AboutModal/_storybook-styles.scss +0 -29
  108. package/scss/components/ActionBar/_storybook-styles.scss +0 -8
  109. package/scss/components/ActionSet/_storybook-styles.scss +0 -36
  110. package/scss/components/AddSelect/_storybook-styles.scss +0 -6
  111. package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +0 -8
  112. package/scss/components/ButtonMenu/_storybook-styles.scss +0 -6
  113. package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +0 -8
  114. package/scss/components/Card/_storybook-styles.scss +0 -12
  115. package/scss/components/Cascade/_storybook-styles.scss +0 -34
  116. package/scss/components/Checklist/_storybook-styles.scss +0 -13
  117. package/scss/components/CreateFullPage/_storybook-styles.scss +0 -67
  118. package/scss/components/CreateModal/_storybook-styles.scss +0 -54
  119. package/scss/components/CreateSidePanel/_storybook-styles.scss +0 -32
  120. package/scss/components/CreateTearsheet/_storybook-styles.scss +0 -56
  121. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -27
  122. package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -17
  123. package/scss/components/Datagrid/_storybook-styles.scss +0 -157
  124. package/scss/components/EditFullPage/_storybook-styles.scss +0 -10
  125. package/scss/components/EditInPlace/_storybook-styles.scss +0 -15
  126. package/scss/components/EditSidePanel/_storybook-styles.scss +0 -32
  127. package/scss/components/EditTearsheet/_storybook-styles.scss +0 -59
  128. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +0 -10
  129. package/scss/components/EditUpdateCards/_storybook-styles.scss +0 -55
  130. package/scss/components/EmptyStates/_storybook-styles.scss +0 -6
  131. package/scss/components/ExampleComponent/_storybook-styles.scss +0 -6
  132. package/scss/components/ExportModal/_storybook-styles.scss +0 -6
  133. package/scss/components/ExpressiveCard/_storybook-styles.scss +0 -26
  134. package/scss/components/FilterSummary/_storybook-styles.scss +0 -16
  135. package/scss/components/ImportModal/_storybook-styles.scss +0 -6
  136. package/scss/components/MultiAddSelect/_storybook-styles.scss +0 -6
  137. package/scss/components/NotificationsPanel/_storybook-styles.scss +0 -23
  138. package/scss/components/OptionsTile/_storybook-styles.scss +0 -29
  139. package/scss/components/PageHeader/_storybook-styles.scss +0 -90
  140. package/scss/components/ProductiveCard/_storybook-styles.scss +0 -23
  141. package/scss/components/RemoveModal/_storybook-styles.scss +0 -6
  142. package/scss/components/Saving/_storybook-styles.scss +0 -12
  143. package/scss/components/SidePanel/_storybook-styles.scss +0 -52
  144. package/scss/components/SingleAddSelect/_storybook-styles.scss +0 -6
  145. package/scss/components/StatusIcon/_storybook-styles.scss +0 -6
  146. package/scss/components/TagSet/_storybook-styles.scss +0 -8
  147. package/scss/components/Tearsheet/_storybook-styles.scss +0 -25
  148. package/scss/components/UserProfileImage/_storybook.scss +0 -6
  149. package/scss/components/WebTerminal/_storybook-styles.scss +0 -46
@@ -1,32 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2021, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
- @use '@carbon/styles/scss/theme' as *;
10
- @use '@carbon/styles/scss/spacing';
11
- @use '../../global/decorators/side-panel-decorator' as *;
12
-
13
- $block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
14
- $story-prefix: create-side-panel-stories__;
15
-
16
- .#{$story-prefix}example-container {
17
- display: grid;
18
- align-items: flex-end;
19
- grid-gap: spacing.$spacing-04;
20
- grid-template-columns: 1fr 1fr;
21
- }
22
-
23
- .#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
24
- margin-bottom: 0;
25
- }
26
-
27
- .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
28
- .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
29
- background-color: $field-02;
30
- }
31
-
32
- @include side-panel-decorator($story-prefix);
@@ -1,56 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2021, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
- @use '@carbon/styles/scss/type';
10
- @use '@carbon/type/scss/font-family';
11
- @use '@carbon/styles/scss/spacing' as *;
12
-
13
- $preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step;
14
-
15
- .#{$preview-block-class}__description {
16
- @include type.type-style('body-compact-01');
17
-
18
- padding-bottom: $spacing-04;
19
- }
20
-
21
- p.#{$preview-block-class}__description:last-of-type {
22
- padding-bottom: $spacing-07;
23
- }
24
-
25
- .#{$preview-block-class}__heading {
26
- @include font-family.font-weight('semibold');
27
- }
28
-
29
- .#{$preview-block-class}
30
- .#{c4p-settings.$pkg-prefix}--tearsheet__content
31
- .#{c4p-settings.$carbon-prefix}--form-item {
32
- margin-bottom: $spacing-05;
33
- }
34
-
35
- .#{c4p-settings.$carbon-prefix}--tile-group div {
36
- display: flex;
37
- flex-wrap: wrap;
38
- }
39
-
40
- .#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile {
41
- width: 280px;
42
- height: 240px;
43
- margin-right: $spacing-05;
44
- }
45
-
46
- .#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile
47
- .#{c4p-settings.$pkg-prefix}--empty-state__illustration.#{c4p-settings.$pkg-prefix}--empty-state__illustration--lg {
48
- min-width: 120px;
49
- height: 120px;
50
- }
51
-
52
- .#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile-label {
53
- position: absolute;
54
- bottom: $spacing-05;
55
- left: $spacing-05;
56
- }
@@ -1,27 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2021, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
- @use '@carbon/styles/scss/spacing' as *;
10
-
11
- $story-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow--story;
12
-
13
- .#{$story-class}__flex-container {
14
- display: flex;
15
- align-items: baseline;
16
- }
17
-
18
- .#{$story-class}__flex-container .#{c4p-settings.$carbon-prefix}--form-item,
19
- .#{$story-class}__form .#{c4p-settings.$carbon-prefix}--form-item {
20
- margin-bottom: $spacing-05;
21
- }
22
-
23
- .#{$story-class}__flex-container .#{c4p-settings.$carbon-prefix}--form-item,
24
- .#{$story-class}__flex-container
25
- .#{c4p-settings.$carbon-prefix}--dropdown__wrapper.#{c4p-settings.$carbon-prefix}--list-box__wrapper {
26
- width: 50%;
27
- }
@@ -1,17 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- $story-anchor: 'DataSpreadsheet';
9
-
10
- $story-anchor: 'DataSpreadsheet';
11
- div[data-story-title*='#{$story-anchor}']
12
- .docs-story
13
- > div:first-child
14
- > div:first-child {
15
- overflow: auto;
16
- width: 100%;
17
- }
@@ -1,157 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2023
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use '@carbon/styles/scss/theme' as *;
9
- @use '@carbon/styles/scss/type';
10
- @use '@carbon/styles/scss/spacing' as *;
11
- @use '@carbon/styles/scss/components/tooltip';
12
-
13
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
14
-
15
- // TODO: add any additional styles used by Datagrid.stories.js
16
- // helper class for the nested table
17
-
18
- $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
19
-
20
- .sb-show-main.sb-main-centered {
21
- height: 100vh;
22
- }
23
-
24
- .sb-show-main.sb-main-centered #storybook-root {
25
- width: 100%;
26
- height: 100vh;
27
- padding: $spacing-07;
28
- }
29
-
30
- #storybook-root
31
- .#{c4p-settings.$carbon-prefix}--actionable-notification__content {
32
- white-space: pre-wrap;
33
- }
34
-
35
- .carbon-nested-table {
36
- border-bottom: 1px solid $border-subtle-01;
37
-
38
- .#{$block-class}__virtual-scrollbar > div > div:last-child td {
39
- border-bottom: none;
40
- }
41
- }
42
-
43
- .#{$block-class}__panelContent {
44
- display: inline;
45
- }
46
-
47
- /* only for storybook purpose. */
48
- .#{c4p-settings.$pkg-prefix}--side-panel.#{c4p-settings.$pkg-prefix}--side-panel__container {
49
- top: 0;
50
- height: 100%;
51
- }
52
-
53
- .page-content-wrapper.side-panel-open {
54
- .#{$block-class} {
55
- padding-right: $spacing-05;
56
- }
57
- }
58
-
59
- .#{$block-class}__side-panel-sections {
60
- padding-bottom: $spacing-06;
61
- }
62
-
63
- .#{$block-class}__side-panel-link {
64
- padding-top: $spacing-01;
65
- padding-bottom: $spacing-06;
66
- }
67
-
68
- .#{$block-class}__side-panel-section-inner {
69
- display: flex;
70
- padding: $spacing-01 0;
71
- }
72
-
73
- .#{$block-class}__side-panel-label-text {
74
- @include type.type-style('body-compact-01');
75
-
76
- color: $text-secondary;
77
- }
78
-
79
- .#{$block-class}__side-panel-value {
80
- @include type.type-style('body-compact-01');
81
-
82
- padding-left: $spacing-03;
83
- }
84
-
85
- .#{$block-class}__side-panel-section-header {
86
- @include type.type-style('heading-compact-01');
87
-
88
- padding-bottom: $spacing-02;
89
- }
90
-
91
- .#{c4p-settings.$pkg-prefix}--side-panel.#{c4p-settings.$pkg-prefix}--side-panel__container.#{c4p-settings.$pkg-prefix}--side-panel__container-right-placement {
92
- border: 0 none;
93
- box-shadow: none;
94
- }
95
-
96
- .#{c4p-settings.$pkg-prefix}--side-panel__container
97
- .#{c4p-settings.$pkg-prefix}--side-panel__inner-content {
98
- height: 100%;
99
- }
100
-
101
- .#{$block-class}-story__custom-cell-wrapper.#{c4p-settings.$carbon-prefix}--link {
102
- display: block;
103
- overflow: hidden;
104
- text-overflow: ellipsis;
105
- white-space: nowrap;
106
- }
107
-
108
- .#{$block-class}-story__hidden-column-id-snippet {
109
- padding-top: $spacing-07;
110
- }
111
-
112
- .#{$block-class}__mobile-toolbar-modal
113
- .#{c4p-settings.$carbon-prefix}--dropdown__wrapper {
114
- margin-bottom: $spacing-07;
115
- }
116
-
117
- .storybook-#{$block-class}__validation-code-snippet {
118
- @include type.font-family($name: mono);
119
- @include type.type-style('code-01');
120
-
121
- display: inline-block;
122
- padding: 0 $spacing-03;
123
- border: 2px solid transparent;
124
- border-radius: $spacing-02;
125
- margin-right: $spacing-03;
126
- background-color: $field-01;
127
- }
128
-
129
- .#{c4p-settings.$carbon-prefix}--body--with-modal-open {
130
- .#{$block-class}__mobile-toolbar-modal.#{c4p-settings.$carbon-prefix}--modal {
131
- top: -$spacing-07;
132
- left: -$spacing-07;
133
- width: 100vw;
134
- }
135
- }
136
-
137
- $story-anchor: 'Datagrid';
138
- div[data-story-title*='#{$story-anchor}']
139
- .docs-story
140
- > div:first-child
141
- > div:first-child {
142
- overflow: auto;
143
- width: 100%;
144
- }
145
-
146
- .sb--tooltip-trigger {
147
- display: flex;
148
- box-sizing: border-box;
149
- align-items: center;
150
- justify-content: center;
151
- padding: 0;
152
- border: 0;
153
- margin: 0;
154
- background: none;
155
- cursor: pointer;
156
- text-align: start;
157
- }
@@ -1,10 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @import '../../global/styles/project-settings';
9
-
10
- // TODO: add any additional styles used by EditFullPage.stories.js
@@ -1,15 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
- @use '../../global/styles/display-box';
8
-
9
- $block-class: 'edit-in-place-example';
10
-
11
- .#{$block-class}__viewport {
12
- // width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
13
- // stylelint-disable-next-line carbon/layout-token-use
14
- margin: 100px;
15
- }
@@ -1,32 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2021, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
- @use '@carbon/styles/scss/theme' as *;
10
- @use '@carbon/styles/scss/spacing' as *;
11
- @use '../../global/decorators/side-panel-decorator' as *;
12
-
13
- $block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
14
- $story-prefix: edit-side-panel-stories__;
15
-
16
- .#{$story-prefix}example-container {
17
- display: grid;
18
- align-items: flex-end;
19
- grid-gap: $spacing-04;
20
- grid-template-columns: 1fr 1fr;
21
- }
22
-
23
- .#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
24
- margin-bottom: 0;
25
- }
26
-
27
- .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
28
- .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
29
- background-color: $field-02;
30
- }
31
-
32
- @include side-panel-decorator($story-prefix);
@@ -1,59 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use '@carbon/styles/scss/spacing' as *;
9
- @use '@carbon/styles/scss/type';
10
- @use '@carbon/type/scss/font-family';
11
-
12
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
13
-
14
- // TODO: add any additional styles used by EditTearsheet.stories.js
15
-
16
- $preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form;
17
-
18
- .#{$preview-block-class}__description {
19
- @include type.type-style('body-compact-01');
20
-
21
- padding-bottom: $spacing-04;
22
- }
23
-
24
- p.#{$preview-block-class}__description:last-of-type {
25
- padding-bottom: $spacing-07;
26
- }
27
-
28
- .#{$preview-block-class}__heading {
29
- @include font-family.font-weight('semibold');
30
- }
31
-
32
- .#{$preview-block-class}
33
- .#{c4p-settings.$pkg-prefix}--tearsheet__content
34
- .#{c4p-settings.$carbon-prefix}--form-item {
35
- margin-bottom: $spacing-05;
36
- }
37
-
38
- .#{c4p-settings.$carbon-prefix}--tile-group div {
39
- display: flex;
40
- flex-wrap: wrap;
41
- }
42
-
43
- .#{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form--custom-tile {
44
- width: 280px;
45
- height: 240px;
46
- margin-right: $spacing-05;
47
- }
48
-
49
- .#{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form--custom-tile
50
- .#{c4p-settings.$pkg-prefix}--empty-state__illustration.#{c4p-settings.$pkg-prefix}--empty-state__illustration--lg {
51
- min-width: 120px;
52
- height: 120px;
53
- }
54
-
55
- .#{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form--custom-tile-label {
56
- position: absolute;
57
- bottom: $spacing-05;
58
- left: $spacing-05;
59
- }
@@ -1,10 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- // @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
-
10
- // TODO: add any additional styles used by EditTearsheetNarrow.stories.js
@@ -1,55 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use '@carbon/colors/' as *;
9
- @use '@carbon/type/' as *;
10
- @use '@carbon/styles/scss/spacing' as *;
11
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
12
-
13
- // make the root full width to get a better idea of how the cards
14
- // look in a real grid situation
15
- /* stylelint-disable max-nesting-depth */
16
- #root {
17
- width: 100%;
18
- }
19
-
20
- $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
21
-
22
- .#{$block-class} {
23
- textarea,
24
- input,
25
- select {
26
- width: 100%;
27
- height: auto;
28
- padding: 0;
29
- // stylelint-disable-next-line
30
- font-size: type-scale(3);
31
- letter-spacing: 0;
32
- // stylelint-disable-next-line carbon/type-token-use
33
- line-height: 1.5;
34
- }
35
- }
36
- .#{$block-class}--items {
37
- margin-bottom: $spacing-06;
38
-
39
- &:last-child {
40
- margin-bottom: 0;
41
- }
42
- }
43
- .#{$block-class}--icon-text {
44
- display: flex;
45
- align-items: center;
46
-
47
- svg {
48
- margin-right: $spacing-01;
49
-
50
- path {
51
- // stylelint-disable-next-line carbon/theme-token-use
52
- fill: $green-50;
53
- }
54
- }
55
- }
@@ -1,6 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2020, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
@@ -1,6 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2020, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
@@ -1,6 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2020, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
@@ -1,26 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2020, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- // shared card styles can be found in the Card folder
9
- @use '../Card/storybook-styles' as *;
10
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
11
- @use '@carbon/styles/scss/theme' as *;
12
-
13
- $block-class: #{c4p-settings.$pkg-prefix}--card;
14
-
15
- // aspect ratio box styling
16
- .card-story .#{c4p-settings.$carbon-prefix}--aspect-ratio {
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- background: $layer-accent-01;
21
- }
22
-
23
- .#{$block-class}__media-left .#{$block-class}__media {
24
- width: 100%;
25
- max-width: 300px;
26
- }
@@ -1,16 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
- @use '../../global/styles/display-box' as *;
8
-
9
- #root {
10
- width: 100%;
11
- }
12
-
13
- .preview-position-fix {
14
- max-width: 700px;
15
- margin: 0 auto;
16
- }
@@ -1,6 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2021, 2021
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
@@ -1,6 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2022, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
@@ -1,23 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2020, 2020
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
- @use '@carbon/styles/scss/theme' as *;
8
- @use '@carbon/styles/scss/themes';
9
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
10
-
11
- $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
12
-
13
- .#{$storybook-block-class}--full-height {
14
- height: 100vh;
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;
23
- }
@@ -1,29 +0,0 @@
1
- //
2
- // Copyright IBM Corp. 2021, 2022
3
- //
4
- // This source code is licensed under the Apache-2.0 license found in the
5
- // LICENSE file in the root directory of this source tree.
6
- //
7
-
8
- @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
- @use '@carbon/styles/scss/spacing' as *;
10
- @use '@carbon/styles/scss/type';
11
-
12
- $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
13
-
14
- .#{$block-class} {
15
- width: 80vw;
16
- min-width: 16rem;
17
- max-width: 48rem;
18
- }
19
-
20
- .#{$block-class}__content p {
21
- @include type.type-style('body-01');
22
-
23
- margin-bottom: $spacing-06;
24
- }
25
-
26
- .#{$block-class}__content
27
- .#{c4p-settings.$carbon-prefix}--dropdown__wrapper:first-of-type {
28
- margin-bottom: $spacing-06;
29
- }