From 9846a09ae79077e8abe3ac7807f2fd45c1aa0c90 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 16 Dec 2021 20:38:19 +1100
Subject: [PATCH 1/3] Fix for SelectPanel Filter width

---
 .../FilteredActionList.stories.tsx            | 73 +++++++++++++++++++
 src/_TextInputWrapper.tsx                     |  1 +
 .../__snapshots__/TextInput.test.tsx.snap     |  4 +
 .../TextInputWithTokens.test.tsx.snap         |  4 +
 4 files changed, 82 insertions(+)
 create mode 100644 src/FilteredActionList/FilteredActionList.stories.tsx

diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx
new file mode 100644
index 00000000000..dc9203e3c5e
--- /dev/null
+++ b/src/FilteredActionList/FilteredActionList.stories.tsx
@@ -0,0 +1,73 @@
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {ThemeProvider} from '..'
+import {FilteredActionList} from '../FilteredActionList'
+import {ItemInput} from '../ActionList/List'
+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 [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  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'}}
+      />
+    </>
+  )
+}
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index a105d4b0d8d..2f7805295d0 100644
--- a/src/_TextInputWrapper.tsx
+++ b/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
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 9bb4af11590..6682ca12cac 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/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) {
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index d5d14e3c24e..c3da1ecfd75 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/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);

From 2da08b7b5f5885a81525b245514997b3863589af Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 16 Dec 2021 20:47:13 +1100
Subject: [PATCH 2/3] Lint issues

---
 src/FilteredActionList/FilteredActionList.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx
index dc9203e3c5e..9c38c45b681 100644
--- a/src/FilteredActionList/FilteredActionList.stories.tsx
+++ b/src/FilteredActionList/FilteredActionList.stories.tsx
@@ -2,7 +2,6 @@ import {Meta} from '@storybook/react'
 import React from 'react'
 import {ThemeProvider} from '..'
 import {FilteredActionList} from '../FilteredActionList'
-import {ItemInput} from '../ActionList/List'
 import BaseStyles from '../BaseStyles'
 import Box from '../Box'
 
@@ -54,7 +53,6 @@ const items = [
 ]
 
 export function Default(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
   const [filter, setFilter] = React.useState('')
   const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
 

From c1430494e7e1ba55e487f70a244a5c191bdc60b5 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 16 Dec 2021 22:09:43 +1100
Subject: [PATCH 3/3] Create shaggy-hounds-decide.md

---
 .changeset/shaggy-hounds-decide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaggy-hounds-decide.md

diff --git a/.changeset/shaggy-hounds-decide.md b/.changeset/shaggy-hounds-decide.md
new file mode 100644
index 00000000000..346319c8c3a
--- /dev/null
+++ b/.changeset/shaggy-hounds-decide.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix for SelectPanel Filter width