feat(date-range-picker): mini

Wizleap-Inc · Jan 9, 2025 · d6c5a2a · d6c5a2a
1 parent a782260
commit d6c5a2a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git 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/...ges/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts b/...ges/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
@@ -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/...iz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/...iz-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/...-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx b/...-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: [