From 0b47ffdc32cd6b8b9542a248f9897dea28f37fe4 Mon Sep 17 00:00:00 2001
From: luizrochaecore <96194228+luizrochaecore@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:21:26 -0300
Subject: [PATCH] Fix/label z index (#1423)

* fix: set label zindex to 1 to fix chrome autofill hidden issue

* doc change

* update snapshot
---
 .../fix-label-z-index_2023-11-29-20-07.json            | 10 ++++++++++
 .../FormField/__snapshots__/FormField.spec.tsx.snap    |  7 +++++++
 packages/core/src/Label/Label.tsx                      |  1 +
 .../core/src/Label/__snapshots__/Label.spec.tsx.snap   |  4 ++++
 4 files changed, 22 insertions(+)
 create mode 100644 common/changes/pcln-design-system/fix-label-z-index_2023-11-29-20-07.json

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
new file mode 100644
index 0000000000..1872acebff
--- /dev/null
+++ 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"
+}
\ No newline at end of file
diff --git a/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap b/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap
index a85bf4f1c8..4a7b826ef9 100644
--- 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
index 163c28768b..6173a9e126 100644
--- 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
index 8fc965dba6..88e59f1905 100644
--- 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;