Feat(date-range-picker): mini

.changeset/thick-lamps-hope.md

@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Feat(date-range-picker): mini

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,

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()}日`;
 

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）の開閉状態を指定します。
    */

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]
         )}

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: [