@nimbus-ds/components 5.0.0-rc.3 β†’ 5.0.0-rc.5

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 (4) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.d.ts +265 -41
  3. package/dist/index.js +1 -1
  4. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -8,6 +8,21 @@ Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s tea
8
8
 
9
9
  - Changed the dynamic sending option of the `zIndex` property to use `zIndex` in the `Popover` component API. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
10
10
 
11
+ ## 2023-05-22 `4.4.0`
12
+
13
+ ### πŸŽ‰ New features
14
+
15
+ - Added new `lineClamp` property on `Text` component. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
16
+
17
+ ### πŸ› Bug fixes
18
+
19
+ - Fixes a bug on `Modal` component where focus wasn't correctly moved to the modal dialog when pressing tab key. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
20
+
21
+ ### πŸ“š 3rd party library updates
22
+
23
+ - Removed `@floating-ui/react-dom-interactions`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
24
+ - Added `@floating-ui/react`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
25
+
11
26
  ## 2023-05-08 `4.3.0`
12
27
 
13
28
  ### πŸŽ‰ New features
package/dist/index.d.ts CHANGED
@@ -149,7 +149,9 @@ declare const propertiesBox: {
149
149
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
150
150
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
151
151
  };
152
- display: Display[];
152
+ display: Display[]; /**
153
+ * The borderBottomWidth property defines the width of the border at the bottom of a box.
154
+ */
153
155
  flexDirection: FlexDirection[];
154
156
  flexWrap: FlexWrap[];
155
157
  justifyContent: JustifyContent[];
@@ -300,6 +302,7 @@ declare const propertiesBox: {
300
302
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
301
303
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
302
304
  auto: string;
305
+ none: string;
303
306
  };
304
307
  position: Position[];
305
308
  overflow: Overflow[];
@@ -817,10 +820,7 @@ declare const propertiesText: {
817
820
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
818
821
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
819
822
  "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
820
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
821
- * The color property is used to set the color of the text.
822
- * @default neutral-textLow
823
- */
823
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
824
824
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
825
825
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
826
826
  "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -888,42 +888,265 @@ export interface TextSprinkle {
888
888
  * @default neutral-textLow
889
889
  */
890
890
  color?: TextColorProperties | TextConditions<TextColorProperties>;
891
+ /**
892
+ * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
893
+ */
894
+ lineClamp?: number | TextConditions<number>;
895
+ /**
896
+ * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
897
+ */
898
+ WebkitLineClamp?: number | TextConditions<number>;
891
899
  }
892
900
  declare const text: {
893
- sprinkle: ((props: {
894
- color?: ("currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | {
895
- xs?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
896
- md?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
897
- lg?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
898
- xl?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
899
- }) | undefined;
900
- textAlign?: (TextAlign | {
901
- xs?: TextAlign | undefined;
902
- md?: TextAlign | undefined;
903
- lg?: TextAlign | undefined;
904
- xl?: TextAlign | undefined;
905
- }) | undefined;
906
- lineHeight?: ("caption" | "base" | "highlight" | {
907
- xs?: "caption" | "base" | "highlight" | undefined;
908
- md?: "caption" | "base" | "highlight" | undefined;
909
- lg?: "caption" | "base" | "highlight" | undefined;
910
- xl?: "caption" | "base" | "highlight" | undefined;
911
- }) | undefined;
912
- fontWeight?: ("regular" | "medium" | "bold" | {
913
- xs?: "regular" | "medium" | "bold" | undefined;
914
- md?: "regular" | "medium" | "bold" | undefined;
915
- lg?: "regular" | "medium" | "bold" | undefined;
916
- xl?: "regular" | "medium" | "bold" | undefined;
917
- }) | undefined;
918
- fontSize?: ("caption" | "base" | "highlight" | {
919
- xs?: "caption" | "base" | "highlight" | undefined;
920
- md?: "caption" | "base" | "highlight" | undefined;
921
- lg?: "caption" | "base" | "highlight" | undefined;
922
- xl?: "caption" | "base" | "highlight" | undefined;
923
- }) | undefined;
924
- }) => string) & {
925
- properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
926
- };
901
+ sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
902
+ {
903
+ config: {
904
+ color: {
905
+ values: {
906
+ currentColor: {
907
+ default: string;
908
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
909
+ };
910
+ "primary-interactive": {
911
+ default: string;
912
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
913
+ };
914
+ "primary-surface": {
915
+ default: string;
916
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
917
+ };
918
+ "primary-textLow": {
919
+ default: string;
920
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
921
+ };
922
+ "success-textLow": {
923
+ default: string;
924
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
925
+ };
926
+ "success-surface": {
927
+ default: string;
928
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
929
+ };
930
+ "warning-interactive": {
931
+ default: string;
932
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
933
+ };
934
+ "warning-surface": {
935
+ default: string;
936
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
937
+ };
938
+ "warning-textLow": {
939
+ default: string;
940
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
941
+ };
942
+ "danger-interactive": {
943
+ default: string;
944
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
945
+ };
946
+ "danger-surface": {
947
+ default: string;
948
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
949
+ };
950
+ "danger-textLow": {
951
+ default: string;
952
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
953
+ };
954
+ "neutral-background": {
955
+ default: string;
956
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
957
+ };
958
+ "neutral-interactive": {
959
+ default: string;
960
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
961
+ };
962
+ "neutral-surface": {
963
+ default: string;
964
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
965
+ };
966
+ "neutral-textLow": {
967
+ default: string;
968
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
969
+ };
970
+ "success-interactive": {
971
+ default: string;
972
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
973
+ };
974
+ "primary-textHigh": {
975
+ default: string;
976
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
977
+ };
978
+ "success-textHigh": {
979
+ default: string;
980
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
981
+ };
982
+ "warning-textHigh": {
983
+ default: string;
984
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
985
+ };
986
+ "danger-textHigh": {
987
+ default: string;
988
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
989
+ };
990
+ "neutral-textDisabled": {
991
+ default: string;
992
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
993
+ };
994
+ "neutral-textHigh": {
995
+ default: string;
996
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
997
+ };
998
+ };
999
+ staticScale: {
1000
+ currentColor: string;
1001
+ "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1002
+ "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1003
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1004
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1005
+ "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1006
+ "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1007
+ "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1008
+ "success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1009
+ "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1010
+ "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1011
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1012
+ "warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1013
+ "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1014
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1015
+ "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1016
+ "danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1017
+ "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1018
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1019
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1020
+ "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1021
+ "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1022
+ "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1023
+ };
1024
+ name: "color";
1025
+ };
1026
+ textAlign: {
1027
+ values: {
1028
+ left: {
1029
+ default: string;
1030
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1031
+ };
1032
+ right: {
1033
+ default: string;
1034
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1035
+ };
1036
+ center: {
1037
+ default: string;
1038
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1039
+ };
1040
+ justify: {
1041
+ default: string;
1042
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1043
+ };
1044
+ };
1045
+ staticScale: TextAlign[];
1046
+ name: "textAlign";
1047
+ };
1048
+ lineHeight: {
1049
+ values: {
1050
+ caption: {
1051
+ default: string;
1052
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1053
+ };
1054
+ base: {
1055
+ default: string;
1056
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1057
+ };
1058
+ highlight: {
1059
+ default: string;
1060
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1061
+ };
1062
+ };
1063
+ staticScale: {
1064
+ readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1065
+ readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1066
+ readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1067
+ };
1068
+ name: "lineHeight";
1069
+ };
1070
+ fontWeight: {
1071
+ values: {
1072
+ regular: {
1073
+ default: string;
1074
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1075
+ };
1076
+ medium: {
1077
+ default: string;
1078
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1079
+ };
1080
+ bold: {
1081
+ default: string;
1082
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1083
+ };
1084
+ };
1085
+ staticScale: {
1086
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1087
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1088
+ bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1089
+ };
1090
+ name: "fontWeight";
1091
+ };
1092
+ fontSize: {
1093
+ values: {
1094
+ caption: {
1095
+ default: string;
1096
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1097
+ };
1098
+ base: {
1099
+ default: string;
1100
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1101
+ };
1102
+ highlight: {
1103
+ default: string;
1104
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1105
+ };
1106
+ };
1107
+ staticScale: {
1108
+ caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1109
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1110
+ highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1111
+ };
1112
+ name: "fontSize";
1113
+ };
1114
+ };
1115
+ } & {
1116
+ config: {
1117
+ lineClamp: {
1118
+ dynamic: {
1119
+ default: string;
1120
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1121
+ };
1122
+ dynamicScale: true;
1123
+ name: "lineClamp";
1124
+ vars: {
1125
+ default: string;
1126
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1127
+ };
1128
+ };
1129
+ WebkitLineClamp: {
1130
+ dynamic: {
1131
+ default: string;
1132
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1133
+ };
1134
+ dynamicScale: boolean;
1135
+ name: "WebkitLineClamp";
1136
+ vars: {
1137
+ default: string;
1138
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1139
+ };
1140
+ };
1141
+ };
1142
+ } & {
1143
+ config: {
1144
+ [x: string]: {
1145
+ mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "lineClamp" | "WebkitLineClamp")[];
1146
+ };
1147
+ };
1148
+ }
1149
+ ]>;
927
1150
  properties: {
928
1151
  color: {
929
1152
  currentColor: string;
@@ -969,6 +1192,7 @@ declare const text: {
969
1192
  };
970
1193
  classnames: {
971
1194
  base: string;
1195
+ trim: string;
972
1196
  };
973
1197
  };
974
1198
  declare const propertiesTitle: {
@@ -2223,7 +2447,7 @@ declare const TextSkeleton: React.FC<TextSkeletonProps>;
2223
2447
  export interface TextComponents {
2224
2448
  Skeleton: typeof TextSkeleton;
2225
2449
  }
2226
- export interface TextProperties extends TextSprinkle {
2450
+ export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2227
2451
  /**
2228
2452
  * The content of the link.
2229
2453
  * @TJS-type React.ReactNode
@@ -2235,7 +2459,7 @@ export interface TextProperties extends TextSprinkle {
2235
2459
  */
2236
2460
  as?: "p" | "span";
2237
2461
  }
2238
- export type TextProps = TextProperties & TextSprinkle & HTMLAttributes<HTMLParagraphElement>;
2462
+ export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
2239
2463
  export declare const Text: React.FC<TextProps> & TextComponents;
2240
2464
  export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
2241
2465
  export type TextareaSkeletonProps = TextareaSkeletonProperties;