fix: SearchInputのwrapperであるlabel要素に対してwidthを指定する

kufu · Sep 30, 2024 · f010d4d · f010d4d
1 parent 29d88a8
commit f010d4d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.stories.tsx
@@ -2,7 +2,8 @@ import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-import { Stack } from '../../Layout'
+import { Button } from '../../Button'
+import { Cluster, Stack } from '../../Layout'
 
 import { SearchInput } from './SearchInput'
 
@@ -39,6 +40,18 @@ export const Default: Story = {
           decorators={{ iconAlt: (txt) => `search.(${txt})` }}
         />
       </div>
+      <div>
+        <p>width: 100% in Cluster</p>
+        <StyledCluster justify="space-between">
+          <SearchInput
+            name="default"
+            width="100%"
+            tooltipMessage="氏名、ヨミガナ、社員番号で検索できます。スペース区切りでAND検索ができます。"
+            decorators={{ iconAlt: (txt) => `search.(${txt})` }}
+          />
+          <Button>検索</Button>
+        </StyledCluster>
+      </div>
     </StyledStack>
   ),
 }
@@ -48,3 +61,7 @@ const StyledStack = styled(Stack)`
     padding: ${space(2)};
   `}
 `
+
+const StyledCluster = styled(Cluster)`
+  flex-wrap: nowrap;
+`
diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
@@ -13,16 +13,30 @@ type Props = Omit<ComponentProps<typeof InputWithTooltip>, 'tooltipMessage' | 'p
 
 const ICON_ALT = '検索'
 
-export const SearchInput = forwardRef<HTMLInputElement, Props>(({ decorators, ...props }, ref) => {
-  const iconAlt = useMemo(() => decorators?.iconAlt?.(ICON_ALT) || ICON_ALT, [decorators])
-
-  return (
-    <label>
-      <InputWithTooltip
-        {...props}
-        ref={ref}
-        prefix={<FaSearchIcon alt={iconAlt} color="TEXT_GREY" />}
-      />
-    </label>
-  )
-})
+export const SearchInput = forwardRef<HTMLInputElement, Props>(
+  ({ decorators, width, ...props }, ref) => {
+    const iconAlt = useMemo(() => decorators?.iconAlt?.(ICON_ALT) || ICON_ALT, [decorators])
+    const labelStyles = useMemo(() => {
+      const widthStyle = typeof width === 'number' ? `${width}px` : width
+
+      if (!widthStyle) {
+        return undefined
+      }
+
+      return {
+        width: widthStyle,
+      }
+    }, [width])
+
+    return (
+      <label style={labelStyles}>
+        <InputWithTooltip
+          {...props}
+          ref={ref}
+          width={width}
+          prefix={<FaSearchIcon alt={iconAlt} color="TEXT_GREY" />}
+        />
+      </label>
+    )
+  },
+)