Fix fullWidth focus on Select component (#660)

* fix fullWidth focus on Select component

* Create sixty-rules-trade.md

* update changeset

* add back aria-label

Author: rezrah

.changeset/sixty-rules-trade.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed width of the focus outline in the `Select` component to fill the entire width of the control when `fullWidth` option has bene applied.

package-lock.json

@@ -0,0 +1,62 @@
+import React from 'react'
+import {Meta, StoryFn} from '@storybook/react'
+import {userEvent, waitFor} from '@storybook/test'
+
+import {Select} from '.'
+
+export default {
+  title: 'Components/Forms/Select/Features',
+  component: Select,
+} as Meta<typeof Select>
+
+const Template: StoryFn<typeof Select> = args => (
+  <Select {...args} aria-label="Standalone select input" defaultValue="select a handle" {...args}>
+    <Select.Option value="select a handle" disabled>
+      Select a handle
+    </Select.Option>
+    <Select.Option value="mona">Monalisa</Select.Option>
+    <Select.Option value="hubot">Hubot</Select.Option>
+  </Select>
+)
+
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  fullWidth: true,
+}
+
+export const FullWidthFocussed = Template.bind({})
+FullWidthFocussed.args = {
+  fullWidth: true,
+}
+
+FullWidthFocussed.play = async () => {
+  await waitFor(async () => {
+    userEvent.tab()
+  })
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  size: 'large',
+}
+
+export const LargeFullWidth = Template.bind({})
+LargeFullWidth.args = {
+  fullWidth: true,
+  size: 'large',
+}
+
+export const ValidationSuccess = Template.bind({})
+ValidationSuccess.args = {
+  validationStatus: 'success',
+}
+
+export const ValidationError = Template.bind({})
+ValidationError.args = {
+  validationStatus: 'error',
+}

packages/react/src/forms/FormControl/FormControl.visual.spec.ts-snapshots/Visual-Comparison-FormControl-FormControl-w-Select---Playground-1-linux.png

@@ -56,7 +56,7 @@
 }
 
 .Select-wrapper--medium::after {
-  margin-inline-end: var(--base-size-8);
+  margin-inline-end: calc(var(--brand-control-medium-paddingInline-condensed) / 2);
 }
 
 .Select--medium {
@@ -72,7 +72,7 @@
 }
 
 .Select-wrapper--large::after {
-  margin-inline-end: var(--base-size-12);
+  margin-inline-end: var(--base-size-8);
 }
 
 .Select--large {
@@ -105,10 +105,12 @@
 }
 
 .Select-wrapper::after {
+  content: '';
+  position: absolute;
+  right: 0;
   width: var(--base-size-16);
   height: var(--base-size-16);
   pointer-events: none;
-  content: '';
   background-color: var(--brand-control-color-fg-default);
   mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
   -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');

packages/react/src/forms/Select/Select.features.stories.tsx

@@ -62,4 +62,10 @@ export const Playground: StoryFn<typeof Select> = args => (
   </Select>
 )
 
-Playground.storyName = 'Select - Playground'
+export const Default: StoryFn<typeof Select> = () => (
+  <Select aria-label="Standalone select input">
+    <Select.Option value="select a handle">Select a handle</Select.Option>
+    <Select.Option value="mona">Monalisa</Select.Option>
+    <Select.Option value="hubot">Hubot</Select.Option>
+  </Select>
+)

packages/react/src/forms/Select/Select.module.css

@@ -7,10 +7,78 @@ import {test, expect} from '@playwright/test'
 
 // eslint-disable-next-line i18n-text/no-en
 test.describe('Visual Comparison: Select', () => {
-  test('Select / Select - Playground', async ({page}) => {
+  test('Select / Full Width', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-select-features--full-width&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Full Width Focussed', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-select-features--full-width-focussed&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Disabled', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-select-features--disabled&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Large', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-forms-select-features--large&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Large Full Width', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-select-features--large-full-width&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Validation Success', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-select-features--validation-success&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Validation Error', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-forms-select-features--validation-error&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
+  test('Select / Playground', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-forms-select--playground&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot()).toMatchSnapshot()
   })
+
+  test('Select / Default', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-forms-select--default&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
 })