@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.
- package/css/index-full-carbon.css +40 -9
- 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 +7 -2
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +40 -9
- 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 +33 -7
- 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/CreateFullPage/CreateFullPage.js +4 -3
- package/es/components/CreateInfluencer/CreateInfluencer.js +10 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
- package/es/components/FilterSummary/FilterSummary.js +9 -3
- package/es/components/SidePanel/SidePanel.js +3 -1
- package/es/components/TagSet/TagSet.js +3 -7
- package/es/global/decorators/sidePanelDecorator.js +11 -0
- package/es/global/js/utils/StoryDocsPage.js +5 -2
- package/lib/components/CreateFullPage/CreateFullPage.js +4 -3
- package/lib/components/CreateInfluencer/CreateInfluencer.js +10 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -0
- package/lib/components/FilterSummary/FilterSummary.js +9 -4
- package/lib/components/SidePanel/SidePanel.js +3 -1
- package/lib/components/TagSet/TagSet.js +2 -6
- package/lib/global/decorators/sidePanelDecorator.js +19 -0
- package/lib/global/js/utils/StoryDocsPage.js +5 -2
- package/package.json +2 -2
- package/scss/components/CreateInfluencer/_create-influencer.scss +6 -2
- package/scss/components/CreateSidePanel/_storybook-styles.scss +3 -0
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +7 -2
- package/scss/components/Datagrid/_storybook-styles.scss +5 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +32 -5
- package/scss/components/EditSidePanel/_storybook-styles.scss +8 -5
- package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
- package/scss/components/SidePanel/_storybook-styles.scss +7 -0
- package/scss/global/decorators/_side-panel-decorator.scss +18 -0
- 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
|
-
},
|
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
|
-
|
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 = '
|
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({},
|
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 ?
|
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(
|
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.
|
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": "
|
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}
|
53
|
-
|
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: '
|
9
|
-
|
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: '
|
132
|
-
div[
|
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}
|
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:
|
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}
|
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-
|
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: #{
|
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 .#{
|
23
|
+
.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
|
23
24
|
margin-bottom: 0;
|
24
25
|
}
|
25
26
|
|
26
|
-
.#{$block-class} .#{
|
27
|
-
.#{$block-class} .#{
|
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);
|
@@ -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
|
+
}
|