@carbon/ibm-products 2.8.0 → 2.8.1

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 (43) hide show
  1. package/css/index-full-carbon.css +40 -9
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +7 -2
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +40 -9
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +33 -7
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/CreateFullPage/CreateFullPage.js +4 -3
  18. package/es/components/CreateInfluencer/CreateInfluencer.js +10 -3
  19. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
  20. package/es/components/FilterSummary/FilterSummary.js +9 -3
  21. package/es/components/SidePanel/SidePanel.js +3 -1
  22. package/es/components/TagSet/TagSet.js +3 -7
  23. package/es/global/decorators/sidePanelDecorator.js +11 -0
  24. package/es/global/js/utils/StoryDocsPage.js +5 -2
  25. package/lib/components/CreateFullPage/CreateFullPage.js +4 -3
  26. package/lib/components/CreateInfluencer/CreateInfluencer.js +10 -3
  27. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
  28. package/lib/components/FilterSummary/FilterSummary.js +9 -4
  29. package/lib/components/SidePanel/SidePanel.js +3 -1
  30. package/lib/components/TagSet/TagSet.js +2 -6
  31. package/lib/global/decorators/sidePanelDecorator.js +19 -0
  32. package/lib/global/js/utils/StoryDocsPage.js +5 -2
  33. package/package.json +2 -2
  34. package/scss/components/CreateInfluencer/_create-influencer.scss +6 -2
  35. package/scss/components/CreateSidePanel/_storybook-styles.scss +3 -0
  36. package/scss/components/DataSpreadsheet/_storybook-styles.scss +7 -2
  37. package/scss/components/Datagrid/_storybook-styles.scss +5 -2
  38. package/scss/components/Datagrid/styles/_datagrid.scss +32 -5
  39. package/scss/components/EditSidePanel/_storybook-styles.scss +8 -5
  40. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
  41. package/scss/components/SidePanel/_storybook-styles.scss +7 -0
  42. package/scss/global/decorators/_side-panel-decorator.scss +18 -0
  43. package/scss/global/js/utils/_story-as-full-page.scss +6 -0
@@ -26,7 +26,8 @@ var componentName = 'CreateInfluencer';
26
26
  var CreateInfluencer = function CreateInfluencer(_ref) {
27
27
  var className = _ref.className,
28
28
  currentStep = _ref.currentStep,
29
- stepData = _ref.stepData;
29
+ stepData = _ref.stepData,
30
+ title = _ref.title;
30
31
  var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
31
32
  var dynamicSteps = [];
32
33
  array.forEach(function (item, index) {
@@ -54,7 +55,9 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
54
55
  var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
55
56
  return /*#__PURE__*/_react.default.createElement("div", {
56
57
  className: "".concat(blockClass, "__left-nav")
57
- }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
58
+ }, title && /*#__PURE__*/_react.default.createElement("h3", {
59
+ className: "".concat(blockClass, "__title")
60
+ }, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
58
61
  currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
59
62
  : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
60
63
  ,
@@ -96,5 +99,9 @@ CreateInfluencer.propTypes = {
96
99
  secondaryLabel: _propTypes.default.string,
97
100
  shouldIncludeStep: _propTypes.default.bool,
98
101
  title: _propTypes.default.node
99
- }))
102
+ })),
103
+ /**
104
+ * The main title of the full page, displayed in the influencer area.
105
+ */
106
+ title: _propTypes.default.string
100
107
  };
@@ -58,6 +58,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
58
58
  gridHeight = _ref.gridHeight;
59
59
  headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
60
60
  headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
61
+ headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
61
62
  };
62
63
  setCustomValues({
63
64
  gridHeight: gridElement.offsetHeight,
@@ -5,19 +5,23 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
8
10
  var _react = require("@carbon/react");
9
11
  var _react2 = _interopRequireDefault(require("react"));
10
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
13
  var _classnames = _interopRequireDefault(require("classnames"));
12
14
  var _TagSet = require("../TagSet");
13
15
  var _settings = require("../../settings");
16
+ var _excluded = ["key", "value"];
14
17
  /**
15
18
  * Copyright IBM Corp. 2022, 2022
16
19
  *
17
20
  * This source code is licensed under the Apache-2.0 license found in the
18
21
  * LICENSE file in the root directory of this source tree.
19
22
  */
20
-
23
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
24
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
25
  var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
22
26
  var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
23
27
  var _ref$className = _ref.className,
@@ -33,11 +37,12 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
33
37
  var tagFilters = filters.map(function (_ref2) {
34
38
  var _renderLabel;
35
39
  var key = _ref2.key,
36
- value = _ref2.value;
37
- return {
40
+ value = _ref2.value,
41
+ rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
42
+ return _objectSpread(_objectSpread({}, rest), {}, {
38
43
  type: 'gray',
39
44
  label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
40
- };
45
+ });
41
46
  });
42
47
  return /*#__PURE__*/_react2.default.createElement("div", {
43
48
  ref: ref,
@@ -295,12 +295,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
295
295
  if (includeOverlay && open) {
296
296
  bodyElement.style.overflow = 'hidden';
297
297
  } else if (includeOverlay && !open) {
298
- bodyElement.style.overflow = 'initial';
298
+ bodyElement.style.overflow = '';
299
299
  }
300
300
  if (includeOverlay && !preventCloseOnClickOutside) {
301
301
  document.addEventListener('click', handleOutsideClick);
302
302
  }
303
303
  return function () {
304
+ var bodyElement = document.body;
305
+ bodyElement.style.overflow = '';
304
306
  document.removeEventListener('click', handleOutsideClick);
305
307
  };
306
308
  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]);
@@ -115,8 +115,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
115
115
  }
116
116
  }, /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
117
117
  // ensure id is not duplicated
118
- "data-original-id": id,
119
- filter: false
118
+ "data-original-id": id
120
119
  }), label));
121
120
  }) : []);
122
121
  setSizingTags(newSizingTags);
@@ -127,7 +126,6 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
127
126
  var label = _ref3.label,
128
127
  other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
129
128
  return /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
130
- filter: false,
131
129
  key: "displayed-tag-".concat(index)
132
130
  }), label);
133
131
  }) : [];
@@ -316,12 +314,10 @@ TagSet.propTypes = {
316
314
  * with properties: **label**\* (required) to supply the tag content, and
317
315
  * other properties will be passed to the Carbon Tag component, such as
318
316
  * **type**, **disabled**, **ref**, **className** , and any other Tag props.
319
- * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
320
- * as HTML attributes.
321
317
  *
322
318
  * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
323
319
  */
324
- tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
320
+ tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Tag.propTypes), {}, {
325
321
  label: _propTypes.default.string.isRequired,
326
322
  // we duplicate this prop to improve the DocGen
327
323
  type: _propTypes.default.oneOf(tagTypes)
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.sidePanelDecorator = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _react2 = require("@carbon/react");
10
+ var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {
11
+ return function (Story) {
12
+ return /*#__PURE__*/_react.default.createElement("div", {
13
+ className: "".concat(prefix, "container")
14
+ }, renderHeader(), /*#__PURE__*/_react.default.createElement(_react2.Content, {
15
+ className: "".concat(prefix, "content")
16
+ }, /*#__PURE__*/_react.default.createElement(Story, null)));
17
+ };
18
+ };
19
+ exports.sidePanelDecorator = sidePanelDecorator;
@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _blocks = require("@storybook/blocks");
13
13
  var _changeCase = require("change-case");
14
14
  var _storyHelper = require("./story-helper");
15
+ var _settings = require("../../../settings");
15
16
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
17
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
17
18
  * Copyright IBM Corp. 2023, 2023
@@ -87,12 +88,14 @@ var StoryDocsPage = function StoryDocsPage(_ref2) {
87
88
  var storyInfo = (0, _storyHelper.storyDocsPageInfo)(csfFile);
88
89
  var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
89
90
  var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
90
- var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
91
+ var storyHelperClass = isFullScreen ? "".concat(_settings.pkg.prefix, "--story-docs-page--fullscreen") : '';
91
92
  var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
92
93
  var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
93
94
  return !!block.story;
94
95
  }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
95
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
96
+ return /*#__PURE__*/_react.default.createElement("div", {
97
+ "data-story-title": storyInfo.title
98
+ }, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
96
99
  var href = _ref3.href,
97
100
  label = _ref3.label;
98
101
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index > 0 && ' | ', /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.8.0",
4
+ "version": "2.8.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -94,5 +94,5 @@
94
94
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
95
95
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
96
96
  },
97
- "gitHead": "ac236b7f8a9eec9f24898df158dac71e52f091b2"
97
+ "gitHead": "30006c901f29bcb7950244f425b527c264b32958"
98
98
  }
@@ -8,6 +8,7 @@
8
8
  @use '@carbon/styles/scss/spacing' as *;
9
9
  @use '@carbon/styles/scss/motion' as *;
10
10
  @use '../../global/styles/project-settings' as c4p-settings;
11
+ @use '@carbon/styles/scss/type';
11
12
 
12
13
  $influencer-block-class: #{c4p-settings.$pkg-prefix}--create-influencer;
13
14
  $create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
@@ -39,6 +40,7 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
39
40
  .#{$influencer-block-class} {
40
41
  display: grid;
41
42
  height: 100%;
43
+ padding: $spacing-06 $spacing-07;
42
44
  grid-template-columns: 100%;
43
45
  grid-template-rows: 1fr auto;
44
46
  }
@@ -49,8 +51,10 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
49
51
  overflow-y: auto;
50
52
  }
51
53
 
52
- .#{$influencer-block-class}__progress-indicator.#{c4p-settings.$carbon-prefix}--progress {
53
- padding: $spacing-06;
54
+ .#{$influencer-block-class}__title {
55
+ @include type.type-style('heading-03');
56
+
57
+ margin-bottom: $spacing-06;
54
58
  }
55
59
 
56
60
  .#{$influencer-block-class}__view-all-toggle {
@@ -8,6 +8,7 @@
8
8
  @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
9
  @use '@carbon/styles/scss/theme' as *;
10
10
  @use '@carbon/styles/scss/spacing';
11
+ @use '../../global/decorators/side-panel-decorator' as *;
11
12
 
12
13
  $block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
13
14
  $story-prefix: create-side-panel-stories__;
@@ -27,3 +28,5 @@ $story-prefix: create-side-panel-stories__;
27
28
  .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
28
29
  background-color: $field-02;
29
30
  }
31
+
32
+ @include side-panel-decorator($story-prefix);
@@ -5,8 +5,13 @@
5
5
  // LICENSE file in the root directory of this source tree.
6
6
  //
7
7
 
8
- $story-anchor: 'data-spreadsheet';
9
- div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
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 {
10
15
  overflow: auto;
11
16
  width: 100%;
12
17
  }
@@ -128,8 +128,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
128
128
  }
129
129
  }
130
130
 
131
- $story-anchor: 'datagrid';
132
- div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
131
+ $story-anchor: 'Datagrid';
132
+ div[data-story-title*='#{$story-anchor}']
133
+ .docs-story
134
+ > div:first-child
135
+ > div:first-child {
133
136
  overflow: auto;
134
137
  width: 100%;
135
138
  }
@@ -9,6 +9,7 @@
9
9
  @use '@carbon/styles/scss/spacing' as *;
10
10
  @use '@carbon/react/scss/components/button/tokens' as *;
11
11
  @use '../../../global/styles/project-settings' as c4p-settings;
12
+ @use '@carbon/styles/scss/breakpoint';
12
13
  @use './variables' as *;
13
14
 
14
15
  .#{$block-class}__table-toolbar > section {
@@ -163,6 +164,23 @@
163
164
  width: 100%;
164
165
  padding-top: 0;
165
166
 
167
+ .#{c4p-settings.$carbon-prefix}--data-table-header__description {
168
+ overflow: hidden;
169
+ text-overflow: ellipsis;
170
+ white-space: nowrap;
171
+ }
172
+
173
+ .#{c4p-settings.$carbon-prefix}--data-table-header__title {
174
+ overflow: hidden;
175
+ max-width: 80ch;
176
+ text-overflow: ellipsis;
177
+ white-space: nowrap;
178
+
179
+ @include breakpoint.breakpoint(md) {
180
+ max-width: 55ch;
181
+ }
182
+ }
183
+
166
184
  .#{c4p-settings.$carbon-prefix}--data-table-content {
167
185
  width: 100%;
168
186
  height: 100%;
@@ -646,6 +664,7 @@
646
664
  width: 1rem;
647
665
  height: 100%;
648
666
  margin: 0;
667
+ -moz-appearance: initial;
649
668
  -webkit-appearance: none;
650
669
  appearance: none;
651
670
  background: transparent;
@@ -655,12 +674,14 @@
655
674
  outline: 0;
656
675
  }
657
676
 
658
- .#{$block-class} .#{$block-class}__col-resizer-range:focus::before {
677
+ .#{$block-class}
678
+ .#{$block-class}__col-resizer-range:focus
679
+ + .#{$block-class}__col-resize-indicator::before {
659
680
  position: absolute;
660
681
  top: 50%;
661
682
  left: 50%;
662
683
  width: 2px;
663
- height: 100%;
684
+ height: var(--#{$block-class}--header-height);
664
685
  background-color: $focus;
665
686
  content: '';
666
687
  transform: translate(-50%, -50%);
@@ -680,11 +701,13 @@
680
701
  transform: translate(-50%, 0);
681
702
  }
682
703
 
683
- .#{$block-class} .#{$block-class}__col-resizer-range:focus::after {
704
+ .#{$block-class}
705
+ .#{$block-class}__col-resizer-range:focus
706
+ + .#{$block-class}__col-resize-indicator::after {
684
707
  position: absolute;
685
708
  /* stylelint-disable-next-line carbon/layout-token-use */
686
- top: var(--#{$block-class}--row-height);
687
- right: $spacing-03;
709
+ top: calc(var(--#{$block-class}--row-height) - 20px);
710
+ right: $spacing-02;
688
711
  width: 1px;
689
712
  height: calc(
690
713
  var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
@@ -702,3 +725,7 @@
702
725
  appearance: none;
703
726
  background: transparent;
704
727
  }
728
+
729
+ .#{$block-class} .#{$block-class}__col-resizer-range::-moz-range-thumb {
730
+ visibility: hidden;
731
+ }
@@ -5,11 +5,12 @@
5
5
  // LICENSE file in the root directory of this source tree.
6
6
  //
7
7
 
8
- @use 'ALIAS_STORY_STYLE_CONFIG' as *;
8
+ @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
9
  @use '@carbon/styles/scss/theme' as *;
10
10
  @use '@carbon/styles/scss/spacing' as *;
11
+ @use '../../global/decorators/side-panel-decorator' as *;
11
12
 
12
- $block-class: #{$pkg-prefix}--edit-side-panel;
13
+ $block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
13
14
  $story-prefix: edit-side-panel-stories__;
14
15
 
15
16
  .#{$story-prefix}example-container {
@@ -19,11 +20,13 @@ $story-prefix: edit-side-panel-stories__;
19
20
  grid-template-columns: 1fr 1fr;
20
21
  }
21
22
 
22
- .#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
23
+ .#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
23
24
  margin-bottom: 0;
24
25
  }
25
26
 
26
- .#{$block-class} .#{$carbon-prefix}--number__control-btn::before,
27
- .#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
27
+ .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
28
+ .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
28
29
  background-color: $field-02;
29
30
  }
31
+
32
+ @include side-panel-decorator($story-prefix);
@@ -5,6 +5,6 @@
5
5
  // LICENSE file in the root directory of this source tree.
6
6
  //
7
7
 
8
- // @use 'ALIAS_STORY_STYLE_CONFIG';
8
+ // @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
9
9
 
10
10
  // TODO: add any additional styles used by EditTearsheetNarrow.stories.js
@@ -9,6 +9,7 @@
9
9
  @use '@carbon/styles/scss/spacing' as *;
10
10
  @use '@carbon/themes/scss/themes';
11
11
  @use '@carbon/styles/scss/type';
12
+ @use '../../global/decorators/side-panel-decorator' as *;
12
13
 
13
14
  $story-prefix: side-panel-stories__;
14
15
 
@@ -43,3 +44,9 @@ $story-prefix: side-panel-stories__;
43
44
  .#{$story-prefix}header {
44
45
  @include theme(themes.$g100);
45
46
  }
47
+
48
+ .#{$story-prefix}grid {
49
+ height: 100%;
50
+ }
51
+
52
+ @include side-panel-decorator($story-prefix);
@@ -0,0 +1,18 @@
1
+ @mixin side-panel-decorator($prefix) {
2
+ .#{$prefix}container {
3
+ display: flex;
4
+ height: 100vh;
5
+ flex-direction: column;
6
+ }
7
+
8
+ .#{$prefix}content {
9
+ flex-grow: 1;
10
+ }
11
+
12
+ .#{$prefix}toggle {
13
+ position: absolute;
14
+ top: 50%;
15
+ left: 50%;
16
+ transform: translate(-50%, -50%);
17
+ }
18
+ }
@@ -0,0 +1,6 @@
1
+ .story-helper__full-page {
2
+ display: flex;
3
+ width: 100vw;
4
+ height: 100vh;
5
+ flex-direction: column;
6
+ }