fix(Select): options have wrong styling when field is over inverse va…

…riant (#1024)
Telefonica · Feb 16, 2024 · fc7849f · fc7849f · github-actions · Feb 16, 2024
1 parent dff56b2
commit fc7849f
Show file tree

Hide file tree

Showing 5 changed files with 244 additions and 187 deletions.
diff --git a/...m-select-screenshot-test-tsx-select-display-all-options-over-inverse-1-snap.png b/...m-select-screenshot-test-tsx-select-display-all-options-over-inverse-1-snap.png
diff --git a/...-test-tsx-select-display-all-options-with-native-select-over-inverse-1-snap.png b/...-test-tsx-select-display-all-options-with-native-select-over-inverse-1-snap.png
diff --git a/src/__screenshot_tests__/form-select-screenshot-test.tsx b/src/__screenshot_tests__/form-select-screenshot-test.tsx
@@ -151,6 +151,21 @@ test('Select - display all options', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('Select - display all options over inverse', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--controlled',
+        device: 'DESKTOP',
+        args: {inverse: true},
+    });
+
+    const field = await screen.findByRole('button', {name: 'Select a fruit'});
+    await field.click();
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('Select - display all options with native select', async () => {
     const page = await openStoryPage({
         id: 'components-select--controlled',
@@ -165,3 +180,18 @@ test('Select - display all options with native select', async () => {
 
     expect(image).toMatchImageSnapshot();
 });
+
+test('Select - display all options with native select over inverse', async () => {
+    const page = await openStoryPage({
+        id: 'components-select--controlled',
+        device: 'DESKTOP',
+        args: {native: true, inverse: true},
+    });
+
+    const field = await screen.findByLabelText('Select a fruit');
+    await field.click();
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
diff --git a/src/__stories__/select-story.tsx b/src/__stories__/select-story.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import {fruitEntries} from './helpers';
-import {Select} from '..';
+import {Box, ResponsiveLayout, Select} from '..';
 
 export default {
     title: 'Components/Select',
     component: Select,
+    parameters: {fullScreen: true},
 };
 
 type Args = {
@@ -14,6 +15,7 @@ type Args = {
     error: boolean;
     native: boolean;
     optional: boolean;
+    inverse: boolean;
 };
 
 const defaultArgs = {
@@ -23,29 +25,42 @@ const defaultArgs = {
     error: false,
     native: false,
     optional: false,
+    inverse: false,
 };
 
-export const Controlled: StoryComponent<Args> = ({label, helperText, disabled, error, native, optional}) => {
+export const Controlled: StoryComponent<Args> = ({
+    label,
+    helperText,
+    disabled,
+    error,
+    native,
+    optional,
+    inverse,
+}) => {
     const fruitOptions = fruitEntries.map(([text, value]) => ({text, value}));
     fruitOptions.push({value: 'longValue', text: 'A very very long text value for this option'});
 
     const [value, setValue] = React.useState('');
 
     return (
-        <div data-testid="select-field-wrapper" style={{width: 'fit-content'}}>
-            <Select
-                name="select-field"
-                native={native}
-                error={error}
-                disabled={disabled}
-                optional={optional}
-                value={value}
-                onChangeValue={setValue}
-                label={label}
-                helperText={helperText}
-                options={fruitOptions}
-            />
-        </div>
+        <ResponsiveLayout isInverse={inverse} fullWidth>
+            <Box padding={16}>
+                <div data-testid="select-field-wrapper" style={{width: 'fit-content'}}>
+                    <Select
+                        name="select-field"
+                        native={native}
+                        error={error}
+                        disabled={disabled}
+                        optional={optional}
+                        value={value}
+                        onChangeValue={setValue}
+                        label={label}
+                        helperText={helperText}
+                        options={fruitOptions}
+                    />
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
@@ -59,23 +74,28 @@ export const Uncontrolled: StoryComponent<Args> = ({
     error,
     native,
     optional,
+    inverse,
 }) => {
     const fruitOptions = fruitEntries.map(([text, value]) => ({text, value}));
     fruitOptions.push({value: 'longValue', text: 'A very very long text value for this option'});
 
     return (
-        <div data-testid="select-field-wrapper" style={{width: 'fit-content'}}>
-            <Select
-                name="select-field"
-                native={native}
-                error={error}
-                disabled={disabled}
-                optional={optional}
-                label={label}
-                helperText={helperText}
-                options={fruitOptions}
-            />
-        </div>
+        <ResponsiveLayout isInverse={inverse} fullWidth>
+            <Box padding={16}>
+                <div data-testid="select-field-wrapper" style={{width: 'fit-content'}}>
+                    <Select
+                        name="select-field"
+                        native={native}
+                        error={error}
+                        disabled={disabled}
+                        optional={optional}
+                        label={label}
+                        helperText={helperText}
+                        options={fruitOptions}
+                    />
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };