@zohodesk/components 1.0.0-temp-257.1 → 1.0.0-temp-259.2

package/es/v1/Button/constants/index.js

@@ -1,19 +1,21 @@
 export const PALETTE = {
-  DEFAULT: 'default',
-  PRIMARY: 'primary',
+  BRAND: 'brand',
+  BRAND_LIGHTER: 'brandLighter',
+  INFO: 'info',
+  INFO_LIGHTER: 'infoLighter',
   SECONDARY: 'secondary',
+  SECONDARY_LIGHTER: 'secondaryLighter',
   DANGER: 'danger',
-  SUCCESS: 'success'
-};
-export const BG_APPEARANCE = {
-  DEFAULT: 'default',
-  ON_HOVER: 'onHover',
-  NONE: 'none'
+  DANGER_LIGHTER: 'dangerLighter',
+  SUCCESS: 'success',
+  SUCCESS_LIGHTER: 'successLighter',
+  WARNING: 'warning',
+  WARNING_LIGHTER: 'warningLighter'
 };
-export const BORDER_APPEARANCE = {
-  DEFAULT: 'default',
-  ON_HOVER: 'onHover',
-  NONE: 'none'
+export const APPEARANCE = {
+  BORDER: 'border',
+  TEXT: 'text',
+  BG: 'bg'
 };
 export const VARIANT = {
   TEXT: 'text',
@@ -40,10 +42,6 @@ export const ICON_PLACEMENT = {
   LEFT: 'left',
   RIGHT: 'right'
 };
-export const PALETTE_SHADE = {
-  DEFAULT: 'default',
-  LIGHTER: 'lighter'
-};
 export const SHAPE = {
   PILL: 'pill',
   RECTANGLE: 'rectangle',
@@ -67,16 +65,24 @@ export const TYPOGRAPHY_SIZE_MAP = {
 };
 /** Default values referenced by both defaultProps and cssJSLogic */
 
-export const DEFAULT_PALETTE = PALETTE.DEFAULT;
-export const DEFAULT_BG_APPEARANCE = BG_APPEARANCE.DEFAULT;
-export const DEFAULT_BORDER_APPEARANCE = BORDER_APPEARANCE.DEFAULT;
+export const DEFAULT_APPEARANCE = {
+  bg: true,
+  text: true
+};
+export const DEFAULT_HOVER_APPEARANCE = {
+  bg: true,
+  text: true
+};
+export const DEFAULT_SELECTED_APPEARANCE = {
+  bg: true,
+  text: true
+};
 export const DEFAULT_VARIANT = VARIANT.TEXT;
 export const DEFAULT_SIZE = SIZE.MEDIUM;
 export const DEFAULT_STATUS = STATUS.DEFAULT;
 export const DEFAULT_LOADER_PLACEMENT = LOADER_PLACEMENT.OVERLAY;
 export const DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
 export const DEFAULT_ICON_SIZE = 16;
-export const DEFAULT_PALETTE_SHADE = PALETTE_SHADE.DEFAULT;
 export const DEFAULT_SHAPE = SHAPE.ROUNDED_RECTANGLE;
 export const DEFAULT_DISABLED_APPEARANCE = DISABLED_APPEARANCE.DULL;
 export const DEFAULT_BUTTON_TYPE = BUTTON_TYPE.BUTTON;

package/es/v1/Button/constants/presets.js

@@ -0,0 +1,147 @@
+/** Button appearance presets */
+export const BRAND_OUTLINE = {
+  palette: 'brand',
+  appearance: {
+    bg: false,
+    border: true
+  },
+  hoverAppearance: {
+    bg: false,
+    border: true
+  },
+  selectedAppearance: {
+    bg: false,
+    border: true
+  }
+};
+export const BRAND_GHOST = {
+  palette: 'brand',
+  appearance: {
+    bg: false
+  },
+  hoverAppearance: {
+    bg: false
+  },
+  selectedAppearance: {
+    bg: false
+  }
+};
+export const BRAND_TINTED_OUTLINE = {
+  palette: 'brandLighter',
+  appearance: {
+    border: true
+  },
+  hoverAppearance: {
+    border: true
+  },
+  selectedAppearance: {
+    border: true
+  }
+};
+export const SUCCESS_OUTLINE = {
+  palette: 'success',
+  appearance: {
+    bg: false,
+    border: true
+  },
+  hoverAppearance: {
+    bg: false,
+    border: true
+  },
+  selectedAppearance: {
+    bg: false,
+    border: true
+  }
+};
+export const SUCCESS_GHOST = {
+  palette: 'success',
+  appearance: {
+    bg: false
+  },
+  hoverAppearance: {
+    bg: false
+  },
+  selectedAppearance: {
+    bg: false
+  }
+};
+export const SUCCESS_TINTED_OUTLINE = {
+  palette: 'successLighter',
+  appearance: {
+    border: true
+  },
+  hoverAppearance: {
+    border: true
+  },
+  selectedAppearance: {
+    border: true
+  }
+};
+export const SECONDARY_OUTLINE = {
+  palette: 'secondary',
+  appearance: {
+    bg: false,
+    border: true
+  },
+  hoverAppearance: {
+    bg: false,
+    border: true
+  },
+  selectedAppearance: {
+    border: 'brandLighter',
+    text: 'brand',
+    bg: 'brandLighter'
+  }
+};
+export const BLACK_GHOST = {
+  palette: 'brand',
+  appearance: {
+    bg: false,
+    text: 'black'
+  },
+  hoverAppearance: {
+    bg: false
+  },
+  selectedAppearance: {
+    bg: false
+  }
+};
+export const BRAND_OUTLINE_NO_SELECT = {
+  palette: 'brand',
+  appearance: {
+    bg: false,
+    border: true
+  },
+  hoverAppearance: {
+    bg: false,
+    border: true
+  }
+};
+export const GHOST_TINTED_HOVER = {
+  palette: 'brandLighter',
+  appearance: {
+    bg: false
+  },
+  hoverAppearance: {
+    bg: true
+  },
+  selectedAppearance: {
+    border: true,
+    bg: true
+  }
+};
+export const GHOST_DANGER_HOVER = {
+  palette: 'brandLighter',
+  appearance: {
+    bg: false
+  },
+  hoverAppearance: {
+    bg: 'dangerLighter',
+    text: 'danger'
+  },
+  selectedAppearance: {
+    border: 'dangerLighter',
+    text: 'danger',
+    bg: 'dangerLighter'
+  }
+};

package/es/v1/Button/css/Button_v1.module.css

@@ -46,6 +46,18 @@
     composes: disabledOpac;
 }
 
+.variantText {
+    --local-button-min-width: var(--zd_size90);
+}
+
+.variantIcon {
+    --local-button-min-width: var(--zd_size28);
+}
+
+.variantIconWithText {
+    --local-button-min-width: var(--zd_size118);
+}
+
 .sizeSmall {
     --local-button-padding-block: var(--zd_size4);
     --local-button-padding-inline: var(--zd_size7);
@@ -72,16 +84,12 @@
     --local-button-width: 100%;
 }
 
-.variantText {
-    --local-button-min-width: var(--zd_size90);
-}
-
-.variantIcon {
-    --local-button-min-width: var(--zd_size28);
+.sizeSmall.variantText {
+    --local-button-min-width: var(--zd_size50);
 }
 
-.variantIconWithText {
-    --local-button-min-width: var(--zd_size118);
+.sizeSmall.variantIconWithText {
+    --local-button-min-width: var(--zd_size78);
 }
 
 .shapeRoundedRectangle {
@@ -116,6 +124,7 @@
 
 .strike::after {
     content: '';
+    opacity: var(--local-button-overlay-opacity);
     pointer-events: none;
     border-radius: var(--local-button-radius);
 }

package/es/v1/Button/css/cssJSLogic.js

@@ -1,9 +1,9 @@
-import style from "./Button_v1.module.css";
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS, DEFAULT_APPEARANCE, DEFAULT_HOVER_APPEARANCE, DEFAULT_SELECTED_APPEARANCE } from "../constants";
 import buttonResetStyle from "../../../semantic/Button/semanticButton.module.css";
 import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
-import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
-import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
+import style from "./Button_v1.module.css";
 
 const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);
 
@@ -12,14 +12,13 @@ export default function cssJSLogic({
 }) {
   const {
     palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
+    appearance,
+    hoverAppearance,
+    selectedAppearance,
     size,
     variant,
     status,
     isDisabled,
-    isReadOnly,
     isSelected,
     shape,
     loaderPlacement,
@@ -35,27 +34,38 @@ export default function cssJSLogic({
   } = customClass;
   const isLoading = status === STATUS.LOADING;
   const isSuccess = status === STATUS.SUCCESS;
-  const isInteractive = !isDisabled && !isReadOnly && !isLoading;
+  const isInteractive = !isDisabled && !isLoading;
   const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const mergedAppearance = { ...DEFAULT_APPEARANCE,
+    ...(appearance || {})
+  };
+  const mergedHoverAppearance = { ...DEFAULT_HOVER_APPEARANCE,
+    ...(hoverAppearance || {})
+  };
+  const mergedSelectedAppearance = { ...DEFAULT_SELECTED_APPEARANCE,
+    ...(selectedAppearance || {})
+  };
   const {
     bg,
+    selectedBg,
     hoverBg,
     focusBg,
     activeBg,
     text,
+    selectedText,
     hoverText,
     focusText,
     activeText,
     border,
+    selectedBorder,
     hoverBorder,
     focusBorder,
     activeBorder
   } = getPaletteClasses({
     palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
+    appearance: mergedAppearance,
+    hoverAppearance: mergedHoverAppearance,
+    selectedAppearance: mergedSelectedAppearance
   });
   const sizeClass = size ? style[`size${capitalize(size)}`] : '';
   const shapeClass = shape ? style[`shape${capitalize(shape)}`] : '';
@@ -64,23 +74,26 @@ export default function cssJSLogic({
   const buttonClassName = compileClassNames({
     [buttonResetStyle.buttonReset]: true,
     [style.button]: true,
-    [bg]: !!bg,
-    [hoverBg]: !!hoverBg && isInteractive,
-    [focusBg]: !!focusBg && isInteractive,
-    [activeBg]: !!activeBg && isInteractive,
-    [text]: !!text,
-    [hoverText]: !!hoverText && isInteractive,
-    [focusText]: !!focusText && isInteractive,
-    [activeText]: !!activeText && isInteractive,
-    [border]: !!border,
-    [hoverBorder]: !!hoverBorder && isInteractive,
-    [focusBorder]: !!focusBorder && isInteractive,
-    [activeBorder]: !!activeBorder && isInteractive,
+    [bg]: !!bg && !(isSelected && !!selectedBg),
+    [selectedBg]: !!selectedBg && isSelected,
+    [hoverBg]: !!hoverBg && isInteractive && !isSelected,
+    [focusBg]: !!focusBg && isInteractive && !isSelected,
+    [activeBg]: !!activeBg && isInteractive && !isSelected,
+    [text]: !!text && !(isSelected && !!selectedText),
+    [selectedText]: !!selectedText && isSelected,
+    [hoverText]: !!hoverText && isInteractive && !isSelected,
+    [focusText]: !!focusText && isInteractive && !isSelected,
+    [activeText]: !!activeText && isInteractive && !isSelected,
+    [border]: !!border && !(isSelected && !!selectedBorder),
+    [selectedBorder]: !!selectedBorder && isSelected,
+    [hoverBorder]: !!hoverBorder && isInteractive && !isSelected,
+    [focusBorder]: !!focusBorder && isInteractive && !isSelected,
+    [activeBorder]: !!activeBorder && isInteractive && !isSelected,
     [sizeClass]: !!sizeClass,
     [shapeClass]: !!shapeClass,
     [variantClass]: !!variantClass,
-    [style.disabledOpac]: isReadOnly || isDisabled && disabledAppearance === DISABLED_APPEARANCE.DULL,
-    [style.disabledPointer]: isReadOnly || isDisabled,
+    [style.disabledOpac]: isDisabled && disabledAppearance === DISABLED_APPEARANCE.DULL,
+    [style.disabledPointer]: isDisabled,
     [style.loading]: isLoading,
     [style.strike]: shouldStrike,
     [wrapperClass]: !!wrapperClass

package/es/v1/Button/props/defaultProps.js

@@ -1,19 +1,15 @@
 import { DUMMY_FUNCTION, DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
-import { DEFAULT_PALETTE, DEFAULT_BG_APPEARANCE, DEFAULT_BORDER_APPEARANCE, DEFAULT_VARIANT, DEFAULT_SIZE, DEFAULT_STATUS, DEFAULT_LOADER_PLACEMENT, DEFAULT_ICON_PLACEMENT, DEFAULT_ICON_SIZE, DEFAULT_PALETTE_SHADE, DEFAULT_SHAPE, DEFAULT_DISABLED_APPEARANCE, DEFAULT_BUTTON_TYPE } from "../constants";
+import { DEFAULT_VARIANT, DEFAULT_SIZE, DEFAULT_STATUS, DEFAULT_LOADER_PLACEMENT, DEFAULT_ICON_PLACEMENT, DEFAULT_ICON_SIZE, DEFAULT_SHAPE, DEFAULT_DISABLED_APPEARANCE, DEFAULT_BUTTON_TYPE } from "../constants";
 const defaultProps = {
-  palette: DEFAULT_PALETTE,
-  bgAppearance: DEFAULT_BG_APPEARANCE,
-  borderAppearance: DEFAULT_BORDER_APPEARANCE,
+  palette: '',
   variant: DEFAULT_VARIANT,
   size: DEFAULT_SIZE,
   status: DEFAULT_STATUS,
   loaderPlacement: DEFAULT_LOADER_PLACEMENT,
   iconPlacement: DEFAULT_ICON_PLACEMENT,
   iconSize: DEFAULT_ICON_SIZE,
-  paletteShade: DEFAULT_PALETTE_SHADE,
   disabledAppearance: DEFAULT_DISABLED_APPEARANCE,
   isDisabled: false,
-  isReadOnly: false,
   isSelected: false,
   shape: DEFAULT_SHAPE,
   type: DEFAULT_BUTTON_TYPE,

package/es/v1/Button/props/propTypes.js

@@ -1,10 +1,19 @@
 import PropTypes from 'prop-types';
-import { PALETTE, BG_APPEARANCE, BORDER_APPEARANCE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, ICON_PLACEMENT, PALETTE_SHADE, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
+import { PALETTE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, ICON_PLACEMENT, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
 const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
+const paletteNames = Object.values(PALETTE);
+const bgBorderValueType = PropTypes.oneOfType([PropTypes.oneOf([...paletteNames, 'transparent']), PropTypes.bool]);
+const textValueType = PropTypes.oneOfType([PropTypes.oneOf([...paletteNames, 'black', 'white']), PropTypes.bool]);
+const appearanceType = PropTypes.shape({
+  bg: bgBorderValueType,
+  border: bgBorderValueType,
+  text: textValueType
+});
 const propTypes = {
   palette: PropTypes.oneOf(Object.values(PALETTE)),
-  bgAppearance: PropTypes.oneOf(Object.values(BG_APPEARANCE)),
-  borderAppearance: PropTypes.oneOf(Object.values(BORDER_APPEARANCE)),
+  appearance: appearanceType,
+  hoverAppearance: appearanceType,
+  selectedAppearance: appearanceType,
   variant: PropTypes.oneOf(Object.values(VARIANT)),
   size: PropTypes.oneOf(Object.values(SIZE)),
   status: PropTypes.oneOf(Object.values(STATUS)),
@@ -12,7 +21,6 @@ const propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.number,
   iconPlacement: PropTypes.oneOf(Object.values(ICON_PLACEMENT)),
-  paletteShade: PropTypes.oneOf(Object.values(PALETTE_SHADE)),
   disabledAppearance: PropTypes.oneOf(Object.values(DISABLED_APPEARANCE)),
   renderIcon: renderSlotType,
   renderBefore: renderSlotType,
@@ -23,7 +31,6 @@ const propTypes = {
   type: PropTypes.oneOf(Object.values(BUTTON_TYPE)),
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
   isSelected: PropTypes.bool,
   shape: PropTypes.oneOf(Object.values(SHAPE)),
   title: PropTypes.string,

package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
     role="group"
@@ -22,7 +22,7 @@ exports[`Label - Snapshot Render with a11y attributes 1`] = `
 exports[`Label - Snapshot Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default custom-container"
+    class="d-inline-flex d-flex-row d-items-center container default custom-container"
     data-id="flex"
     data-test-id="flex"
   >
@@ -39,7 +39,7 @@ exports[`Label - Snapshot Render with customClass 1`] = `
 exports[`Label - Snapshot Render with customId and testId 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="label-customId"
     data-selector-id="label-customId"
     data-test-id="label-testId"
@@ -57,7 +57,7 @@ exports[`Label - Snapshot Render with customId and testId 1`] = `
 exports[`Label - Snapshot Render with customProps 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center shrink container default"
+    class="d-inline-flex d-flex-row d-items-center d-min-w-0 d-flex-shrink container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -74,7 +74,7 @@ exports[`Label - Snapshot Render with customProps 1`] = `
 exports[`Label - Snapshot Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -91,7 +91,7 @@ exports[`Label - Snapshot Render with default props 1`] = `
 exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -108,7 +108,7 @@ exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
 exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -125,7 +125,7 @@ exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
 exports[`Label - Snapshot Render with htmlFor 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -143,7 +143,7 @@ exports[`Label - Snapshot Render with htmlFor 1`] = `
 exports[`Label - Snapshot Render with i18nKeys 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -167,7 +167,7 @@ exports[`Label - Snapshot Render with i18nKeys 1`] = `
 exports[`Label - Snapshot Render with isClipped=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -184,7 +184,7 @@ exports[`Label - Snapshot Render with isClipped=true 1`] = `
 exports[`Label - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container disabled"
+    class="d-inline-flex d-flex-row d-items-center container disabled"
     data-id="flex"
     data-test-id="flex"
   >
@@ -201,7 +201,7 @@ exports[`Label - Snapshot Render with isDisabled=true 1`] = `
 exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container readonly default"
+    class="d-inline-flex d-flex-row d-items-center container readonly default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -218,7 +218,7 @@ exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
 exports[`Label - Snapshot Render with isRequired=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -242,7 +242,7 @@ exports[`Label - Snapshot Render with isRequired=true 1`] = `
 exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -266,7 +266,7 @@ exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
 exports[`Label - Snapshot Render with layout=block 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center container default"
+    class="d-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -283,7 +283,7 @@ exports[`Label - Snapshot Render with layout=block 1`] = `
 exports[`Label - Snapshot Render with layout=inline 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -300,7 +300,7 @@ exports[`Label - Snapshot Render with layout=inline 1`] = `
 exports[`Label - Snapshot Render with palette=default 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -317,7 +317,7 @@ exports[`Label - Snapshot Render with palette=default 1`] = `
 exports[`Label - Snapshot Render with palette=secondary 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container secondary"
+    class="d-inline-flex d-flex-row d-items-center container secondary"
     data-id="flex"
     data-test-id="flex"
   >
@@ -334,7 +334,7 @@ exports[`Label - Snapshot Render with palette=secondary 1`] = `
 exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -358,7 +358,7 @@ exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
 exports[`Label - Snapshot Render with requiredType=text 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -382,7 +382,7 @@ exports[`Label - Snapshot Render with requiredType=text 1`] = `
 exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container required"
+    class="d-inline-flex d-flex-row d-items-center container required"
     data-id="flex"
     data-test-id="flex"
   >
@@ -406,7 +406,7 @@ exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
 exports[`Label - Snapshot Render with size=medium 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -423,7 +423,7 @@ exports[`Label - Snapshot Render with size=medium 1`] = `
 exports[`Label - Snapshot Render with size=small 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -440,7 +440,7 @@ exports[`Label - Snapshot Render with size=small 1`] = `
 exports[`Label - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-custom-attr="true"
     data-id="flex"
     data-test-id="flex"