[High Contrast Mode] Form controls (#8193)

elastic · Dec 2, 2024 · 91f3f91 · 91f3f91
1 parent ca9a01e
commit 91f3f91
Show file tree

Hide file tree

Showing 48 changed files with 331 additions and 129 deletions.
diff --git a/...ges/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png b/...ges/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png
diff --git a/...es/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png b/...es/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png
diff --git a/...ce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/...ce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
diff --git a/...desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/...desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
diff --git a/...nce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/...nce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
diff --git a/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/...i/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/...i/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png
diff --git a/...e/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/...e/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png
diff --git a/...i/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png b/...i/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png
diff --git a/...ages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png b/...ages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png
diff --git a/...ges/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png b/...ges/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png
diff --git a/...nce/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/...nce/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
diff --git a/..._mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/..._mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
diff --git a/...ence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/...ence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
diff --git a/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/...ki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/...ki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png
diff --git a/...ce/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/...ce/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png
diff --git a/...ui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png b/...ui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png
diff --git a/packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -96,7 +96,7 @@ exports[`EuiCheckableCard renders children 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -142,7 +142,7 @@ exports[`EuiCheckableCard renders disabled 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -182,7 +182,7 @@ exports[`EuiCheckableCard renders panel props 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"

diff --git a/packages/eui/src/components/filter_group/filter_select_item.styles.ts b/packages/eui/src/components/filter_group/filter_select_item.styles.ts
@@ -45,7 +45,10 @@ export const euiFilterSelectItemStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.text};
       ${logicalCSS(
         'border-bottom',
-        `${euiTheme.border.width.thin} solid ${euiTheme.colors.lightestShade}`
+        `${euiTheme.border.width.thin} solid ${transparentize(
+          euiTheme.border.color,
+          0.4
+        )}`
       )}
 
       &:hover {

diff --git a/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx b/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
@@ -44,3 +44,9 @@ export const Playground: Story = {
     },
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/form/file_picker/file_picker.styles.ts b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
@@ -98,7 +98,7 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextTruncate()}
       color: ${euiTheme.colors.text};
       border: ${euiTheme.border.width.thick} dashed
-        var(--euiFormControlStateColor, ${euiTheme.colors.lightShade});
+        var(--euiFormControlStateColor, ${euiTheme.border.color});
 
       ${euiCanAnimate} {
         transition: border-color ${euiTheme.animation.fast} ease-in,

diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
@@ -54,6 +54,7 @@ describe('euiFormVariables', () => {
         "iconAffordance": "24px",
         "iconCompressedAffordance": "18px",
         "maxWidth": "400px",
+        "stateUnderlineHeight": "2px",
         "textColor": "#343741",
       }
     `);
@@ -123,11 +124,11 @@ describe('euiFormControlStyles', () => {
 
         ",
         "focus": "
-        --euiFormControlStateColor: #07C;
-        background-color: #FFF;
-        background-size: 100% 100%;
-        outline: none; /* Remove all outlines and rely on our own bottom border gradient */
-      ",
+          --euiFormControlStateColor: #07C;
+          background-color: #FFF;
+          background-size: 100% 100%;
+          outline: none; /* Remove all outlines and rely on our own bottom border gradient */
+        ",
         "formWidth": "
             max-inline-size: 400px;
             inline-size: 100%;
@@ -142,16 +143,17 @@ describe('euiFormControlStyles', () => {
             border-radius: 0;
           ",
         "invalid": "
-        --euiFormControlStateColor: #BD271E;
-        background-size: 100% 100%;
-      ",
+          --euiFormControlStateColor: #BD271E;
+          background-size: 100% 100%;
+        ",
         "readOnly": "
           cursor: default;
           color: #343741;
           -webkit-text-fill-color: #343741; /* Required for Safari */
 
           background-color: #FFF;
           --euiFormControlStateColor: transparent;
+          
         ",
         "shared": "
             
@@ -224,26 +226,40 @@ describe('euiFormCustomControlStyles', () => {
         "input": {
           "disabled": {
             "selected": "
-                label: disabled;
-                color: #69707D;
-                background-color: #D3DAE6;
-              ",
+                  
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                
+                  color: #69707D;
+                ",
+            "shared": "
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                ",
             "unselected": "
-                label: disabled;
-                color: #D3DAE6;
-                background-color: #D3DAE6;
-                cursor: not-allowed;
-              ",
+                  
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                
+                  color: #D3DAE6;
+                ",
           },
           "enabled": {
             "selected": "
                 color: #FFF;
                 background-color: #07C;
+                border-color: #07C;
               ",
             "unselected": "
                 color: transparent;
                 background-color: #FFF;
-                border: 1px solid #919296;
+                border-color: #919296;
 
                 &:has(input:focus) {
                   border-color: #07C;
@@ -257,6 +273,8 @@ describe('euiFormCustomControlStyles', () => {
               display: flex;
               justify-content: center;
               align-items: center;
+              /* For Windows high contrast themes, a border must always be rendered, not just a background */
+              border: 1px solid transparent;
 
               &:has(input:focus-visible) {
                 outline: 2px solid #07C;