Fix/label z index (#1423)

* fix: set label zindex to 1 to fix chrome autofill hidden issue * doc change * update snapshot
priceline · Nov 30, 2023 · 0b47ffd · 0b47ffd
1 parent 6fab46f
commit 0b47ffd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/common/changes/pcln-design-system/fix-label-z-index_2023-11-29-20-07.json b/common/changes/pcln-design-system/fix-label-z-index_2023-11-29-20-07.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "add zindex 1 to label to fix autofill label hiding issue",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap b/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -46,6 +46,7 @@ exports[`FormField disabled state renders input with icon - disabled 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 40px;
@@ -263,6 +264,7 @@ exports[`FormField disabled state renders select with icon - disabled 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 40px;
@@ -448,6 +450,7 @@ exports[`FormField renders 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 12px;
@@ -619,6 +622,7 @@ exports[`FormField renders with Icon 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 40px;
@@ -812,6 +816,7 @@ exports[`FormField renders with Label autoHide prop 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 40px;
@@ -998,6 +1003,7 @@ exports[`FormField renders with Select  1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 12px;
@@ -1195,6 +1201,7 @@ exports[`FormField renders with Select and Icon 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-size: 10px;
   margin-left: 40px;

diff --git a/packages/core/src/Label/Label.tsx b/packages/core/src/Label/Label.tsx
@@ -77,6 +77,7 @@ const Label: React.FC<ILabelProps> & { isLabel?: boolean } = styled.label.attrs(
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: ${getPaletteColor('base')};
   ${(props) => (props.bg ? `background-color: ${getPaletteColor(props.bg, 'base')(props)};` : '')}
   ${(props) => (props.onClick ? 'cursor: pointer;' : '')}

diff --git a/packages/core/src/Label/__snapshots__/Label.spec.tsx.snap b/packages/core/src/Label/__snapshots__/Label.spec.tsx.snap
@@ -5,6 +5,7 @@ exports[`Label Label hidden renders 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   position: absolute;
   width: 1px;
@@ -35,6 +36,7 @@ exports[`Label Label nowrap renders 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   white-space: nowrap;
   font-weight: 700;
@@ -60,6 +62,7 @@ exports[`Label Label width renders 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   white-space: nowrap;
   width: 50%;
@@ -87,6 +90,7 @@ exports[`Label it renders 1`] = `
   display: block;
   width: 100%;
   margin: 0;
+  z-index: 1;
   color: #4f6f8f;
   font-weight: 700;
   font-size: 10px;