Fix for SelectPanel Filter width (#1742)

* Fix for SelectPanel Filter width

* Lint issues

* Create shaggy-hounds-decide.md

Author: pksjce

.changeset/shaggy-hounds-decide.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix for SelectPanel Filter width

src/FilteredActionList/FilteredActionList.stories.tsx

@@ -0,0 +1,71 @@
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {ThemeProvider} from '..'
+import {FilteredActionList} from '../FilteredActionList'
+import BaseStyles from '../BaseStyles'
+import Box from '../Box'
+
+const meta: Meta = {
+  title: 'Composite components/FilteredActionList',
+  component: FilteredActionList,
+  decorators: [
+    (Story: React.ComponentType): JSX.Element => (
+      <ThemeProvider>
+        <BaseStyles>
+          <Story />
+        </BaseStyles>
+      </ThemeProvider>
+    )
+  ],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}
+export default meta
+
+function getColorCircle(color: string) {
+  return function () {
+    return (
+      <Box
+        bg={color}
+        borderColor={color}
+        width={14}
+        height={14}
+        borderRadius={10}
+        margin="auto"
+        borderWidth="1px"
+        borderStyle="solid"
+      />
+    )
+  }
+}
+
+const items = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}
+]
+
+export function Default(): JSX.Element {
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+
+  return (
+    <>
+      <h1>Filtered Action List</h1>
+      <div>Please select labels that describe your issue:</div>
+      <FilteredActionList
+        placeholderText="Filter Labels"
+        items={filteredItems}
+        onFilterChange={setFilter}
+        sx={{border: '1px solid', padding: '8px'}}
+      />
+    </>
+  )
+}

src/_TextInputWrapper.tsx

@@ -135,6 +135,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
     props.block &&
     css`
       width: 100%;
+      display: flex;
     `}
   
     // Ensures inputs don' t zoom on mobile but are body-font size on desktop

src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -123,6 +123,10 @@ exports[`TextInput renders block 1`] = `
   padding-left: 0;
   padding-right: 0;
   width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .c0 >:not(:last-child) {

src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -452,6 +452,10 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding-left: 0;
   padding-right: 0;
   width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);