carbon-react 127.0.1 → 127.0.2
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/esm/components/flat-table/flat-table-cell/flat-table-cell.style.js +4 -6
- package/esm/components/flat-table/flat-table-row/flat-table-row.style.js +0 -4
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.js +4 -0
- package/esm/components/flat-table/sort/sort.component.js +8 -5
- package/esm/components/flat-table/sort/sort.style.d.ts +7 -1
- package/esm/components/flat-table/sort/sort.style.js +8 -8
- package/lib/components/flat-table/flat-table-cell/flat-table-cell.style.js +4 -6
- package/lib/components/flat-table/flat-table-row/flat-table-row.style.js +0 -4
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.js +4 -0
- package/lib/components/flat-table/sort/sort.component.js +6 -3
- package/lib/components/flat-table/sort/sort.style.d.ts +7 -1
- package/lib/components/flat-table/sort/sort.style.js +8 -8
- package/package.json +1 -1
|
@@ -2,7 +2,6 @@ import styled, { css } from "styled-components";
|
|
|
2
2
|
import { padding } from "styled-system";
|
|
3
3
|
import baseTheme from "../../../style/themes/base";
|
|
4
4
|
import { toColor } from "../../../style/utils/color";
|
|
5
|
-
import StyledIcon from "../../icon/icon.style";
|
|
6
5
|
const verticalBorderSizes = {
|
|
7
6
|
small: "1px",
|
|
8
7
|
medium: "2px",
|
|
@@ -58,6 +57,10 @@ const StyledFlatTableCell = styled.td`
|
|
|
58
57
|
${verticalBorderColor && css`
|
|
59
58
|
border-right-color: ${toColor(theme, verticalBorderColor)};
|
|
60
59
|
`}
|
|
60
|
+
|
|
61
|
+
[data-component="icon"]:not([color]) {
|
|
62
|
+
color: var(--colorsActionMinor500);
|
|
63
|
+
}
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
&:first-of-type {
|
|
@@ -92,11 +95,6 @@ const StyledCellContent = styled.div`
|
|
|
92
95
|
display: flex;
|
|
93
96
|
align-items: center;
|
|
94
97
|
line-height: 1em;
|
|
95
|
-
|
|
96
|
-
${StyledIcon} {
|
|
97
|
-
width: 16px;
|
|
98
|
-
height: 16px;
|
|
99
|
-
}
|
|
100
98
|
`}
|
|
101
99
|
`;
|
|
102
100
|
StyledFlatTableCell.defaultProps = {
|
|
@@ -73,6 +73,10 @@ const StyledFlatTableRowHeader = styled.th.attrs(({
|
|
|
73
73
|
${verticalBorderColor && css`
|
|
74
74
|
border-${stickyAlignment === "right" ? "left" : "right"}-color: ${toColor(theme, verticalBorderColor)};
|
|
75
75
|
`}
|
|
76
|
+
|
|
77
|
+
[data-component="icon"]:not([color]) {
|
|
78
|
+
color: var(--colorsActionMinor500);
|
|
79
|
+
}
|
|
76
80
|
}
|
|
77
81
|
|
|
78
82
|
${expandable && css`
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, { useRef } from "react";
|
|
1
|
+
import React, { useRef, useContext } from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import Event from "../../../__internal__/utils/helpers/events";
|
|
4
|
-
import
|
|
5
|
-
import { StyledSort, StyledSpaceHolder } from "./sort.style";
|
|
4
|
+
import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
|
|
6
5
|
import guid from "../../../__internal__/utils/helpers/guid";
|
|
6
|
+
import { FlatTableThemeContext } from "../flat-table.component";
|
|
7
7
|
const Sort = ({
|
|
8
8
|
children,
|
|
9
9
|
onClick,
|
|
@@ -17,6 +17,9 @@ const Sort = ({
|
|
|
17
17
|
}
|
|
18
18
|
return null;
|
|
19
19
|
};
|
|
20
|
+
const {
|
|
21
|
+
colorTheme
|
|
22
|
+
} = useContext(FlatTableThemeContext);
|
|
20
23
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
21
24
|
hidden: true,
|
|
22
25
|
id: id.current
|
|
@@ -27,9 +30,9 @@ const Sort = ({
|
|
|
27
30
|
onClick: onClick,
|
|
28
31
|
sortType: sortType,
|
|
29
32
|
"aria-labelledby": id.current
|
|
30
|
-
}, children, sortType && /*#__PURE__*/React.createElement(
|
|
33
|
+
}, children, sortType && /*#__PURE__*/React.createElement(StyledSortIcon, {
|
|
31
34
|
type: sortType === "ascending" ? "sort_up" : "sort_down",
|
|
32
|
-
|
|
35
|
+
iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
|
|
33
36
|
})), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
|
|
34
37
|
};
|
|
35
38
|
export default Sort;
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StyledIconProps } from "../../icon/icon.style";
|
|
1
3
|
import { SortProps } from "./sort.component";
|
|
2
4
|
declare const StyledSort: import("styled-components").StyledComponent<"div", any, Pick<SortProps, "sortType">, never>;
|
|
3
5
|
declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
|
|
6
|
+
interface StylesSortIconProps extends StyledIconProps {
|
|
7
|
+
iconColor?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
|
|
10
|
+
export { StyledSort, StyledSpaceHolder, StyledSortIcon };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
import
|
|
2
|
+
import Icon from "../../icon";
|
|
3
3
|
import addFocusStyling from "../../../style/utils/add-focus-styling";
|
|
4
4
|
import baseTheme from "../../../style/themes/base";
|
|
5
5
|
const oldFocusStyling = `
|
|
@@ -13,12 +13,6 @@ const StyledSort = styled.div`
|
|
|
13
13
|
border-bottom: 1px solid transparent;
|
|
14
14
|
position: relative;
|
|
15
15
|
|
|
16
|
-
${StyledIcon} {
|
|
17
|
-
width: 16px;
|
|
18
|
-
height: 16px;
|
|
19
|
-
padding-left: 6px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
16
|
:hover {
|
|
23
17
|
border-bottom: 1px solid;
|
|
24
18
|
cursor: pointer;
|
|
@@ -38,4 +32,10 @@ const StyledSpaceHolder = styled.div`
|
|
|
38
32
|
display: inline-block;
|
|
39
33
|
width: 22px;
|
|
40
34
|
`;
|
|
41
|
-
|
|
35
|
+
const StyledSortIcon = styled(Icon)`
|
|
36
|
+
padding-left: var(--spacing075);
|
|
37
|
+
color: ${({
|
|
38
|
+
iconColor
|
|
39
|
+
}) => `var(${iconColor})`};
|
|
40
|
+
`;
|
|
41
|
+
export { StyledSort, StyledSpaceHolder, StyledSortIcon };
|
|
@@ -8,7 +8,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
8
8
|
var _styledSystem = require("styled-system");
|
|
9
9
|
var _base = _interopRequireDefault(require("../../../style/themes/base"));
|
|
10
10
|
var _color = require("../../../style/utils/color");
|
|
11
|
-
var _icon = _interopRequireDefault(require("../../icon/icon.style"));
|
|
12
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -67,6 +66,10 @@ const StyledFlatTableCell = exports.StyledFlatTableCell = _styledComponents.defa
|
|
|
67
66
|
${verticalBorderColor && (0, _styledComponents.css)`
|
|
68
67
|
border-right-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
|
|
69
68
|
`}
|
|
69
|
+
|
|
70
|
+
[data-component="icon"]:not([color]) {
|
|
71
|
+
color: var(--colorsActionMinor500);
|
|
72
|
+
}
|
|
70
73
|
}
|
|
71
74
|
|
|
72
75
|
&:first-of-type {
|
|
@@ -101,11 +104,6 @@ const StyledCellContent = exports.StyledCellContent = _styledComponents.default.
|
|
|
101
104
|
display: flex;
|
|
102
105
|
align-items: center;
|
|
103
106
|
line-height: 1em;
|
|
104
|
-
|
|
105
|
-
${_icon.default} {
|
|
106
|
-
width: 16px;
|
|
107
|
-
height: 16px;
|
|
108
|
-
}
|
|
109
107
|
`}
|
|
110
108
|
`;
|
|
111
109
|
StyledFlatTableCell.defaultProps = {
|
|
@@ -82,6 +82,10 @@ const StyledFlatTableRowHeader = exports.StyledFlatTableRowHeader = _styledCompo
|
|
|
82
82
|
${verticalBorderColor && (0, _styledComponents.css)`
|
|
83
83
|
border-${stickyAlignment === "right" ? "left" : "right"}-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
|
|
84
84
|
`}
|
|
85
|
+
|
|
86
|
+
[data-component="icon"]:not([color]) {
|
|
87
|
+
color: var(--colorsActionMinor500);
|
|
88
|
+
}
|
|
85
89
|
}
|
|
86
90
|
|
|
87
91
|
${expandable && (0, _styledComponents.css)`
|
|
@@ -7,9 +7,9 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
|
|
10
|
-
var _icon = _interopRequireDefault(require("../../icon"));
|
|
11
10
|
var _sort = require("./sort.style");
|
|
12
11
|
var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
|
|
12
|
+
var _flatTable = require("../flat-table.component");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -26,6 +26,9 @@ const Sort = ({
|
|
|
26
26
|
}
|
|
27
27
|
return null;
|
|
28
28
|
};
|
|
29
|
+
const {
|
|
30
|
+
colorTheme
|
|
31
|
+
} = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
|
|
29
32
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
30
33
|
hidden: true,
|
|
31
34
|
id: id.current
|
|
@@ -36,9 +39,9 @@ const Sort = ({
|
|
|
36
39
|
onClick: onClick,
|
|
37
40
|
sortType: sortType,
|
|
38
41
|
"aria-labelledby": id.current
|
|
39
|
-
}, children, sortType && /*#__PURE__*/_react.default.createElement(
|
|
42
|
+
}, children, sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSortIcon, {
|
|
40
43
|
type: sortType === "ascending" ? "sort_up" : "sort_down",
|
|
41
|
-
|
|
44
|
+
iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
|
|
42
45
|
})), !sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSpaceHolder, null));
|
|
43
46
|
};
|
|
44
47
|
var _default = exports.default = Sort;
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StyledIconProps } from "../../icon/icon.style";
|
|
1
3
|
import { SortProps } from "./sort.component";
|
|
2
4
|
declare const StyledSort: import("styled-components").StyledComponent<"div", any, Pick<SortProps, "sortType">, never>;
|
|
3
5
|
declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
|
|
6
|
+
interface StylesSortIconProps extends StyledIconProps {
|
|
7
|
+
iconColor?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
|
|
10
|
+
export { StyledSort, StyledSpaceHolder, StyledSortIcon };
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledSpaceHolder = exports.StyledSort = void 0;
|
|
6
|
+
exports.StyledSpaceHolder = exports.StyledSortIcon = exports.StyledSort = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _icon = _interopRequireDefault(require("../../icon
|
|
8
|
+
var _icon = _interopRequireDefault(require("../../icon"));
|
|
9
9
|
var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
|
|
10
10
|
var _base = _interopRequireDefault(require("../../../style/themes/base"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -20,12 +20,6 @@ const StyledSort = exports.StyledSort = _styledComponents.default.div`
|
|
|
20
20
|
border-bottom: 1px solid transparent;
|
|
21
21
|
position: relative;
|
|
22
22
|
|
|
23
|
-
${_icon.default} {
|
|
24
|
-
width: 16px;
|
|
25
|
-
height: 16px;
|
|
26
|
-
padding-left: 6px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
23
|
:hover {
|
|
30
24
|
border-bottom: 1px solid;
|
|
31
25
|
cursor: pointer;
|
|
@@ -44,4 +38,10 @@ StyledSort.defaultProps = {
|
|
|
44
38
|
const StyledSpaceHolder = exports.StyledSpaceHolder = _styledComponents.default.div`
|
|
45
39
|
display: inline-block;
|
|
46
40
|
width: 22px;
|
|
41
|
+
`;
|
|
42
|
+
const StyledSortIcon = exports.StyledSortIcon = (0, _styledComponents.default)(_icon.default)`
|
|
43
|
+
padding-left: var(--spacing075);
|
|
44
|
+
color: ${({
|
|
45
|
+
iconColor
|
|
46
|
+
}) => `var(${iconColor})`};
|
|
47
47
|
`;
|