@scality/core-ui 0.120.0 → 0.121.0

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 (12) hide show
  1. package/dist/components/linetemporalchart/LineTemporalChart.component.js +6 -6
  2. package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
  3. package/dist/components/searchinput/SearchInput.component.js +6 -1
  4. package/dist/components/selectv2/Selectv2.component.d.ts +1 -1
  5. package/dist/components/selectv2/Selectv2.component.d.ts.map +1 -1
  6. package/dist/components/vegachartv2/VegaChartV2.component.js +3 -3
  7. package/package.json +14 -14
  8. package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx +6 -6
  9. package/src/lib/components/searchinput/SearchInput.component.tsx +6 -1
  10. package/src/lib/components/selectv2/Selectv2.component.tsx +1 -1
  11. package/src/lib/components/vegachartv2/VegaChartV2.component.tsx +3 -3
  12. package/stories/barchart.stories.tsx +1 -7
package/dist/components/linetemporalchart/LineTemporalChart.component.js CHANGED
@@ -10,7 +10,7 @@ import { useCursorX } from '../vegachartv2/SyncedCursorCharts';
10
10
  import { ChartTitleText } from '../text/Text.component';
11
11
  import { convert2VegaData, getUnitLabel, convertDataBaseValue, addMissingDataPoint, getRelativeValue, getColorDomains, relativeDatumToOriginalDatum, normlizeVegaFieldName, } from './ChartUtil';
12
12
  import { useMetricsTimeSpan } from './MetricTimespanProvider';
13
- import { spacing } from '../../style/theme';
13
+ import { spacing } from '../../spacing';
14
14
  import { SmallerText } from '../text/Text.component';
15
15
  import { Loader } from '../loader/Loader.component';
16
16
  import { formatValue } from './tooltip/index';
@@ -51,12 +51,12 @@ const Legends = styled.div `
51
51
  align-items: center;
52
52
  `;
53
53
  const LegendStroke = styled.div `
54
- margin: 0 ${spacing.sp8} 0 ${spacing.sp16};
55
- height: ${spacing.sp2};
54
+ margin: 0 ${spacing.r8} 0 ${spacing.r16};
55
+ height: ${spacing.r2};
56
56
  background: ${(props) => props.isLineDashed
57
- ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
57
+ ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.r1},transparent ${spacing.r1},transparent ${spacing.r2})`
58
58
  : props.lineColor};
59
- width: ${spacing.sp8};
59
+ width: ${spacing.r8};
60
60
  `;
61
61
  const ChartHeader = styled.div `
62
62
  display: flex;
@@ -552,7 +552,7 @@ function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange
552
552
  minWidth: '15rem',
553
553
  display: 'block',
554
554
  }, children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && (_jsx(Loader, { style: {
555
- paddingLeft: `${spacing.sp4}`,
555
+ paddingLeft: `${spacing.r4}`,
556
556
  } }))] }), _jsx(VegaChart, { spec: spec, onHover: (datum) => {
557
557
  if (onHover) {
558
558
  onHover({
package/dist/components/searchinput/SearchInput.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAkCF,QAAA,MAAM,WAAW,2FAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,2FAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
package/dist/components/searchinput/SearchInput.component.js CHANGED
@@ -8,10 +8,15 @@ import { spacing } from '../../spacing';
8
8
  const SearchInputContainer = styled.div `
9
9
  position: relative;
10
10
  width: max-content;
11
- input {
11
+
12
+ input[value] {
12
13
  max-width: calc(100% - 1rem - ${spacing.f8} - 1rem);
13
14
  }
14
15
 
16
+ input[value=''] {
17
+ max-width: calc(100% - 1rem - ${spacing.f8});
18
+ }
19
+
15
20
  ${(props) => {
16
21
  if (props.disabled) {
17
22
  return css `
package/dist/components/selectv2/Selectv2.component.d.ts CHANGED
@@ -5,7 +5,7 @@ export type OptionProps = {
5
5
  icon?: React.ReactNode;
6
6
  children?: React.ReactNode;
7
7
  value: string;
8
- disabledReason?: React.ReactNode;
8
+ disabledReason?: JSX.Element;
9
9
  };
10
10
  export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
11
11
  export type SelectProps = {
package/dist/components/selectv2/Selectv2.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAyND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
1
+ {"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC9B,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAyND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
package/dist/components/vegachartv2/VegaChartV2.component.js CHANGED
@@ -50,7 +50,7 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
50
50
  const currentTheme = useTheme();
51
51
  const themeConfig = {
52
52
  config: {
53
- background: currentTheme.backgroundLevel1,
53
+ background: 'transparent',
54
54
  axis: {
55
55
  labelColor: currentTheme.textSecondary,
56
56
  titleColor: currentTheme.textSecondary,
@@ -62,7 +62,8 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
62
62
  font: 'Lato',
63
63
  },
64
64
  view: {
65
- stroke: 'transparent',
65
+ stroke: currentTheme.border,
66
+ strokeWidth: 0.5,
66
67
  fill: currentTheme.backgroundLevel1,
67
68
  },
68
69
  // the headers provide a title and labels for faceted plots.
@@ -212,7 +213,6 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
212
213
  ]);
213
214
  return (_jsx("div", { className: "sc-vegachart", ref: vegaDOMInstance, style: {
214
215
  width: '100%',
215
- border: `${currentTheme.backgroundLevel3} 1px solid`,
216
216
  }, children: _jsx(VegaTooltipTheme, {}) }));
217
217
  } // @ts-expect-error
218
218
  export const VegaChart = React.forwardRef(VegaChartInternal);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.120.0",
3
+ "version": "0.121.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -33,18 +33,18 @@
33
33
  "@babel/preset-env": "^7.17.10",
34
34
  "@babel/preset-react": "^7.16.7",
35
35
  "@babel/preset-typescript": "^7.16.7",
36
- "@storybook/addon-actions": "^7.6.14",
37
- "@storybook/addon-essentials": "^7.6.14",
38
- "@storybook/addon-links": "^7.6.14",
39
- "@storybook/addon-mdx-gfm": "^7.6.14",
40
- "@storybook/addon-storyshots": "^7.6.14",
41
- "@storybook/addon-storysource": "^7.6.14",
42
- "@storybook/blocks": "^7.6.14",
43
- "@storybook/manager-api": "^7.6.14",
44
- "@storybook/react": "^7.6.14",
45
- "@storybook/react-webpack5": "^7.6.14",
36
+ "@storybook/addon-actions": "^7.6.17",
37
+ "@storybook/addon-essentials": "^7.6.17",
38
+ "@storybook/addon-links": "^7.6.17",
39
+ "@storybook/addon-mdx-gfm": "^7.6.17",
40
+ "@storybook/addon-storyshots": "^7.6.17",
41
+ "@storybook/addon-storysource": "^7.6.17",
42
+ "@storybook/blocks": "^7.6.17",
43
+ "@storybook/manager-api": "^7.6.17",
44
+ "@storybook/react": "^7.6.17",
45
+ "@storybook/react-webpack5": "^7.6.17",
46
46
  "@storybook/storybook-deployer": "^2.8.16",
47
- "@storybook/theming": "^7.6.14",
47
+ "@storybook/theming": "^7.6.17",
48
48
  "@testing-library/jest-dom": "^5.14.1",
49
49
  "@testing-library/react": "^11.2.7",
50
50
  "@testing-library/react-hooks": "^8.0.1",
@@ -75,7 +75,7 @@
75
75
  "regenerator-runtime": "^0.13.7",
76
76
  "rimraf": "^3.0.0",
77
77
  "source-map-explorer": "^2.0.1",
78
- "storybook": "^7.6.14",
78
+ "storybook": "^7.6.17",
79
79
  "typescript": "^5.3.2"
80
80
  },
81
81
  "husky": {
@@ -100,7 +100,7 @@
100
100
  "@fortawesome/free-solid-svg-icons": "^5.15.3",
101
101
  "@fortawesome/react-fontawesome": "^0.1.14",
102
102
  "@js-temporal/polyfill": "^0.4.4",
103
- "@storybook/preview-api": "^7.6.14",
103
+ "@storybook/preview-api": "^7.6.17",
104
104
  "framer-motion": "^4.1.17",
105
105
  "polished": "3.4.1",
106
106
  "pretty-bytes": "^5.6.0",
package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx CHANGED
@@ -27,7 +27,7 @@ import {
27
27
  normlizeVegaFieldName,
28
28
  } from './ChartUtil';
29
29
  import { useMetricsTimeSpan } from './MetricTimespanProvider';
30
- import { spacing } from '../../style/theme';
30
+ import { spacing } from '../../spacing';
31
31
  import { SmallerText } from '../text/Text.component';
32
32
  import { Loader } from '../loader/Loader.component';
33
33
  import { formatValue } from './tooltip/index';
@@ -68,13 +68,13 @@ const Legends = styled.div`
68
68
  align-items: center;
69
69
  `;
70
70
  const LegendStroke = styled.div`
71
- margin: 0 ${spacing.sp8} 0 ${spacing.sp16};
72
- height: ${spacing.sp2};
71
+ margin: 0 ${spacing.r8} 0 ${spacing.r16};
72
+ height: ${spacing.r2};
73
73
  background: ${(props) =>
74
74
  props.isLineDashed
75
- ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
75
+ ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.r1},transparent ${spacing.r1},transparent ${spacing.r2})`
76
76
  : props.lineColor};
77
- width: ${spacing.sp8};
77
+ width: ${spacing.r8};
78
78
  `;
79
79
  const ChartHeader = styled.div`
80
80
  display: flex;
@@ -731,7 +731,7 @@ function LineTemporalChart({
731
731
  {isLoading && (
732
732
  <Loader
733
733
  style={{
734
- paddingLeft: `${spacing.sp4}`,
734
+ paddingLeft: `${spacing.r4}`,
735
735
  }}
736
736
  />
737
737
  )}
package/src/lib/components/searchinput/SearchInput.component.tsx CHANGED
@@ -20,10 +20,15 @@ const SearchInputContainer = styled.div<{
20
20
  }>`
21
21
  position: relative;
22
22
  width: max-content;
23
- input {
23
+
24
+ input[value] {
24
25
  max-width: calc(100% - 1rem - ${spacing.f8} - 1rem);
25
26
  }
26
27
 
28
+ input[value=''] {
29
+ max-width: calc(100% - 1rem - ${spacing.f8});
30
+ }
31
+
27
32
  ${(props) => {
28
33
  if (props.disabled) {
29
34
  return css`
package/src/lib/components/selectv2/Selectv2.component.tsx CHANGED
@@ -24,7 +24,7 @@ export type OptionProps = {
24
24
  icon?: React.ReactNode;
25
25
  children?: React.ReactNode;
26
26
  value: string;
27
- disabledReason?: React.ReactNode;
27
+ disabledReason?: JSX.Element;
28
28
  };
29
29
  const usePreviousValue = (value) => {
30
30
  const ref = useRef(null);
package/src/lib/components/vegachartv2/VegaChartV2.component.tsx CHANGED
@@ -75,7 +75,7 @@ function VegaChartInternal(
75
75
  const currentTheme = useTheme();
76
76
  const themeConfig = {
77
77
  config: {
78
- background: currentTheme.backgroundLevel1,
78
+ background: 'transparent',
79
79
  axis: {
80
80
  labelColor: currentTheme.textSecondary,
81
81
  titleColor: currentTheme.textSecondary,
@@ -87,7 +87,8 @@ function VegaChartInternal(
87
87
  font: 'Lato',
88
88
  },
89
89
  view: {
90
- stroke: 'transparent',
90
+ stroke: currentTheme.border,
91
+ strokeWidth: 0.5,
91
92
  fill: currentTheme.backgroundLevel1,
92
93
  },
93
94
  // the headers provide a title and labels for faceted plots.
@@ -265,7 +266,6 @@ function VegaChartInternal(
265
266
  ref={vegaDOMInstance}
266
267
  style={{
267
268
  width: '100%',
268
- border: `${currentTheme.backgroundLevel3} 1px solid`,
269
269
  }}
270
270
  >
271
271
  <VegaTooltipTheme />
package/stories/barchart.stories.tsx CHANGED
@@ -114,13 +114,7 @@ export default {
114
114
  title: 'Components/Data Display/Charts/BarChart',
115
115
  component: BarChart,
116
116
  decorators: [
117
- (story: Component) => (
118
- <Wrapper
119
- style={{ minHeight: '30vh', padding: '3rem', backgroundColor: 'white' }}
120
- >
121
- <SyncedCursorCharts>{story()}</SyncedCursorCharts>
122
- </Wrapper>
123
- ),
117
+ (story: Component) => <SyncedCursorCharts>{story()}</SyncedCursorCharts>,
124
118
  ],
125
119
  argTypes: {
126
120
  data: {