From be7b71d4f4f103399c7584004c11789bb7e166bf Mon Sep 17 00:00:00 2001 From: heswell Date: Fri, 15 Mar 2024 12:23:20 +0000 Subject: [PATCH] styling for date components --- .../vuu-theme/css/components/button.css | 21 ++++++++++ .../vuu-theme/css/components/components.css | 1 + .../vuu-theme/css/components/date-input.css | 5 +++ .../css/components/toggle-button.css | 1 + .../src/calendar/internal/CalendarMonth.tsx | 2 +- .../calendar/internal/CalendarNavigation.tsx | 38 +++++++------------ .../src/date-input/DateInput.css | 3 +- .../src/date-input/DateInput.tsx | 3 +- .../src/date-popup/DatePopup.tsx | 3 ++ .../vuu-ui-controls/src/icon-button/Icon.tsx | 1 + .../src/icon-button/IconButton.tsx | 7 +++- .../examples/UiControls/Calendar.examples.tsx | 2 - .../UiControls/DatePopup.examples.tsx | 25 ++++++++++++ 13 files changed, 81 insertions(+), 31 deletions(-) create mode 100644 vuu-ui/packages/vuu-theme/css/components/date-input.css diff --git a/vuu-ui/packages/vuu-theme/css/components/button.css b/vuu-ui/packages/vuu-theme/css/components/button.css index 323b49bbf..6caee960f 100644 --- a/vuu-ui/packages/vuu-theme/css/components/button.css +++ b/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 @@ } } + + + diff --git a/vuu-ui/packages/vuu-theme/css/components/components.css b/vuu-ui/packages/vuu-theme/css/components/components.css index f8d3aa348..27464363f 100644 --- a/vuu-ui/packages/vuu-theme/css/components/components.css +++ b/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); diff --git a/vuu-ui/packages/vuu-theme/css/components/date-input.css b/vuu-ui/packages/vuu-theme/css/components/date-input.css new file mode 100644 index 000000000..0b9978d53 --- /dev/null +++ b/vuu-ui/packages/vuu-theme/css/components/date-input.css @@ -0,0 +1,5 @@ +.vuu-theme { + .vuuDateInput { + border-radius: 6px; + } +} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-theme/css/components/toggle-button.css b/vuu-ui/packages/vuu-theme/css/components/toggle-button.css index d0ab3800c..fd74d3590 100644 --- a/vuu-ui/packages/vuu-theme/css/components/toggle-button.css +++ b/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); diff --git a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarMonth.tsx b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarMonth.tsx index f6e2799aa..d3ac851de 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarMonth.tsx +++ b/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; diff --git a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx index ff5613d55..19500590a 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx +++ b/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" > - + /> source={months} @@ -265,19 +257,17 @@ export const CalendarNavigation = forwardRef< disabled={canNavigateNext} content="Future dates are out of range" > - + /> ); diff --git a/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.css b/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.css index 90172bfbe..1d5705a6b 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.css +++ b/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 { diff --git a/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.tsx b/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.tsx index e6b3137aa..f64b9b893 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/date-input/DateInput.tsx @@ -55,7 +55,7 @@ export const DateInput = ({ return (
, Omit, "onChange" | "onKeyDown"> { + "data-embedded"?: boolean; selectedDate?: DateValue; onPopupClose?: DropdownCloseHandler; onPopupOpen?: () => void; @@ -33,6 +34,7 @@ export const DatePopup = forwardRef( onPopupClose, onPopupOpen, selectionVariant, + "data-embedded": dataEmbedded, ...htmlAttributes }, forwardedRef @@ -63,6 +65,7 @@ export const DatePopup = forwardRef( onOpenChange={handleOpenChange} > ); diff --git a/vuu-ui/packages/vuu-ui-controls/src/icon-button/IconButton.tsx b/vuu-ui/packages/vuu-ui-controls/src/icon-button/IconButton.tsx index 8216b9fba..eba1b435c 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/icon-button/IconButton.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/icon-button/IconButton.tsx @@ -12,10 +12,13 @@ export interface IconButtonProps extends Omit { } export const IconButton = forwardRef( - function IconButton({ className, icon, ...buttonProps }, ref) { + function IconButton( + { "aria-label": ariaLabel, className, icon, ...buttonProps }, + ref + ) { return ( ); } diff --git a/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx index ea143b701..9d8ea51a0 100644 --- a/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx +++ b/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)" diff --git a/vuu-ui/showcase/src/examples/UiControls/DatePopup.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/DatePopup.examples.tsx index 231d7830e..baa438fff 100644 --- a/vuu-ui/showcase/src/examples/UiControls/DatePopup.examples.tsx +++ b/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(new CalendarDate(2024, 2, 8)); + + const onChange: DatePopupProps["onChange"] = (dt) => { + console.log(`handleSelectedDateChange date = ${date.toString()}`); + setDate(dt); + }; + + const handlePopupClose = useCallback((reason) => { + console.log(`handlePopupClose ${reason}`); + }, []); + + return ( + + ); +}; +EmbeddedDatePopup.displaySequence = displaySequence++;