From d6c5a2ad2debb5886140bc2fe8246af8c66b2b64 Mon Sep 17 00:00:00 2001
From: RyushiAok <55625375+RyushiAok@users.noreply.github.com>
Date: Thu, 9 Jan 2025 23:28:47 +0900
Subject: [PATCH] feat(date-range-picker): mini

---
 packages/styles/bases/date-range-picker.css.ts         | 10 +++++++++-
 .../date-range-picker/date-range-picker.stories.ts     | 10 ++++++++++
 .../inputs/date-range-picker/date-range-picker.vue     |  6 ++++++
 .../date-range-picker/components/date-range-picker.tsx |  3 +++
 .../stories/date-range-picker.stories.tsx              | 10 ++++++++++
 5 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/styles/bases/date-range-picker.css.ts b/packages/styles/bases/date-range-picker.css.ts
index 9596e1988..49e92078b 100644
--- a/packages/styles/bases/date-range-picker.css.ts
+++ b/packages/styles/bases/date-range-picker.css.ts
@@ -6,13 +6,21 @@ const BORDER_WIDTH = "1px";
 const baseBodyStyle = style({
   borderRadius: THEME.spacing.xs2,
   boxSizing: "border-box",
-  padding: `calc(${THEME.spacing.xs} - ${BORDER_WIDTH}) ${THEME.spacing.xs}`,
   fontSize: THEME.fontSize.sm,
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
 });
 
+export const variantStyles = styleVariants({
+  regular: {
+    padding: `calc(${THEME.spacing.xs} - ${BORDER_WIDTH}) ${THEME.spacing.xs}`,
+  },
+  mini: {
+    padding: `1px ${THEME.spacing.xs2}`,
+  },
+});
+
 export const bodyStyle = styleVariants({
   active: [
     baseBodyStyle,
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
index ea608fe27..0c687bc6d 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
@@ -289,6 +289,16 @@ IsDirectionFixed.parameters = {
   },
 };
 
+export const Mini = Template.bind({});
+Mini.args = {
+  modelValue: {
+    start: new Date(2020, 0, 15),
+    end: new Date(2020, 1, 15),
+  },
+  isDirectionFixed: true,
+  variant: "mini",
+};
+
 const _formatDateJp = (date: Date) =>
   `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
 
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
index 71ce7dbeb..31d2ef6c0 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
@@ -3,6 +3,7 @@
     <button
       type="button"
       :class="[
+        styles.variantStyles[variant],
         styles.bodyStyle[disabled ? 'disabled' : 'active'],
         styles.widthStyle[expand ? 'expanded' : 'default'],
         inputBorderStyle[borderState],
@@ -223,6 +224,11 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  variant: {
+    type: String as PropType<"regular" | "mini">,
+    required: false,
+    default: "regular",
+  },
   /**
    * カレンダー（Popup）の開閉状態を指定します。
    */
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
index e7cbb47a0..acbeced3c 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
@@ -42,6 +42,7 @@ type Props = BaseProps & {
   selectBoxOptions?: DateRangePickerSelectBoxOption[];
   selectBoxValue?: string;
   isDirectionFixed?: boolean;
+  variant?: "regular" | "mini";
   error?: boolean;
   _today?: Date;
   onChangeDateRange?: (dateRange: DateRange) => void;
@@ -63,6 +64,7 @@ const DateRangePicker: FC<Props> = ({
   selectBoxOptions,
   selectBoxValue,
   isDirectionFixed = false,
+  variant = "regular",
   error,
   _today,
   onChangeDateRange,
@@ -233,6 +235,7 @@ const DateRangePicker: FC<Props> = ({
         className={clsx(
           className,
           styles.bodyStyle[disabled ? "disabled" : "active"],
+          styles.variantStyles[variant],
           styles.widthStyle[expand ? "expanded" : "default"],
           inputBorderStyle[borderStyle]
         )}
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx
index 3ca2c245a..6539ee407 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx
@@ -158,6 +158,16 @@ export const InitialValueStart: Story = {
   },
 };
 
+export const Mini: Story = {
+  args: {
+    dateRange: {
+      start: new Date(2000, 0, 15),
+      end: null,
+    },
+    variant: "mini",
+  },
+};
+
 export const Playground: Story = {
   args: {
     selectBoxOptions: [