@mtes-mct/monitor-ui 2.17.0 → 2.18.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/CHANGELOG.md +14 -0
- package/index.js +11 -3
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/Button.d.ts +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [2.18.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.17.0...v2.18.0) (2023-02-17)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **elements:** add ellipsis to long Button labels ([287a56b](https://github.com/MTES-MCT/monitor-ui/commit/287a56bd1c598da0cd25feae50c466062cafc725))
|
|
7
|
+
|
|
8
|
+
# [2.17.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.16.0...v2.17.0) (2023-02-17)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **fields:** add coordinates input ([7912c7a](https://github.com/MTES-MCT/monitor-ui/commit/7912c7a47aa1afeb90e6bc7bbeb49bcf1b9bd17f))
|
|
14
|
+
|
|
1
15
|
# [2.16.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.15.0...v2.16.0) (2023-02-13)
|
|
2
16
|
|
|
3
17
|
|
package/index.js
CHANGED
|
@@ -2076,7 +2076,7 @@ const ICON_SIZE = {
|
|
|
2076
2076
|
[Size.SMALL]: 12
|
|
2077
2077
|
};
|
|
2078
2078
|
function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, onClick, size = Size.NORMAL, type = 'button', ...nativeProps }) {
|
|
2079
|
-
const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children] })), [children, Icon, size]);
|
|
2079
|
+
const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children && jsx(ButtonLabel, { children: children })] })), [children, Icon, size]);
|
|
2080
2080
|
const handleClick = useCallback((event) => {
|
|
2081
2081
|
stopMouseEventPropagation(event);
|
|
2082
2082
|
if (onClick) {
|
|
@@ -2113,11 +2113,11 @@ const PADDING$1 = {
|
|
|
2113
2113
|
};
|
|
2114
2114
|
const StyledButton$1 = styled.button `
|
|
2115
2115
|
align-items: center;
|
|
2116
|
-
display: flex;
|
|
2116
|
+
display: inline-flex;
|
|
2117
2117
|
font-size: ${p => FONT_SIZE[p.size]};
|
|
2118
2118
|
justify-content: center;
|
|
2119
|
+
max-width: 100%;
|
|
2119
2120
|
padding: ${p => PADDING$1[p.size]};
|
|
2120
|
-
white-space: nowrap;
|
|
2121
2121
|
width: ${p => (p.isFullWidth ? '100%' : 'auto')};
|
|
2122
2122
|
|
|
2123
2123
|
/* SVG Icon Components are wrapped within a <div /> */
|
|
@@ -2125,6 +2125,14 @@ const StyledButton$1 = styled.button `
|
|
|
2125
2125
|
margin-right: 5px;
|
|
2126
2126
|
}
|
|
2127
2127
|
`;
|
|
2128
|
+
const ButtonLabel = styled.span `
|
|
2129
|
+
line-height: 1.3846;
|
|
2130
|
+
margin-top: -3px;
|
|
2131
|
+
min-width: 0;
|
|
2132
|
+
overflow: hidden;
|
|
2133
|
+
text-overflow: ellipsis;
|
|
2134
|
+
white-space: nowrap;
|
|
2135
|
+
`;
|
|
2128
2136
|
const PrimaryButton = styled.button `
|
|
2129
2137
|
background-color: ${p => p.theme.color.charcoal};
|
|
2130
2138
|
border: 1px solid ${p => p.theme.color.charcoal};
|