Style (Calendar): Select and nav button alignment (#372)

* style: select alignment in calendar

* chore: add datepicker in page.tsx

* Fix: select and nav button height to align better

* chore: use vars

* docs: remove extra props

* docs: remove extra props

Author: paanSinghCoder

apps/www/src/app/examples/page.tsx

@@ -161,12 +161,21 @@ const Page = () => {
               onClear={() => setSearch1("")}
             />
 
+
             <RangePicker footer={<Callout width="100%" type="success">Some important message in the footer</Callout>} />
 
             <RangePicker />
 
-            <DatePicker />
+            <DatePicker
+              calendarProps={{
+                captionLayout: 'dropdown',
+                mode: 'single',
+                required: true,
+                selected: undefined
+              }}
+            />
 
+            <DatePicker />
             <Text
               size="large"
               weight="medium"

apps/www/src/content/docs/components/calendar/demo.ts

@@ -5,18 +5,18 @@ export const preview = {
   tabs: [
     {
       name: "Calendar",
-      code: `<Calendar numberOfMonths={2} />`,
+      code: `<Calendar />`,
     },
     {
       name: "Range Picker",
       code: `
-        <RangePicker inputFieldsProps={{ startDate: { size: "large" } }} />`,
+        <RangePicker side="bottom" />`,
     },
     {
       name: "Date Picker",
       code: `
       <Flex style={{height:200}}>
-        <DatePicker inputFieldsProps={{ startDate: { size: "large" } }}}} />
+        <DatePicker />
       </Flex>`,
     },
   ],

packages/raystack/v1/components/calendar/calendar.module.css

@@ -32,7 +32,7 @@
   color: var(--rs-color-foreground-base-primary);
   background: var(--rs-color-background-base-primary);
   cursor: pointer;
-  height: 20px;
+  height: var(--rs-space-7);
 }
 
 .nav_button:disabled {
@@ -66,6 +66,7 @@
   position: relative;
   width: fit-content;
   margin: 0 auto var(--rs-space-4) auto;
+  height: var(--rs-space-7);
 }
 
 .day {
@@ -201,25 +202,16 @@
   gap: var(--rs-space-3);
 }
 
-.dropdown_trigger,
-.dropdown_trigger:focus {
-  border: none;
-  outline: none;
-  box-shadow: none;
+.dropdown_trigger {
   padding: var(--rs-space-1) var(--rs-space-3);
 }
 
-.dropdown_trigger:hover {
-  background-color: var(--rs-color-background-base-primary-hover);
-}
-
 .dropdown_icon {
-  margin-left: var(--rs-space-2);
+  margin-left: var(--rs-space-1);
 }
 
 .dropdown_content {
   max-height: 400px;
-  /* border: 1px solid var(--rs-color-border-base-primary); */
 }
 
 .disabled {
@@ -230,11 +222,11 @@
 .day.today button::after {
   content: '';
   position: absolute;
-  bottom: 4px;
+  bottom: var(--rs-space-2);
   left: 50%;
   transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
+  width: var(--rs-space-2);
+  height: var(--rs-space-2);
   border-radius: 50%;
   background-color: var(--rs-color-background-accent-emphasis);
 }

packages/raystack/v1/components/calendar/calendar.tsx

@@ -66,6 +66,8 @@ function DropDown({
           className: styles.dropdown_icon,
         }}
         stopPropagation={true}
+        size="small"
+        variant="text"
       >
         <Select.Value />
       </Select.Trigger>