From 4ab78a26eaeea517b65ec202a2abeb7f93dcfc89 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Fri, 17 Dec 2021 11:35:35 +1100
Subject: [PATCH] Fix for SelectPanel Filter width (#1742)

* Fix for SelectPanel Filter width

* Lint issues

* Create shaggy-hounds-decide.md
---
 .changeset/shaggy-hounds-decide.md            |  5 ++
 .../FilteredActionList.stories.tsx            | 71 +++++++++++++++++++
 src/_TextInputWrapper.tsx                     |  1 +
 .../__snapshots__/TextInput.test.tsx.snap     |  4 ++
 .../TextInputWithTokens.test.tsx.snap         |  4 ++
 5 files changed, 85 insertions(+)
 create mode 100644 .changeset/shaggy-hounds-decide.md
 create mode 100644 src/FilteredActionList/FilteredActionList.stories.tsx

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
diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx
new file mode 100644
index 00000000000..9c38c45b681
--- /dev/null
+++ b/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'}}
+      />
+    </>
+  )
+}
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);