@nimbus-ds/components 5.0.0-rc.4 β†’ 5.0.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 (4) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.d.ts +261 -40
  3. package/dist/index.js +1 -1
  4. package/package.json +4 -5
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
@@ -820,10 +820,7 @@ declare const propertiesText: {
820
820
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
821
821
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
822
822
  "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
823
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
824
- * The color property is used to set the color of the text.
825
- * @default neutral-textLow
826
- */
823
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
827
824
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
828
825
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
829
826
  "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -891,42 +888,265 @@ export interface TextSprinkle {
891
888
  * @default neutral-textLow
892
889
  */
893
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>;
894
899
  }
895
900
  declare const text: {
896
- sprinkle: ((props: {
897
- 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" | {
898
- 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;
899
- 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;
900
- 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;
901
- 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;
902
- }) | undefined;
903
- textAlign?: (TextAlign | {
904
- xs?: TextAlign | undefined;
905
- md?: TextAlign | undefined;
906
- lg?: TextAlign | undefined;
907
- xl?: TextAlign | undefined;
908
- }) | undefined;
909
- lineHeight?: ("caption" | "base" | "highlight" | {
910
- xs?: "caption" | "base" | "highlight" | undefined;
911
- md?: "caption" | "base" | "highlight" | undefined;
912
- lg?: "caption" | "base" | "highlight" | undefined;
913
- xl?: "caption" | "base" | "highlight" | undefined;
914
- }) | undefined;
915
- fontWeight?: ("regular" | "medium" | "bold" | {
916
- xs?: "regular" | "medium" | "bold" | undefined;
917
- md?: "regular" | "medium" | "bold" | undefined;
918
- lg?: "regular" | "medium" | "bold" | undefined;
919
- xl?: "regular" | "medium" | "bold" | undefined;
920
- }) | undefined;
921
- fontSize?: ("caption" | "base" | "highlight" | {
922
- xs?: "caption" | "base" | "highlight" | undefined;
923
- md?: "caption" | "base" | "highlight" | undefined;
924
- lg?: "caption" | "base" | "highlight" | undefined;
925
- xl?: "caption" | "base" | "highlight" | undefined;
926
- }) | undefined;
927
- }) => string) & {
928
- properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
929
- };
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
+ ]>;
930
1150
  properties: {
931
1151
  color: {
932
1152
  currentColor: string;
@@ -972,6 +1192,7 @@ declare const text: {
972
1192
  };
973
1193
  classnames: {
974
1194
  base: string;
1195
+ trim: string;
975
1196
  };
976
1197
  };
977
1198
  declare const propertiesTitle: {
@@ -2226,7 +2447,7 @@ declare const TextSkeleton: React.FC<TextSkeletonProps>;
2226
2447
  export interface TextComponents {
2227
2448
  Skeleton: typeof TextSkeleton;
2228
2449
  }
2229
- export interface TextProperties extends TextSprinkle {
2450
+ export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2230
2451
  /**
2231
2452
  * The content of the link.
2232
2453
  * @TJS-type React.ReactNode
@@ -2238,7 +2459,7 @@ export interface TextProperties extends TextSprinkle {
2238
2459
  */
2239
2460
  as?: "p" | "span";
2240
2461
  }
2241
- export type TextProps = TextProperties & TextSprinkle & HTMLAttributes<HTMLParagraphElement>;
2462
+ export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
2242
2463
  export declare const Text: React.FC<TextProps> & TextComponents;
2243
2464
  export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
2244
2465
  export type TextareaSkeletonProps = TextareaSkeletonProperties;