@telus-uds/components-base 1.40.0 → 1.41.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.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @telus-uds/components-base
2
2
 
3
- This log was last generated on Tue, 09 May 2023 00:20:29 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 17 May 2023 00:13:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 1.41.0
8
+
9
+ Wed, 17 May 2023 00:13:27 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - update public mobile and description fontFamily bug (samuraix221@hotmail.com)
14
+ - ButtonBase component replace by IconButton and styles fixed for the Notification component (35577399+JoshHC@users.noreply.github.com)
15
+ - standardization and multibrand effort for expand collapse (akshay.pandey1@telus.com)
16
+ - Add `feedbackBackgroundColor` in `Select` to override background color of `Feedback` (shahzaibkhalidmalik@outlook.com)
17
+ - Refactored selectOuterWidthStyles in ButtonBase to apply both outer width and height (wlsdud194@hotmail.com)
18
+ - Bump @telus-uds/system-theme-tokens to v2.26.0
19
+
20
+ ### Patches
21
+
22
+ - Remove flexGrow from text styles (wlsdud194@hotmail.com)
23
+ - Set icon size to 0 if undefined in IconText (wlsdud194@hotmail.com)
24
+
7
25
  ## 1.40.0
8
26
 
9
- Tue, 09 May 2023 00:20:29 GMT
27
+ Tue, 09 May 2023 00:29:54 GMT
10
28
 
11
29
  ### Minor changes
12
30
 
@@ -222,6 +222,7 @@
222
222
  "fontColor": "color",
223
223
  "dividerColor": "color",
224
224
  "topTextFontSize": "fontSize",
225
+ "strikeThroughPosition": "size",
225
226
  "topTextLineHeight": "lineHeight",
226
227
  "currencySymbolFontSize": "fontSize",
227
228
  "currencySymbolLineHeight": "lineHeight",
@@ -301,10 +302,15 @@
301
302
  "paddingTop": "size",
302
303
  "paddingBottom": "size",
303
304
  "width": "size",
305
+ "height": "size",
304
306
  "minWidth": "size",
305
307
  "iconSize": "size",
306
308
  "iconSpace": "integer",
307
309
  "icon": "icon",
310
+ "borderLeftWidth": "border",
311
+ "borderRightWidth": "border",
312
+ "borderTopWidth": "border",
313
+ "borderBottomWidth": "border",
308
314
  "outerBorderColor": "color",
309
315
  "outerBorderWidth": "border",
310
316
  "outerBorderGap": "size",
@@ -503,59 +509,54 @@
503
509
  "color": "color"
504
510
  },
505
511
  "DatePicker": {
506
- "hiddenInputFieldContainerHeight": "size",
507
- "hiddenInputFieldContainerWidth": "size",
508
- "previousIcon": "icon",
509
- "nextIcon": "icon",
510
- "singleDatePickerBorderColor": "color",
511
- "singleDatePickerRadius": "radius",
512
- "singleDatePickerPaddingTopBottom": "size",
513
- "singleDatePickerLeftRight": "size",
512
+ "calendarBackgroundColor": "color",
513
+ "calendarDayBlockedCalendarHoverBackground": "color",
514
+ "calendarDayBlockedCalendarHoverColor": "color",
515
+ "calendarDayDefaultBackgroundColor": "color",
516
+ "calendarDayDefaultBorder": "border",
517
+ "calendarDayDefaultBorderColor": "color",
518
+ "calendarDayDefaultCalendarDaySelectedHoverBackground": "color",
519
+ "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "color",
520
+ "calendarDayDefaultCalendarDaySelectedHoverColor": "color",
521
+ "calendarDayDefaultColor": "color",
522
+ "calendarDayDefaultFontName": "fontName",
523
+ "calendarDayDefaultFontSize": "fontSize",
524
+ "calendarDayDefaultFontWeight": "fontWeight",
525
+ "calendarDaySelectedFocusBeforeBackground": "color",
526
+ "calendarDaySelectedHoverBackground": "color",
527
+ "calendarDaySelectedHoverBeforeBackground": "color",
528
+ "calendarDaySelectedHoverBeforeBorderColor": "color",
529
+ "calendarDaySelectedHoverBorderColor": "color",
530
+ "calendarDaySelectedHoverColor": "color",
531
+ "calendarMonthCaptionColor": "color",
532
+ "calendarMonthCaptionFontName": "fontName",
533
+ "calendarMonthCaptionFontSize": "fontSize",
534
+ "calendarMonthCaptionFontWeight": "fontWeight",
535
+ "calendarMonthCaptionLineHeight": "lineHeight",
536
+ "calendarMonthCaptionPaddingBottom": "size",
514
537
  "dateInputBorderColor": "color",
515
538
  "dateInputBorderRadius": "radius",
516
- "invalidInputMixin": "color",
517
- "validInputMixin": "color",
518
- "dateInputHoverBorderColor": "color",
519
539
  "dateInputFocusBorderColor": "color",
540
+ "dateInputHoverBorderColor": "color",
520
541
  "dateInputInsideBorderColor": "color",
521
542
  "dateInputInsideColor": "color",
522
543
  "dateInputStrokeColor": "color",
523
- "calendarMonthCaptionColor": "color",
524
- "calendarMonthCaptionFontSize": "fontSize",
525
- "calendarMonthCaptionLineHeight": "lineHeight",
526
- "calendarMonthCaptionPaddingBottom": "size",
527
- "dayPickerNavigationButtonBorderColor": "color",
528
- "dayPickerNavigationButtonBackgroundColor": "color",
529
- "dayPickerNavigationButtonMaxHeight": "size",
530
- "dayPickerNavigationButtonMaxWidth": "size",
531
- "dayPickerNavigationButtonPadding": "size",
532
- "dayPickerNavigationButtonChildLeft": "size",
533
- "dayPickerNavigationButtonChildRight": "size",
534
- "dayPickerNavigationButtonChildSvgFill": "color",
535
- "dayPickerNavigationButtonDefaultHoverBorderColor": "color",
536
- "dayPickerNavigationSVGHorizontalFill": "color",
537
544
  "dayPickerWeekHeaderColor": "color",
538
- "dayPickerWeekHeaderLineHeight": "lineHeight",
539
- "dayPickerWeekHeaderSmall": "fontSize",
540
- "calendarDayDefaultBorder": "border",
541
- "calendarDayDefaultBorderColor": "color",
542
- "calendarDayDefaultFontSize": "fontSize",
543
- "calendarDayDefaultColor": "color",
544
- "calendarDayDefaultBeforeHeight": "size",
545
- "calendarDayDefaultBeforeWidth": "size",
546
- "calendarDaySelectedHoverBorderColor": "color",
547
- "calendarDaySelectedHoverColor": "color",
548
- "calendarDaySelectedHoverBeforeBackground": "color",
549
- "calendarDayDefaultCalendarDaySelectedHoverColor": "color",
550
- "calendarDayDefaultCalendarDaySelectedHoverBackground": "color",
551
- "calendarDayBlockedCalendarHoverBackground": "color",
552
- "calendarDayBlockedCalendarHoverColor": "color",
553
- "calendarMonthCaptionFontName": "fontName",
554
545
  "dayPickerWeekHeaderFontName": "fontName",
555
- "calendarDayDefaultFontName": "fontName",
556
- "calendarMonthCaptionFontWeight": "fontWeight",
557
546
  "dayPickerWeekHeaderFontWeight": "fontWeight",
558
- "calendarDayDefaultFontWeight": "fontWeight"
547
+ "dayPickerWeekHeaderLineHeight": "lineHeight",
548
+ "dayPickerWeekHeaderSmall": "fontSize",
549
+ "hiddenInputFieldContainerHeight": "size",
550
+ "hiddenInputFieldContainerWidth": "size",
551
+ "dayPickerNavigationButtonPadding": "size",
552
+ "invalidInputMixin": "color",
553
+ "nextIcon": "icon",
554
+ "previousIcon": "icon",
555
+ "singleDatePickerBorderColor": "color",
556
+ "singleDatePickerLeftRight": "size",
557
+ "singleDatePickerPaddingTopBottom": "size",
558
+ "singleDatePickerRadius": "radius",
559
+ "validInputMixin": "color"
559
560
  },
560
561
  "ExpandCollapse": {
561
562
  "borderColor": "color",
@@ -592,7 +593,13 @@
592
593
  "contentPaddingLeft": "size",
593
594
  "contentPaddingRight": "size",
594
595
  "contentPaddingTop": "size",
595
- "contentPaddingBottom": "size"
596
+ "contentPaddingBottom": "size",
597
+ "marginBottom": "size",
598
+ "borderColor": "color",
599
+ "borderRadius": "radius",
600
+ "borderWidth": "border",
601
+ "expandDividerColor": "color",
602
+ "expanddDividerWidth": "size"
596
603
  },
597
604
  "Feedback": {
598
605
  "backgroundColor": "color",
@@ -836,8 +843,8 @@
836
843
  "iconGap": "size",
837
844
  "dismissIcon": "icon",
838
845
  "dismissIconColor": "color",
839
- "dismissIconSize": "size",
840
- "dismissButtonGap": "size"
846
+ "dismissButtonGap": "size",
847
+ "justifyContent": "flexJustifyContent"
841
848
  },
842
849
  "Pagination": {
843
850
  "gap": "size",
@@ -846,13 +853,28 @@
846
853
  "fontName": "fontName",
847
854
  "fontWeight": "fontWeight",
848
855
  "fontSize": "fontSize",
849
- "lineHeight": "lineHeight"
856
+ "lineHeight": "lineHeight",
857
+ "borderLeftWidth": "border",
858
+ "borderRightWidth": "border",
859
+ "borderTopWidth": "border",
860
+ "borderBottomWidth": "border",
861
+ "borderColor": "color",
862
+ "ellipsisPadding": "size",
863
+ "ellipsisBorderRightWidth": "border",
864
+ "ellipsisBorderLeftWidth": "border",
865
+ "ellipsisBorderTopWidth": "border",
866
+ "ellipsisBorderBottomWidth": "border",
867
+ "ellipsisHeight": "size"
850
868
  },
851
869
  "PaginationPageButton": {
852
870
  "borderColor": "color",
853
- "borderWidth": "border",
871
+ "borderLeftWidth": "border",
872
+ "borderRightWidth": "border",
873
+ "borderTopWidth": "border",
874
+ "borderBottomWidth": "border",
854
875
  "borderRadius": "radius",
855
876
  "backgroundColor": "color",
877
+ "height": "size",
856
878
  "paddingLeft": "size",
857
879
  "paddingRight": "size",
858
880
  "paddingTop": "size",
@@ -871,7 +893,10 @@
871
893
  },
872
894
  "PaginationSideButton": {
873
895
  "borderColor": "color",
874
- "borderWidth": "border",
896
+ "borderLeftWidth": "border",
897
+ "borderRightWidth": "border",
898
+ "borderTopWidth": "border",
899
+ "borderBottomWidth": "border",
875
900
  "borderRadius": "radius",
876
901
  "backgroundColor": "color",
877
902
  "paddingLeft": "size",
@@ -879,6 +904,7 @@
879
904
  "paddingTop": "size",
880
905
  "paddingBottom": "size",
881
906
  "outerBorderColor": "color",
907
+ "outerBorderWidth": "border",
882
908
  "color": "color",
883
909
  "fontName": "fontName",
884
910
  "fontWeight": "fontWeight",
@@ -890,7 +916,8 @@
890
916
  "iconDisplace": "size",
891
917
  "width": "size",
892
918
  "textAlign": "flexJustifyContent",
893
- "displayLabel": "show"
919
+ "displayLabel": "show",
920
+ "height": "size"
894
921
  },
895
922
  "Progress": {
896
923
  "backgroundColor": "color",
@@ -1011,6 +1038,8 @@
1011
1038
  "descriptionFontSize": "fontSize",
1012
1039
  "descriptionLineHeight": "lineHeight",
1013
1040
  "descriptionMarginLeft": "size",
1041
+ "descriptionFontName": "fontName",
1042
+ "descriptionFontWeight": "fontWeight",
1014
1043
  "inputBackgroundColor": "color",
1015
1044
  "inputBorderColor": "color",
1016
1045
  "inputBorderWidth": "border",
@@ -1160,7 +1189,8 @@
1160
1189
  "iconColor": "color",
1161
1190
  "validationIcon": "icon",
1162
1191
  "validationIconSize": "size",
1163
- "validationIconColor": "color"
1192
+ "validationIconColor": "color",
1193
+ "feedbackBackgroundColor": "color"
1164
1194
  },
1165
1195
  "SideNav": {
1166
1196
  "borderColor": "color",
@@ -1904,6 +1934,32 @@
1904
1934
  "type": "state"
1905
1935
  }
1906
1936
  },
1937
+ "DatePicker": {
1938
+ "pressed": {
1939
+ "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
1940
+ "values": [
1941
+ true
1942
+ ],
1943
+ "type": "state"
1944
+ },
1945
+ "selected": {
1946
+ "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
1947
+ "values": [
1948
+ true
1949
+ ],
1950
+ "type": "state"
1951
+ },
1952
+ "focus": {
1953
+ "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
1954
+ "values": [
1955
+ true
1956
+ ],
1957
+ "type": "state",
1958
+ "platforms": [
1959
+ "rn"
1960
+ ]
1961
+ }
1962
+ },
1907
1963
  "ExpandCollapseControl": {
1908
1964
  "pressed": {
1909
1965
  "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
@@ -3272,7 +3328,13 @@
3272
3328
  "contentPaddingLeft": "size",
3273
3329
  "contentPaddingRight": "size",
3274
3330
  "contentPaddingTop": "size",
3275
- "contentPaddingBottom": "size"
3331
+ "contentPaddingBottom": "size",
3332
+ "marginBottom": "size",
3333
+ "borderColor": "color",
3334
+ "borderRadius": "radius",
3335
+ "borderWidth": "border",
3336
+ "expandDividerColor": "color",
3337
+ "expanddDividerWidth": "size"
3276
3338
  }
3277
3339
  },
3278
3340
  "required": false,
@@ -4198,7 +4260,13 @@
4198
4260
  "contentPaddingLeft": "size",
4199
4261
  "contentPaddingRight": "size",
4200
4262
  "contentPaddingTop": "size",
4201
- "contentPaddingBottom": "size"
4263
+ "contentPaddingBottom": "size",
4264
+ "marginBottom": "size",
4265
+ "borderColor": "color",
4266
+ "borderRadius": "radius",
4267
+ "borderWidth": "border",
4268
+ "expandDividerColor": "color",
4269
+ "expanddDividerWidth": "size"
4202
4270
  }
4203
4271
  },
4204
4272
  "required": false,
@@ -5968,6 +6036,20 @@
5968
6036
  "required": false,
5969
6037
  "description": "Position of the hint relative to label."
5970
6038
  },
6039
+ "feedbackTokens": {
6040
+ "defaultValue": {
6041
+ "value": "{}",
6042
+ "computed": false
6043
+ },
6044
+ "type": {
6045
+ "name": "objectOf",
6046
+ "value": {
6047
+ "name": "string"
6048
+ }
6049
+ },
6050
+ "required": false,
6051
+ "description": "Additional tokens to override the default feedback tokens."
6052
+ },
5971
6053
  "children": {
5972
6054
  "type": {
5973
6055
  "name": "union",
@@ -6918,8 +7000,8 @@
6918
7000
  "iconGap": "size",
6919
7001
  "dismissIcon": "icon",
6920
7002
  "dismissIconColor": "color",
6921
- "dismissIconSize": "size",
6922
- "dismissButtonGap": "size"
7003
+ "dismissButtonGap": "size",
7004
+ "justifyContent": "flexJustifyContent"
6923
7005
  }
6924
7006
  },
6925
7007
  "required": false,
@@ -7030,7 +7112,18 @@
7030
7112
  "fontName": "fontName",
7031
7113
  "fontWeight": "fontWeight",
7032
7114
  "fontSize": "fontSize",
7033
- "lineHeight": "lineHeight"
7115
+ "lineHeight": "lineHeight",
7116
+ "borderLeftWidth": "border",
7117
+ "borderRightWidth": "border",
7118
+ "borderTopWidth": "border",
7119
+ "borderBottomWidth": "border",
7120
+ "borderColor": "color",
7121
+ "ellipsisPadding": "size",
7122
+ "ellipsisBorderRightWidth": "border",
7123
+ "ellipsisBorderLeftWidth": "border",
7124
+ "ellipsisBorderTopWidth": "border",
7125
+ "ellipsisBorderBottomWidth": "border",
7126
+ "ellipsisHeight": "size"
7034
7127
  }
7035
7128
  },
7036
7129
  "required": false,
@@ -7062,7 +7155,10 @@
7062
7155
  "name": "custom",
7063
7156
  "raw": {
7064
7157
  "borderColor": "color",
7065
- "borderWidth": "border",
7158
+ "borderLeftWidth": "border",
7159
+ "borderRightWidth": "border",
7160
+ "borderTopWidth": "border",
7161
+ "borderBottomWidth": "border",
7066
7162
  "borderRadius": "radius",
7067
7163
  "backgroundColor": "color",
7068
7164
  "paddingLeft": "size",
@@ -7070,6 +7166,7 @@
7070
7166
  "paddingTop": "size",
7071
7167
  "paddingBottom": "size",
7072
7168
  "outerBorderColor": "color",
7169
+ "outerBorderWidth": "border",
7073
7170
  "color": "color",
7074
7171
  "fontName": "fontName",
7075
7172
  "fontWeight": "fontWeight",
@@ -7081,7 +7178,8 @@
7081
7178
  "iconDisplace": "size",
7082
7179
  "width": "size",
7083
7180
  "textAlign": "flexJustifyContent",
7084
- "displayLabel": "show"
7181
+ "displayLabel": "show",
7182
+ "height": "size"
7085
7183
  }
7086
7184
  },
7087
7185
  "required": false,
@@ -7227,9 +7325,13 @@
7227
7325
  "name": "custom",
7228
7326
  "raw": {
7229
7327
  "borderColor": "color",
7230
- "borderWidth": "border",
7328
+ "borderLeftWidth": "border",
7329
+ "borderRightWidth": "border",
7330
+ "borderTopWidth": "border",
7331
+ "borderBottomWidth": "border",
7231
7332
  "borderRadius": "radius",
7232
7333
  "backgroundColor": "color",
7334
+ "height": "size",
7233
7335
  "paddingLeft": "size",
7234
7336
  "paddingRight": "size",
7235
7337
  "paddingTop": "size",
@@ -7929,6 +8031,8 @@
7929
8031
  "descriptionFontSize": "fontSize",
7930
8032
  "descriptionLineHeight": "lineHeight",
7931
8033
  "descriptionMarginLeft": "size",
8034
+ "descriptionFontName": "fontName",
8035
+ "descriptionFontWeight": "fontWeight",
7932
8036
  "inputBackgroundColor": "color",
7933
8037
  "inputBorderColor": "color",
7934
8038
  "inputBorderWidth": "border",
@@ -8471,7 +8575,8 @@
8471
8575
  "iconColor": "color",
8472
8576
  "validationIcon": "icon",
8473
8577
  "validationIconSize": "size",
8474
- "validationIconColor": "color"
8578
+ "validationIconColor": "color",
8579
+ "feedbackBackgroundColor": "color"
8475
8580
  }
8476
8581
  },
8477
8582
  "required": false,
@@ -10647,10 +10752,15 @@
10647
10752
  "paddingTop": "size",
10648
10753
  "paddingBottom": "size",
10649
10754
  "width": "size",
10755
+ "height": "size",
10650
10756
  "minWidth": "size",
10651
10757
  "iconSize": "size",
10652
10758
  "iconSpace": "integer",
10653
10759
  "icon": "icon",
10760
+ "borderLeftWidth": "border",
10761
+ "borderRightWidth": "border",
10762
+ "borderTopWidth": "border",
10763
+ "borderBottomWidth": "border",
10654
10764
  "outerBorderColor": "color",
10655
10765
  "outerBorderWidth": "border",
10656
10766
  "outerBorderGap": "size",
@@ -10841,10 +10951,15 @@
10841
10951
  "paddingTop": "size",
10842
10952
  "paddingBottom": "size",
10843
10953
  "width": "size",
10954
+ "height": "size",
10844
10955
  "minWidth": "size",
10845
10956
  "iconSize": "size",
10846
10957
  "iconSpace": "integer",
10847
10958
  "icon": "icon",
10959
+ "borderLeftWidth": "border",
10960
+ "borderRightWidth": "border",
10961
+ "borderTopWidth": "border",
10962
+ "borderBottomWidth": "border",
10848
10963
  "outerBorderColor": "color",
10849
10964
  "outerBorderWidth": "border",
10850
10965
  "outerBorderGap": "size",
@@ -11262,10 +11377,15 @@
11262
11377
  "paddingTop": "size",
11263
11378
  "paddingBottom": "size",
11264
11379
  "width": "size",
11380
+ "height": "size",
11265
11381
  "minWidth": "size",
11266
11382
  "iconSize": "size",
11267
11383
  "iconSpace": "integer",
11268
11384
  "icon": "icon",
11385
+ "borderLeftWidth": "border",
11386
+ "borderRightWidth": "border",
11387
+ "borderTopWidth": "border",
11388
+ "borderBottomWidth": "border",
11269
11389
  "outerBorderColor": "color",
11270
11390
  "outerBorderWidth": "border",
11271
11391
  "outerBorderGap": "size",
@@ -13346,6 +13466,8 @@
13346
13466
  "descriptionFontSize": "fontSize",
13347
13467
  "descriptionLineHeight": "lineHeight",
13348
13468
  "descriptionMarginLeft": "size",
13469
+ "descriptionFontName": "fontName",
13470
+ "descriptionFontWeight": "fontWeight",
13349
13471
  "inputBackgroundColor": "color",
13350
13472
  "inputBorderColor": "color",
13351
13473
  "inputBorderWidth": "border",