styling for date components

vuu-ui/packages/vuu-theme/css/components/button.css

@@ -4,9 +4,27 @@
     --saltButton-padding: var(--salt-spacing-400);
 
     .saltButton {
+        --vuu-icon-color: var(--vuuButtonIcon-color, var(--button-text-color));
         gap: var(--salt-spacing-200);
+        white-space: nowrap;
     }
 
+    .saltButton:active:not(:disabled) {
+        --vuu-icon-color: var(--button-text-color-active);
+    }
+
+    .saltButton:hover:not(.saltButton-disabled,.saltButton-active, :active){
+        --vuu-icon-color: var(--button-text-color-hover);
+    }
+
+    .saltButton-active {
+        --vuu-icon-color: var(--button-text-color-active); 
+    }
+
+    .saltButton-disabled {
+        --vuu-icon-color: var(--button-text-color-disabled); 
+    }
+
     .saltButton-primary {
         --saltButton-borderColor: var(--vuuButton-borderColor,var(--salt-actionable-primary-foreground));
         --saltButton-borderWidth: 1px;
@@ -18,3 +36,6 @@
     }    
 }
 
+
+
+

vuu-ui/packages/vuu-theme/css/components/components.css

@@ -1,5 +1,6 @@
 @import url(button.css);
 @import url(checkbox.css);
+@import url(date-input.css);
 @import url(filters.css);
 @import url(icon.css);
 @import url(input.css);

vuu-ui/packages/vuu-theme/css/components/date-input.css

@@ -0,0 +1,5 @@
+.vuu-theme {
+    .vuuDateInput {
+        border-radius: 6px;
+    }
+}

vuu-ui/packages/vuu-theme/css/components/toggle-button.css

@@ -17,6 +17,7 @@
         border-radius: var(--togglebutton-borderRadius);
         /** TODO vary by density */
         gap: 8px;
+        white-space: nowrap;
 
         --vuu-icon-color: var(--salt-actionable-secondary-foreground);
 

vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarMonth.tsx

@@ -9,9 +9,9 @@ import { makePrefixer } from "@salt-ds/core";
 import { DateValue } from "@internationalized/date";
 import { CalendarDay, CalendarDayProps } from "./CalendarDay";
 import { formatDate, generateVisibleDays } from "./utils";
+import { useCalendarContext } from "./CalendarContext";
 
 import "./CalendarMonth.css";
-import { useCalendarContext } from "./CalendarContext";
 
 export interface CalendarMonthProps extends ComponentPropsWithRef<"div"> {
   date: DateValue;

vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  ButtonProps,
-  makePrefixer,
-  Tooltip,
-  useId,
-} from "@salt-ds/core";
-import { ChevronLeftIcon, ChevronRightIcon } from "@salt-ds/icons";
+import { ButtonProps, makePrefixer, Tooltip, useId } from "@salt-ds/core";
 import { clsx } from "clsx";
 import {
   ComponentPropsWithRef,
@@ -22,6 +15,7 @@ import "./CalendarNavigation.css";
 import { DateValue, isSameMonth, isSameYear } from "@internationalized/date";
 import { formatDate, monthDiff, monthsForLocale } from "./utils";
 import { SingleSelectionHandler } from "../../common-hooks";
+import { IconButton } from "../../icon-button";
 
 type DropdownItem = {
   value: DateValue;
@@ -220,19 +214,17 @@ export const CalendarNavigation = forwardRef<
         disabled={canNavigatePrevious}
         content="Past dates are out of range"
       >
-        <Button
+        <IconButton
+          aria-label={`Previous Month, ${formatDate(
+            visibleMonth.subtract({ months: 1 })
+          )}`}
           disabled={!canNavigatePrevious}
+          icon="chevron-left"
           variant="secondary"
           onClick={handleNavigatePrevious}
           className={withBaseName("previousButton")}
           focusableWhenDisabled={true}
-        >
-          <ChevronLeftIcon
-            aria-label={`Previous Month, ${formatDate(
-              visibleMonth.subtract({ months: 1 })
-            )}`}
-          />
-        </Button>
+        />
       </Tooltip>
       <Dropdown<DropdownItem>
         source={months}
@@ -265,19 +257,17 @@ export const CalendarNavigation = forwardRef<
         disabled={canNavigateNext}
         content="Future dates are out of range"
       >
-        <Button
+        <IconButton
+          aria-label={`Next Month, ${formatDate(
+            visibleMonth.add({ months: 1 })
+          )}`}
           disabled={!canNavigateNext}
+          icon="chevron-right"
           variant="secondary"
           onClick={handleNavigateNext}
           className={withBaseName("nextButton")}
           focusableWhenDisabled={true}
-        >
-          <ChevronRightIcon
-            aria-label={`Next Month, ${formatDate(
-              visibleMonth.add({ months: 1 })
-            )}`}
-          />
-        </Button>
+        />
       </Tooltip>
     </div>
   );

vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.css

@@ -1,9 +1,10 @@
 .vuuDateInput {
+  border: solid 1px var(--salt-editable-borderColor);
   display: inline-flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   gap: 1px;
-  padding: 0 2px;
+  padding: 0 0 0 2px;
 
 
   .saltInput-input {

vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.tsx

@@ -55,7 +55,7 @@ export const DateInput = ({
   return (
     <div
       {...htmlAttributes}
-      className={clsx("saltInput saltInput-primary", classBase, className)}
+      className={clsx(classBase, className)}
       onBlur={handleOnBlur}
     >
       <input
@@ -69,6 +69,7 @@ export const DateInput = ({
       />
 
       <DatePopup
+        data-embedded
         onBlur={onBlur}
         onChange={onChange}
         ref={popupRef}

vuu-ui/packages/vuu-ui-controls/src/date-popup/DatePopup.tsx

@@ -16,6 +16,7 @@ const classBase = "vuuDatePopup";
 export interface DatePopupProps
   extends Pick<CalendarProps, "selectionVariant">,
     Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onKeyDown"> {
+  "data-embedded"?: boolean;
   selectedDate?: DateValue;
   onPopupClose?: DropdownCloseHandler;
   onPopupOpen?: () => void;
@@ -33,6 +34,7 @@ export const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(
       onPopupClose,
       onPopupOpen,
       selectionVariant,
+      "data-embedded": dataEmbedded,
       ...htmlAttributes
     },
     forwardedRef
@@ -63,6 +65,7 @@ export const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(
         onOpenChange={handleOpenChange}
       >
         <IconButton
+          data-embedded={dataEmbedded}
           icon="date"
           ref={useForkRef(forwardedRef, triggererRef)}
           variant="secondary"

vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.tsx

@@ -26,6 +26,7 @@ export const Icon = ({
       {...htmlAttributes}
       className={cx(classBase, className)}
       data-icon={name}
+      role="img"
       style={style}
     />
   );

vuu-ui/packages/vuu-ui-controls/src/icon-button/IconButton.tsx

@@ -12,10 +12,13 @@ export interface IconButtonProps extends Omit<ButtonProps, "children"> {
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton({ className, icon, ...buttonProps }, ref) {
+  function IconButton(
+    { "aria-label": ariaLabel, className, icon, ...buttonProps },
+    ref
+  ) {
     return (
       <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>
-        <Icon name={icon} />
+        <Icon aria-label={ariaLabel} name={icon} />
       </Button>
     );
   }

vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx

@@ -29,8 +29,6 @@ export const DefaultCalendar = () => {
       setDate(d);
     };
 
-  console.log({ date });
-
   useEffect(() => {
     const el = ref.current?.querySelector(
       ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)"

vuu-ui/showcase/src/examples/UiControls/DatePopup.examples.tsx

@@ -40,3 +40,28 @@ export const DefaultDatePopup = () => {
   );
 };
 DefaultDatePopup.displaySequence = displaySequence++;
+
+export const EmbeddedDatePopup = () => {
+  const [date, setDate] = useState<DateValue>(new CalendarDate(2024, 2, 8));
+
+  const onChange: DatePopupProps["onChange"] = (dt) => {
+    console.log(`handleSelectedDateChange date = ${date.toString()}`);
+    setDate(dt);
+  };
+
+  const handlePopupClose = useCallback<DropdownCloseHandler>((reason) => {
+    console.log(`handlePopupClose ${reason}`);
+  }, []);
+
+  return (
+    <DatePopup
+      data-embedded
+      data-showcase-center
+      selectedDate={date}
+      onChange={onChange}
+      onPopupClose={handlePopupClose}
+      selectionVariant="default"
+    />
+  );
+};
+EmbeddedDatePopup.displaySequence = displaySequence++;