Merge pull request #1342 from Wizleap-Inc/feat/search-input-label-tex…

…t-position Feat(search-input): ラベル位置を揃える
Wizleap-Inc · Jul 22, 2024 · d7451dc · d7451dc
2 parents 28eb127 + eb0e7ec
commit d7451dc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/.changeset/sixty-rocks-sin.md b/.changeset/sixty-rocks-sin.md
@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-react": minor
+---
+
+Feat(search-input): ラベルの位置を揃える
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
@@ -107,6 +107,7 @@
                   align="center"
                   nowrap
                   gap="xs2"
+                  :pl="!allOptionsHaveChildren && !singleSelect ? 'lg' : 'no'"
                 >
                   <div :class="styles.searchInputLabelStyle">
                     {{ item.label }}
@@ -303,6 +304,9 @@ const activeItem = ref<number | null>();
 const activeItemIndex = ref<number | null>(null);
 const hasFocus = ref(false);
 const isBorder = ref(false);
+const allOptionsHaveChildren = props.options.every(
+  (option) => !!option.children
+);
 
 const valueToOption = computed(() => {
   const map = new Map<number, SearchInputOption>();

diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-popup.vue
@@ -47,6 +47,11 @@
                   align="center"
                   nowrap
                   gap="xs2"
+                  :pl="
+                    !allOptionsHaveChildren(option.children) && !singleSelect
+                      ? 'lg'
+                      : 'no'
+                  "
                 >
                   <div :class="styles.searchInputLabelStyle">
                     {{ item.label }}
@@ -192,6 +197,8 @@ const activeItemIndex = ref<number | null>(null);
 
 const ITEM_HEIGHT = 44;
 const DIVIDER_HEIGHT = 0.8;
+const allOptionsHaveChildren = (options: SearchInputOption[]) =>
+  options.every((option) => !!option.children);
 
 const checkValues = computed({
   get: () => props.modelValue,

diff --git a/...es/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx b/...es/wiz-ui-react/src/components/base/inputs/search-input/components/search-popup-panel.tsx
@@ -68,6 +68,8 @@ export const SearchPopupPanel: FC<Props> = ({
     setActiveValue(null);
   }, [options]);
 
+  const allOptionsHaveChildren = options.every((option) => !!option.children);
+
   return (
     <>
       <div
@@ -99,6 +101,9 @@ export const SearchPopupPanel: FC<Props> = ({
                       )}
                     >
                       <WizHStack
+                        pl={
+                          !allOptionsHaveChildren && !singleSelect ? "lg" : "no"
+                        }
                         py="xs2"
                         width="100%"
                         justify="between"