@zohodesk/dot 1.0.0-temp-109 → 1.0.0-temp-111

package/README.md

@@ -1,6 +1,21 @@
 # DOT Design Components
 
 In this Library, we Provide Some Basic Components to Build Your Application
+# 1.0.0-temp-111
+Form Fields highlight Active State implementation
+# 1.0.0-beta.242
+
+- `Accesssility`- Screen Reader fix.
+
+# 1.0.0-beta.241
+
+- **Drawer, Lookup** - Focus scope navigation support.
+
+# 1.0.0-beta.240
+
+- `Accesssility`- Screen Reader support for some components.
+
+- **CustomResponsive** - performance issue fix.
 
 # 1.0.0-beta.239
 

package/es/ActionButton/ActionButton.js

@@ -8,6 +8,7 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
 import style from './ActionButton.module.css';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);
@@ -72,8 +73,10 @@ export class ActionButton extends React.Component {
       flexible: true,
       onClick: onClick,
       dataId: dataId,
-      className: `${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
-      "data-title": dataTitle
+      className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
+      "data-title": dataTitle,
+      tagName: "button",
+      tabIndex: "0"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -97,8 +100,10 @@ export class ActionButton extends React.Component {
       onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-      className: `${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: arrowBoxDataId
+      className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
+      dataId: arrowBoxDataId,
+      tabIndex: "0",
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {
@@ -116,7 +121,9 @@ export class ActionButton extends React.Component {
       },
       isBoxPaddingNeed: isBoxPaddingNeed,
       getRef: getContainerRef,
-      popupGroup: popupGroup
+      popupGroup: popupGroup,
+      needFocusScope: true,
+      onClose: this.handleTogglePopup
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/Drawer/Drawer.js

@@ -12,6 +12,7 @@ import IconButton from '../IconButton/IconButton';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
+import FocusScope from "@zohodesk/a11y/es/FocusScope/FocusScope";
 export class Header extends React.Component {
   render() {
     let {
@@ -134,6 +135,7 @@ export default class Drawer extends React.Component {
     this.drawers = this.drawers.bind(this);
     this.responsiveFunc = this.responsiveFunc.bind(this);
     this.getNextIndex = getZIndex(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
   drawers(uptoTablet, styleByResolutions) {
     let {
@@ -142,7 +144,9 @@ export default class Drawer extends React.Component {
       paddingSize,
       subDrawerActive,
       subDrawerChildren,
-      onBodyClick
+      onBodyClick,
+      onClose,
+      needFocusScope
     } = this.props;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
@@ -155,6 +159,17 @@ export default class Drawer extends React.Component {
       }
       return child;
     });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-container-focus": false,
+      tabindex: -1,
+      eleRef: this.createRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
     return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
       className: style.columns
     }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
@@ -167,14 +182,13 @@ export default class Drawer extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      }
-    }, childrenWithProps)));
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: this.createRef,
+      autoFocus: true,
+      focusTabLoop: true,
+      restoreFocus: true,
+      focusClose: onClose
+    }, content) : content);
   }
   responsiveFunc(_ref) {
     let {

package/es/Drawer/Drawer.module.css

@@ -148,4 +148,4 @@
 }
 [dir=rtl] .iconWrapper {
   margin-left: var(--zd_size10);
-}
+}

package/es/Drawer/props/defaultProps.js

@@ -16,5 +16,6 @@ export const Drawer_defaultProps = {
   subDrawerClass: '',
   customClass: '',
   needAutoZindex: true,
-  onBodyClick: () => {}
+  onBodyClick: () => {},
+  needFocusScope: false
 };

package/es/Drawer/props/propTypes.js

@@ -45,5 +45,6 @@ export const Drawer_propTypes = {
   subDrawerActive: PropTypes.bool,
   subDrawerChildren: PropTypes.func,
   subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
+  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
+  needFocusScope: PropTypes.bool
 };

package/es/alert/AlertLookup/AlertLookup.js

@@ -14,56 +14,6 @@ import FormAction from '../../FormAction/FormAction';
 /**** CSS ****/
 import style from './AlertLookup.module.css';
 export default class AlertLookup extends Component {
-  constructor(props) {
-    super(props);
-    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
-    this.getButtonRef = this.getButtonRef.bind(this);
-  }
-  componentDidMount() {
-    let {
-      isActive
-    } = this.props;
-    if (isActive) {
-      document.addEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-  componentDidUpdate(prevProps) {
-    let {
-      isActive
-    } = this.props;
-    if (prevProps.isActive !== isActive) {
-      isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.documentKeydownHandler);
-  }
-  documentKeydownHandler() {
-    let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let {
-      onSubmitClick,
-      onCancelClick,
-      isActive,
-      onEsc,
-      onClose
-    } = this.props;
-    if (e.keyCode === 27 && isActive) {
-      e && e.preventDefault && e.preventDefault();
-      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
-    } else if (e.keyCode === 13 && isActive) {
-      e && e.preventDefault && e.preventDefault();
-      onSubmitClick && onSubmitClick(e);
-    }
-  }
-  getButtonRef(el) {
-    this.okButton = el;
-    let {
-      isDefaultFocus
-    } = this.props;
-    if (isDefaultFocus) {
-      el && el.focus();
-    }
-  }
   render() {
     let {
       isActive,
@@ -91,7 +41,8 @@ export default class AlertLookup extends Component {
       iconClass,
       iconSize,
       customProps,
-      isHtmlContent
+      isHtmlContent,
+      onEsc
     } = this.props;
     const {
       LookupProps = {},
@@ -100,6 +51,8 @@ export default class AlertLookup extends Component {
       SecondaryButtonProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(Lookup, _extends({
+      needFocusScope: true,
+      onClose: onEsc == 'close' ? onClose : onCancelClick,
       isActive: isActive,
       size: size,
       dataId: dataId,
@@ -134,8 +87,7 @@ export default class AlertLookup extends Component {
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
-      palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled',
-      getRef: this.getButtonRef
+      palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled'
     }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -328,20 +328,22 @@ export class ToggleDropDown extends Component {
           }
           break;
         case 13:
-          const selectedId = optionsArr[selectedIndex][idName] || '';
-          onClick && onClick(selectedId, optionsArr[selectedIndex]);
-          if (!preventPopupClose) {
-            togglePopup(e, boxPosition);
-          } else if (isSearch) {
-            this.searchInput.focus({
-              preventScroll: true
-            });
-          } else {
-            this.hiddenInput.focus({
-              preventScroll: true
-            });
+          {
+            const selectedId = optionsArr[selectedIndex][idName] || '';
+            onClick && onClick(selectedId, optionsArr[selectedIndex]);
+            if (!preventPopupClose) {
+              togglePopup(e, boxPosition);
+            } else if (isSearch) {
+              this.searchInput.focus({
+                preventScroll: true
+              });
+            } else {
+              this.hiddenInput.focus({
+                preventScroll: true
+              });
+            }
+            break;
           }
-          break;
       }
     } else {
       if (keyCode === 13 || keyCode === 40) {

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -64,7 +64,8 @@ export default class CheckBoxField extends PureComponent {
       isLocked,
       lockedInfoText,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      needFieldStyle
     } = this.props;
     const {
       LabelProps = {},
@@ -92,7 +93,7 @@ export default class CheckBoxField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)));
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${!isReadOnly && !isDisabled && needFieldStyle ? style.radiobdExxect : ''}  ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : null
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -10,6 +10,7 @@ import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** CSS ****/
 import style from '../Fields.module.css';
@@ -17,8 +18,11 @@ export default class CurrencyField extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      isActive: false
+      isActive: false,
+      isFocused: false
     };
+    this.handleParentClick = this.handleParentClick.bind(this);
+    this.handleFocusToggle = this.handleFocusToggle.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleGetRef = this.handleGetRef.bind(this);
     this.getNextId = getUniqueId(this);
@@ -40,10 +44,30 @@ export default class CurrencyField extends PureComponent {
     this.textBox = el;
     getRef && getRef(el, id);
   }
+  handleParentClick() {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.textBox.focus();
+    }
+  }
+  handleFocusToggle(value) {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.setState({
+        isFocused: value
+      });
+    }
+  }
   onFocus() {
     let {
-      onFocus
+      onFocus,
+      needFieldStyle
     } = this.props;
+    needFieldStyle && this.handleFocusToggle(true);
     this.setState({
       isActive: true
     });
@@ -51,8 +75,10 @@ export default class CurrencyField extends PureComponent {
   }
   onBlur() {
     let {
-      onBlur
+      onBlur,
+      needFieldStyle
     } = this.props;
+    needFieldStyle && this.handleFocusToggle(false);
     this.setState({
       isActive: false
     });
@@ -92,7 +118,8 @@ export default class CurrencyField extends PureComponent {
       userCurrencyType,
       customProps,
       formatCurrency,
-      renderLabelProps
+      renderLabelProps,
+      needFieldStyle
     } = this.props;
     const {
       LabelProps = {},
@@ -110,9 +137,17 @@ export default class CurrencyField extends PureComponent {
       formatValue = value;
     }
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+    const {
+      isFocused
+    } = this.state;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg",
+      isActive: isFocused,
+      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${needFieldStyle ? style.highlightSpace : ''} ${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleParentClick
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -160,7 +195,7 @@ export default class CurrencyField extends PureComponent {
       type: errorType,
       htmlFor: uniqueId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
+    }, ValidationMessageProps2)))));
   }
 }
 CurrencyField.propTypes = propTypes;

package/es/form/fields/CurrencyField/props/defaultProps.js

@@ -11,6 +11,7 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
+  // needFieldStyle:true,
   formatCurrency: () => {},
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/DateField/DateField.js

@@ -10,6 +10,7 @@ import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
 
 /**** CSS ****/
 import style from '../Fields.module.css';
@@ -21,6 +22,17 @@ export default class DateField extends PureComponent {
     this.handleLabelClick = this.handleLabelClick.bind(this);
     this.getNextId = getUniqueId(this);
     this.openPopup = this.openPopup.bind(this);
+    this.handleParentClick = this.handleParentClick.bind(this);
+    this.handleFocusToggle = this.handleFocusToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.getPopupHandlers = this.getPopupHandlers.bind(this);
+    this.handleDropBoxOpen = this.handleDropBoxOpen.bind(this);
+    this.handleDropBoxClose = this.handleDropBoxClose.bind(this);
+    this.state = {
+      isFocused: false,
+      isPopupOpen: false
+    };
   }
   handleChange(value) {
     let {
@@ -70,6 +82,62 @@ export default class DateField extends PureComponent {
       this.dateField.focus();
     }
   }
+  handleParentClick(e) {
+    const {
+      needFieldStyle
+    } = this.props;
+    if (needFieldStyle) {
+      this.dateField.focus();
+      this.togglePopup(e);
+    }
+  }
+  handleFocusToggle(value) {
+    this.setState({
+      isFocused: value
+    });
+  }
+  handleFocus(e) {
+    const {
+      onFocus,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(true);
+    onFocus && onFocus(e);
+  }
+  handleBlur(e) {
+    const {
+      onBlur,
+      needFieldStyle
+    } = this.props;
+    needFieldStyle && this.handleFocusToggle(false);
+    onBlur && onBlur(e);
+  }
+  getPopupHandlers(methods) {
+    let {
+      togglePopup
+    } = methods;
+    this.togglePopup = togglePopup;
+  }
+  handleDropBoxOpen() {
+    let {
+      isPopupOpen
+    } = this.state;
+    if (isPopupOpen == false) {
+      this.setState({
+        isPopupOpen: true
+      });
+    }
+  }
+  handleDropBoxClose() {
+    let {
+      isPopupOpen
+    } = this.state;
+    if (isPopupOpen) {
+      this.setState({
+        isPopupOpen: false
+      });
+    }
+  }
   render() {
     let {
       labelName,
@@ -103,7 +171,8 @@ export default class DateField extends PureComponent {
       i18nKeys,
       iconOnHover,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      needFieldStyle
     } = this.props;
     const {
       LabelProps = {},
@@ -112,9 +181,19 @@ export default class DateField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+    const {
+      isFocused,
+      isPopupOpen
+    } = this.state;
+    let isActive = isPopupOpen || isFocused;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg",
+      isActive: isFocused,
+      isNeedEffect: !isReadOnly && !isDisabled && needFieldStyle ? true : false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ` ${needFieldStyle ? style.highlightSpace : ''} ${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${style.hover}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleParentClick
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -126,12 +205,12 @@ export default class DateField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''} ${style.labelindex}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps, {
       id: labelName
     }))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: `${needFieldStyle ? style.highlightPosition : style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {
       className: style.lockText
     }, lockedValueText) : /*#__PURE__*/React.createElement(DateWidget, _extends({
@@ -141,6 +220,8 @@ export default class DateField extends PureComponent {
       onSelect: this.handleChange,
       timeZone: timeZone,
       getRef: this.handleGetRef,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
       isReadOnly: isReadOnly,
       value: value,
       popupGroup: popupGroup,
@@ -152,7 +233,11 @@ export default class DateField extends PureComponent {
       isEditable: true,
       htmlId: getAriaId,
       i18nKeys: i18nKeys,
-      iconOnHover: iconOnHover
+      iconOnHover: iconOnHover,
+      getPopupHandlers: this.getPopupHandlers,
+      onDropBoxOpen: this.handleDropBoxOpen,
+      onDropBoxClose: this.handleDropBoxClose,
+      highlightPosition: needFieldStyle ? true : false
     }, DateWidgetProps, {
       a11y: {
         ariaLabelledby: labelName
@@ -169,7 +254,7 @@ export default class DateField extends PureComponent {
       type: errorType,
       htmlFor: getAriaId,
       dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
+    }, ValidationMessageProps2)))));
   }
 }
 DateField.propTypes = propTypes;

package/es/form/fields/DateField/props/defaultProps.js

@@ -14,5 +14,6 @@ export const defaultProps = {
   i18nKeys: {},
   dataId: 'dateField',
   customProps: {},
+  // needFieldStyle:true,
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/Fields.module.css

@@ -1,3 +1,25 @@
+.radiobdExxect
+{
+  border-radius: var(--zd_size4);
+  padding:var(--zd_size15);
+
+}
+.radiobdExxect:hover
+{
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.highlightStyle
+{
+  padding:var(--zd_size15);
+}
+.highlightSpace
+{
+  padding:var(--zd_size14);
+}
+.editetSpace
+{
+  padding: var(--zd_size15);
+}
 .container,
 .checkboxFieldContainer {
   position: relative;
@@ -7,6 +29,11 @@
   position: relative;
   min-height: var(--zd_size25);
 }
+.highlightPosition
+{
+  position: static;
+  min-height: var(--zd_size25);
+}
 .fieldMargin_medium {
   margin-top: var(--zd_size5);
 }
@@ -181,3 +208,41 @@
 [dir=rtl] .ePhiTag {
   margin-right: var(--zd_size8);
 }
+
+/* sample css */
+
+/* .hover::before{
+  position: absolute;
+  content: '';
+  bottom: -10px;
+  left: -10px;
+  right: -10px;
+  top: -10px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+} */
+/* .hover{
+  border-radius: 4px;
+  border: 1px solid transparent;
+  padding: 10px;
+}
+.hover:hover
+{
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hover:focus-within{
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.labelindex
+{
+  z-index: 1;
+  position: relative;
+}
+.position
+{
+  position: relative;
+} */
+
+
+/* sample css */