@nimbus-ds/components 4.3.0-rc.2 β†’ 4.4.0-rc.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.
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 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,21 @@
2
2
 
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
4
4
 
5
+ ## 2023-05-22 `4.4.0`
6
+
7
+ ### πŸŽ‰ New features
8
+
9
+ - Added new `lineClamp` property on `Text` component. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
10
+
11
+ ### πŸ› Bug fixes
12
+
13
+ - 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))
14
+
15
+ ### πŸ“š 3rd party library updates
16
+
17
+ - Removed `@floating-ui/react-dom-interactions`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
18
+ - Added `@floating-ui/react`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
19
+
5
20
  ## 2023-05-08 `4.3.0`
6
21
 
7
22
  ### πŸŽ‰ New features
package/dist/index.d.ts CHANGED
@@ -733,10 +733,7 @@ declare const propertiesText: {
733
733
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
734
734
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
735
735
  "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
736
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
737
- * The color property is used to set the color of the text.
738
- * @default neutral-textLow
739
- */
736
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
740
737
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
741
738
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
742
739
  "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -804,42 +801,265 @@ export interface TextSprinkle {
804
801
  * @default neutral-textLow
805
802
  */
806
803
  color?: TextColorProperties | TextConditions<TextColorProperties>;
804
+ /**
805
+ * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
806
+ */
807
+ lineClamp?: number | TextConditions<number>;
808
+ /**
809
+ * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
810
+ */
811
+ WebkitLineClamp?: number | TextConditions<number>;
807
812
  }
808
813
  declare const text: {
809
- sprinkle: ((props: {
810
- color?: ("primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | {
811
- xs?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
812
- md?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
813
- lg?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
814
- xl?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
815
- }) | undefined;
816
- textAlign?: (TextAlign | {
817
- xs?: TextAlign | undefined;
818
- md?: TextAlign | undefined;
819
- lg?: TextAlign | undefined;
820
- xl?: TextAlign | undefined;
821
- }) | undefined;
822
- lineHeight?: ("caption" | "base" | "highlight" | {
823
- xs?: "caption" | "base" | "highlight" | undefined;
824
- md?: "caption" | "base" | "highlight" | undefined;
825
- lg?: "caption" | "base" | "highlight" | undefined;
826
- xl?: "caption" | "base" | "highlight" | undefined;
827
- }) | undefined;
828
- fontWeight?: ("regular" | "medium" | "bold" | {
829
- xs?: "regular" | "medium" | "bold" | undefined;
830
- md?: "regular" | "medium" | "bold" | undefined;
831
- lg?: "regular" | "medium" | "bold" | undefined;
832
- xl?: "regular" | "medium" | "bold" | undefined;
833
- }) | undefined;
834
- fontSize?: ("caption" | "base" | "highlight" | {
835
- xs?: "caption" | "base" | "highlight" | undefined;
836
- md?: "caption" | "base" | "highlight" | undefined;
837
- lg?: "caption" | "base" | "highlight" | undefined;
838
- xl?: "caption" | "base" | "highlight" | undefined;
839
- }) | undefined;
840
- }) => string) & {
841
- properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
842
- };
814
+ sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
815
+ {
816
+ config: {
817
+ color: {
818
+ values: {
819
+ "primary-surface": {
820
+ default: string;
821
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
822
+ };
823
+ "primary-interactive": {
824
+ default: string;
825
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
826
+ };
827
+ "primary-textLow": {
828
+ default: string;
829
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
830
+ };
831
+ "primary-textHigh": {
832
+ default: string;
833
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
834
+ };
835
+ "success-surface": {
836
+ default: string;
837
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
838
+ };
839
+ "success-interactive": {
840
+ default: string;
841
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
842
+ };
843
+ "success-textLow": {
844
+ default: string;
845
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
846
+ };
847
+ "success-textHigh": {
848
+ default: string;
849
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
850
+ };
851
+ "warning-surface": {
852
+ default: string;
853
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
854
+ };
855
+ "warning-interactive": {
856
+ default: string;
857
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
858
+ };
859
+ "warning-textLow": {
860
+ default: string;
861
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
862
+ };
863
+ "warning-textHigh": {
864
+ default: string;
865
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
866
+ };
867
+ "danger-surface": {
868
+ default: string;
869
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
870
+ };
871
+ "danger-interactive": {
872
+ default: string;
873
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
874
+ };
875
+ "danger-textLow": {
876
+ default: string;
877
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
878
+ };
879
+ "danger-textHigh": {
880
+ default: string;
881
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
882
+ };
883
+ "neutral-background": {
884
+ default: string;
885
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
886
+ };
887
+ "neutral-surface": {
888
+ default: string;
889
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
890
+ };
891
+ "neutral-interactive": {
892
+ default: string;
893
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
894
+ };
895
+ "neutral-textDisabled": {
896
+ default: string;
897
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
898
+ };
899
+ "neutral-textLow": {
900
+ default: string;
901
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
902
+ };
903
+ "neutral-textHigh": {
904
+ default: string;
905
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
906
+ };
907
+ currentColor: {
908
+ default: string;
909
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
910
+ };
911
+ };
912
+ staticScale: {
913
+ currentColor: string;
914
+ "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
915
+ "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
916
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
917
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
918
+ "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
919
+ "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
920
+ "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
921
+ "success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
922
+ "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
923
+ "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
924
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
925
+ "warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
926
+ "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
927
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
928
+ "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
929
+ "danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
930
+ "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
931
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
932
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
933
+ "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
934
+ "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
935
+ "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
936
+ };
937
+ name: "color";
938
+ };
939
+ textAlign: {
940
+ values: {
941
+ left: {
942
+ default: string;
943
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
944
+ };
945
+ right: {
946
+ default: string;
947
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
948
+ };
949
+ center: {
950
+ default: string;
951
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
952
+ };
953
+ justify: {
954
+ default: string;
955
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
956
+ };
957
+ };
958
+ staticScale: TextAlign[];
959
+ name: "textAlign";
960
+ };
961
+ lineHeight: {
962
+ values: {
963
+ caption: {
964
+ default: string;
965
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
966
+ };
967
+ base: {
968
+ default: string;
969
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
970
+ };
971
+ highlight: {
972
+ default: string;
973
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
974
+ };
975
+ };
976
+ staticScale: {
977
+ readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
978
+ readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
979
+ readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
980
+ };
981
+ name: "lineHeight";
982
+ };
983
+ fontWeight: {
984
+ values: {
985
+ regular: {
986
+ default: string;
987
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
988
+ };
989
+ medium: {
990
+ default: string;
991
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
992
+ };
993
+ bold: {
994
+ default: string;
995
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
996
+ };
997
+ };
998
+ staticScale: {
999
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1000
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1001
+ bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1002
+ };
1003
+ name: "fontWeight";
1004
+ };
1005
+ fontSize: {
1006
+ values: {
1007
+ caption: {
1008
+ default: string;
1009
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1010
+ };
1011
+ base: {
1012
+ default: string;
1013
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1014
+ };
1015
+ highlight: {
1016
+ default: string;
1017
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1018
+ };
1019
+ };
1020
+ staticScale: {
1021
+ caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1022
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1023
+ highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1024
+ };
1025
+ name: "fontSize";
1026
+ };
1027
+ };
1028
+ } & {
1029
+ config: {
1030
+ lineClamp: {
1031
+ dynamic: {
1032
+ default: string;
1033
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1034
+ };
1035
+ dynamicScale: true;
1036
+ name: "lineClamp";
1037
+ vars: {
1038
+ default: string;
1039
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1040
+ };
1041
+ };
1042
+ WebkitLineClamp: {
1043
+ dynamic: {
1044
+ default: string;
1045
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1046
+ };
1047
+ dynamicScale: boolean;
1048
+ name: "WebkitLineClamp";
1049
+ vars: {
1050
+ default: string;
1051
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1052
+ };
1053
+ };
1054
+ };
1055
+ } & {
1056
+ config: {
1057
+ [x: string]: {
1058
+ mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "lineClamp" | "WebkitLineClamp")[];
1059
+ };
1060
+ };
1061
+ }
1062
+ ]>;
843
1063
  properties: {
844
1064
  color: {
845
1065
  currentColor: string;
@@ -885,6 +1105,7 @@ declare const text: {
885
1105
  };
886
1106
  classnames: {
887
1107
  base: string;
1108
+ trim: string;
888
1109
  };
889
1110
  };
890
1111
  declare const propertiesTitle: {
@@ -2024,7 +2245,7 @@ declare const TextSkeleton: React.FC<TextSkeletonProps>;
2024
2245
  export interface TextComponents {
2025
2246
  Skeleton: typeof TextSkeleton;
2026
2247
  }
2027
- export interface TextProperties extends TextSprinkle {
2248
+ export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2028
2249
  /**
2029
2250
  * The content of the link.
2030
2251
  * @TJS-type React.ReactNode
@@ -2036,7 +2257,7 @@ export interface TextProperties extends TextSprinkle {
2036
2257
  */
2037
2258
  as?: "p" | "span";
2038
2259
  }
2039
- export type TextProps = TextProperties & TextSprinkle & HTMLAttributes<HTMLParagraphElement>;
2260
+ export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
2040
2261
  export declare const Text: React.FC<TextProps> & TextComponents;
2041
2262
  export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
2042
2263
  export type TextareaSkeletonProps = TextareaSkeletonProperties;