@zohodesk/components 1.0.0-temp-211.2 → 1.0.0-temp-216

package/README.md

@@ -32,12 +32,98 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.55 (yet to publish)
+
+- **ListItemWithAvatar** 
+  - `AvatarTeamProps` and `AvatarProps` props has been added under the `customProps` group.
+
+- **Tag** 
+  - `avatarProps` and `iconProps` prop has been added under the `customProps` group.
+
+# 1.2.54
+
+- **Reverted 1.2.45 MultiSelect Fix**
+  - The issue with the non-scrollable API call trigger in multiselect, introduced in version `1.2.45`, has been `reverted` in this version.
+
+
+# 1.2.53
+
+- **CheckBox** - Disabled State CheckBox Color Fixed
+- **Radio** - ReadOnly State Radio Cursor and color Fixed
+- **Textarea** - isFocus Prop added
+- **AdvancedGroupMultiSelect** - isFocus Prop added
+- **AdvancedMultiSelect** - isFocus Prop added
+- **MultiSelect** - isFocus Prop added
+- **DateWidget** - onDropboxClose,renderCustomHeader,renderCustomFooter Props added
+- **DateTime** - renderCustomHeader,renderCustomFooter Props added
+- **GroupSelect** - customProps supported
+
+# 1.2.52
+
+- **Typography** - component added in v0
+
+# 1.2.51
+
+- **Popup** - Fixed issue: Error on unmount when target ref is not available.
+
+# 1.2.50
+
+- **DateTime (v0&v1), CalendarView (v0&v1)**
+
+  - Week starting day customization support added with `weekStartDay` props and week holiday customization support with `holidays` prop
+  
+- **DateWidget (v0&v1)**
+
+  - Support has been added for `weekStartDay`, `holidays` props
+
+- **DaysRow (v0&v1)**
+
+  - `holidays` prop added for holiday column indication
+
+# 1.2.49 
+
+- **Popup**
+  - `isOutsideScrollBlocked` prop supported - Scroll blocking behaviours supported
+  - Fixed popup re-positioning on window resize not working properly - Issue fixed
+- **DropBoxElement**
+  - The dot-ui-element attribute has been added to facilitate the use of component-level CSS selectors
+
+# 1.2.48
+
+- **ResizeObserver**
+
+  - The ResizeObserver PolyFill code has been removed, and a separate copy with the PolyFill included is saved under the filename ResizeObserverWithPolyfill.js
+  
+
+# 1.2.47
+
+- **DateTime**
+
+  - The issue of the dateTime_dateSelected string being duplicated in the data_id attribute when selecting the last day of the month has been resolved.
+
+# 1.2.46
+
+- **AppContainer (v1)**
+
+  - Removed color, zoom size, font size and font family variable files imports
+
+# 1.2.45
+
+- **GroupSelect**
+
+  - The issue with TextBoxIcon_i18n returning an undefined value while using the needSelectDownIcon prop has been fixed.
+
+- **MultiSelect**
+  - Functionality Added - If the container is non-scrollable, the API call is triggered to fetch the next set of data upon selecting an option.
+
 # 1.2.44
 
 - **Tabs (v0&v1), AdvancedGroupMultiSelect (v1)**
+
   - `isAbsolutePositioningNeeded` `isRestrictScroll` `positionsOffset` `targetOffset` props supported for fixed position.
 
 - **Tabs (v0&v1)**
+
   - padding css fix
 
 - **DropDownSearch (v1)**
@@ -53,16 +139,17 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.42
 
-- **Heading (v0&v1)** - 
+- **Heading (v0&v1)** -
+
   - whiteSpace prop added
 
-- **Tooltip (v0&v1)** - 
+- **Tooltip (v0&v1)** -
   - whiteSpace prop added
   - `data-title-wrap` now accepts whitespace CSS values instead of a boolean, allowing the tooltip to support all whitespace options. Default value is `normal`.
 
 # 1.2.41
 
-- **Tabs** 
+- **Tabs**
   - Search implemented in more popup (v0& v1)
 
 # 1.2.40
@@ -73,14 +160,14 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
 - **Tag** - customAttributes prop supported
-- **TextBoxIcon** - needInputFocusOnParentClick prop supported
+- **TextBoxIcon** - needInputFocusOnWrapperClick prop supported
 
 # 1.2.38
 
 - **renderRightPlaceholderNode**
-- renderRightPlaceholderNode support given for `CheckBox` `Textarea` `Select` `MultiSelect`  `TextBoxIcon`.
-- Json File Import Changed to JS modules in `Popup/PositionMapping` `DropBox/DropBoxPositionMapping`. 
-- **DateWidget** 
+- renderRightPlaceholderNode support given for `CheckBox` `Textarea` `Select` `MultiSelect` `TextBoxIcon`.
+- Json File Import Changed to JS modules in `Popup/PositionMapping` `DropBox/DropBoxPositionMapping`.
+- **DateWidget**
 - TextBoxIconProps key supported in customProps prop
 - **MultiSelect**
 - customProps prop added and TextBoxIconProps customization given (Prop Spreaded).
@@ -91,17 +178,17 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.37
 
-- **Tabs** 
+- **Tabs**
 - dataID prop import missing for more menu dropdown issue fix (v0 and v1)
 
 # 1.2.36
 
-- **dataID & dataTestID** 
+- **dataID & dataTestID**
 - support has been added for the `DropDownSearch` `ListItemWithRadio` `AdvancedGroupMultiSelect` `AdvancedMultiSelect` `MultiSelect` `MultiSelectWithAvatar` `SelectedOptions` `SelectWithAvatar` `SelectWithIcon` `Tabs` Component (v0 and v1).
 
 # 1.2.35
 
-- **MultiSelect** 
+- **MultiSelect**
 - `dataId` support has been added for the ResponsiveDropBox Component.
 - The `dataId` will be reflected as `dataId` with the suffix "_dropbox".
 - **DateWidget**
@@ -141,13 +228,13 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.27
 
-- **DateWidget** -  The issue with the YearView Open State Reset on Blur Event in DidMount has been resolved
+- **DateWidget** - The issue with the YearView Open State Reset on Blur Event in DidMount has been resolved
 
 # 1.2.26
 
 - **MultiSelect, MultiSelectWithAvatar** - Mobile Header Render Issue in Mobile Responsive Fixed.
 - **isMobilePopover** - Function added in Dropbox.
-- **Tag** -  closeTitle not working issue fixed ( because value sends in wrong prop key data-title)
+- **Tag** - closeTitle not working issue fixed ( because value sends in wrong prop key data-title)
 
 # 1.2.25
 
@@ -171,25 +258,25 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **v1/Tabs** - converted to functional component
 - **TextBox** - Tooltip Issue fixed
-- **Tooltip** -  Input Element Based Tooltip Fix Related Fix Added
+- **Tooltip** - Input Element Based Tooltip Fix Related Fix Added
 
 # 1.2.20
 
 - **Avatar, ListContainer, Suggestions, Select, Switch** - Accessibility issue fixes.
 
-# 1.2.19 
+# 1.2.19
 
 - Typography - lineheight unitless prop added
 - v1/Modal - converted to functional component
 - DateWidget - Manual Type TimeZone Issue Fixed
 
- # 1.2.18
+# 1.2.18
 
- - TextBox - MaxLength Default Prop Removed
+- TextBox - MaxLength Default Prop Removed
 
- # 1.2.17
+# 1.2.17
 
- - DateWidget TimeZone Exception Supported
+- DateWidget TimeZone Exception Supported
 
 # 1.2.15, # 1.2.16
 
@@ -245,11 +332,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.4
 
-- **Typography**  new component added
+- **Typography** new component added
 
 # 1.2.3
 
-- **MultiSelect , MultiSelectWithAvatar**  mobile responsive features added
+- **MultiSelect , MultiSelectWithAvatar** mobile responsive features added
 - **Mobile Header** Component added
 - Proptype validation fixed
 
@@ -265,7 +352,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.2.0
 
-- **utils** and **hooks** packages  added as dependency
+- **utils** and **hooks** packages added as dependency
 
 - **mergeStyle** and **compileClassNames** - deprecated and used from `utils` package
 
@@ -321,7 +408,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 - `stopPropagation` method added in common utils.
 
 - **DropBox**
-  
+
   cancelBubblingEffect fix.
 
   `fadeIn` and `scaleIn` animations added.
@@ -362,11 +449,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-263
 
-- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Line height changed 20px and Padding also changed.
+- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio** - Line height changed 20px and Padding also changed.
 
 # 1.0.0-alpha-262
 
-- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Added New Prop `needMultiLineText`
+- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio** - Added New Prop `needMultiLineText`
 
 - **MultiSelect, MultiSelectWithAvatar** - `keepSelectedOptions` prop added. When this prop is true, it won't remove selected items from the dropdown instead it highlights each selected item with tick mark.
 
@@ -378,7 +465,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - compileClassNames , mergeStyle utils added.
 
-- index  export object fixed.
+- index export object fixed.
 
 # 1.0.0-alpha-260
 
@@ -393,7 +480,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-259
 
 - **Avatar**
-  
+
   `needInnerBorder` and `needDefaultBorder` prop has been added.
 
   `xxsmall` option added for size prop.
@@ -408,7 +495,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-257
 
-- **Avatar** - Avatar initial render issue and image border issue  solved
+- **Avatar** - Avatar initial render issue and image border issue solved
 
 - **DateWidget** - `boxSize` and `onError` prop has been added.
 
@@ -418,7 +505,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **Switch** - Click handling issue fix.
 
-- **Tabs, Tab** -  Screen Reader fix.
+- **Tabs, Tab** - Screen Reader fix.
 
 # 1.0.0-alpha-255
 
@@ -436,7 +523,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-253
 
-- **Tabs, Tooltip** - If condition check added  to reduce murphy error logs.
+- **Tabs, Tooltip** - If condition check added to reduce murphy error logs.
 
 - `Accesssility`- Screen Reader support for some components.
 
@@ -446,9 +533,9 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 - **componentAppearanceVariableJson**
 
-   `zdt_datetime_today_bg` variable renamed as `zdt_datetime_selected_bg`
+  `zdt_datetime_today_bg` variable renamed as `zdt_datetime_selected_bg`
 
-   `zdt_datetime_today_border` variable added.
+  `zdt_datetime_today_border` variable added.
 
 - **CalendarView** - `isToday` prop added to display today's date as a separate style.
 

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -71,6 +71,11 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
+	/* strikethrough buttons */
+	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_success_strike: hsla(131, 64.42%, calc(68.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
+	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -71,6 +71,11 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 	
+	/* strikethrough buttons */
+	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_success_strike: hsla(123, 60.37%, calc(57.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
+	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(10,115,235);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(38,169,66);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(229,119,23);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(50.00% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(222,53,53);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(232,185,35);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -71,6 +71,11 @@
 	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
 	
+	/* strikethrough buttons */
+	--zdt_button_danger_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
+	--zdt_success_strike: hsla(131, 64.42%, calc(68.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_secondaryfilled_strike: var(--zdtm_cta_grey_40_border_default_inverse_low);
+	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_buttongroup_default_border: hsla(204, 10.64%, calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -42,4 +42,8 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* strikethrough_buttons */
+	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.25 + var(--zdc_alpha_low)));
+	--zdt_button_primary_filled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
 }

package/es/AvatarTeam/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes';
 export const propTypes = {
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,
@@ -22,6 +23,6 @@ export const propTypes = {
   needDefaultBorder: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarTeamProps: PropTypes.object,
-    AvatarProps: PropTypes.object
+    AvatarProps: PropTypes.exact(AvatarProps)
   })
 };

package/es/Button/Button.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import LibraryContext from '../Provider/LibraryContextInit';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import cssJSLogic from './css/cssJSLogic';
@@ -29,13 +30,19 @@ export default function Button(props) {
     a11y,
     id
   } = props;
+  const {
+    a11y_strikeThroughButtons
+  } = useContext(LibraryContext);
   const finalStyle = mergeStyle(style, customStyle);
+  const buttonProps = { ...props,
+    a11y_strikeThroughButtons
+  };
   const {
     buttonClass,
     loaderParentClass,
     loaderChildClass
   } = cssJSLogic({
-    props,
+    props: buttonProps,
     style: finalStyle
   });
   let statusLower = status.toLowerCase();

package/es/Button/css/Button.module.css

@@ -525,4 +525,86 @@
 
 .loader{
   color:var(--dot_mirror)
+}
+[dir=ltr] .primaryStrike {
+  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
+}
+[dir=rtl] .primaryStrike {
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_strike), var(--zdt_button_primary_strike) 1px, transparent 0px,transparent 8px);
+}
+
+.primaryfilledStrike {
+  --button_border_color: var(--zdt_button_primaryfill_bg);
+}
+
+[dir=ltr] .primaryfilledStrike {
+  background: repeating-linear-gradient(120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
+}
+
+[dir=rtl] .primaryfilledStrike {
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_primary_filled_strike) , var(--zdt_button_primary_filled_strike) 1px, var(--zdt_button_primaryfill_bg) 1px,var(--zdt_button_primaryfill_bg) 8px), var(--zdt_button_primaryfill_bg);
+}
+
+[dir=ltr] .dangerStrike {
+  background: repeating-linear-gradient(120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
+}
+
+[dir=rtl] .dangerStrike {
+  background: repeating-linear-gradient(-120deg,var(--zd_dangertrans6), var(--zd_dangertrans6) 1px, transparent 0px, transparent 8px);
+}
+
+.dangerfilledStrike {
+  --button_border_color: var(--zdt_button_danger_border);
+}
+
+[dir=ltr] .dangerfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
+}
+
+[dir=rtl] .dangerfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--zdt_button_danger_strike) , var(--zdt_button_danger_strike) 1px, var(--zdt_button_dangerfill_bg) 1px,var(--zdt_button_dangerfill_bg) 8px), var(--zdt_button_dangerfill_bg);
+}
+
+[dir=ltr] .secondaryStrike {
+  background: repeating-linear-gradient(120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
+}
+
+[dir=rtl] .secondaryStrike {
+  background: repeating-linear-gradient(-120deg, var(--zdt_button_secondary_border), var(--zdt_button_secondary_border) 1px, transparent 0px,transparent 8px);
+}
+
+.secondaryfilledStrike {
+  --button_border_color: var(--zdt_button_secondaryfill_bg);
+}
+
+[dir=ltr] .secondaryfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
+}
+
+[dir=rtl] .secondaryfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--zdt_secondaryfilled_strike) , var(--zdt_secondaryfilled_strike) 1px, var(--zdt_button_secondaryfill_bg) 1px,var(--zdt_button_secondaryfill_bg) 8px);
+}
+
+.tertiaryfilledStrike {
+  --button_border_color: var(--zdt_button_tertiaryfill_bg);
+}
+
+[dir=ltr] .tertiaryfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
+}
+
+[dir=rtl] .tertiaryfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--dot_slateGrey) , var(--dot_slateGrey) 1px, var(--zdt_button_tertiaryfill_bg) 1px,var(--zdt_button_tertiaryfill_bg) 8px);
+}
+
+.successfilledStrike {
+  --button_border_color: var(--zdt_button_successfill_border);
+}
+
+[dir=ltr] .successfilledStrike {
+  background: repeating-linear-gradient(120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
+}
+
+[dir=rtl] .successfilledStrike {
+  background: repeating-linear-gradient(-120deg,var(--zdt_success_strike) , var(--zdt_success_strike) 1px, var(--zdt_button_successfill_bg) 1px,var(--zdt_button_successfill_bg) 8px);
 }

package/es/Button/css/cssJSLogic.js

@@ -12,15 +12,19 @@ export default function cssJSLogic(_ref) {
     size,
     children,
     palette,
-    status
+    status,
+    disabled,
+    a11y_strikeThroughButtons
   } = props;
   let {
     customButton = '',
     customStatus = '',
     customStatusSize = ''
   } = customClass;
+  let strikeExcluded = ['plainprimary', 'plainsecondary'];
   let paletteLower = palette.toLowerCase();
   let statusLower = status.toLowerCase();
+  let strikeEnabled = !strikeExcluded.includes(paletteLower);
   let buttonClass = compileClassNames({
     [customButton]: !!customButton,
     [style.bold]: isBold,
@@ -30,6 +34,7 @@ export default function cssJSLogic(_ref) {
     [style[size.toLowerCase()]]: needAppearance && !children,
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
+    [style[`${paletteLower}Strike`]]: disabled && a11y_strikeThroughButtons && strikeEnabled,
     [style.loader]: !!needAppearance && statusLower !== 'none'
   });
   let loaderParentClass = compileClassNames({