#1074 add DatePicker & DateRangePicker components (first-cut) #1106

junaidzm13 · 2024-01-08T04:07:22Z

Summary of changes:

fork /calendar dir from salt-ds to vuu-ui-controls
make forked calendar component work with vuu
- fixes imports that were no longer valid
- adds missing salt-ds/icons package to vuu-ui-controls
- fixes linting errors
- fixes an alignment issue with the calendar
- fixes issues with css module imports -> I've reverted to importing css directly and relying on classes for the styles to take effect. Same as what we do elsewhere in VUU.
add DatePicker and DateRangePicker components

linux-foundation-easycla · 2024-01-08T04:07:26Z

The committers listed above are authorized under a signed CLA.

✅ login: junaidzm13 / name: Junaid (91d16fe, aee656a, cb17225)

netlify · 2024-01-08T04:07:27Z

✅ Deploy Preview for papaya-valkyrie-395400 canceled.

Name	Link
🔨 Latest commit	`cb17225`
🔍 Latest deploy log	https://app.netlify.com/sites/papaya-valkyrie-395400/deploys/659e41b569ed0a000875ff54

junaidzm13 · 2024-01-08T11:58:12Z

How the components look:

Next plan is to

integrate it with filters for date/time filtering
add more props to DateTimePicker i.e. maxDate, minDate, isDayUnselectable (Calendar already supports these), disabled and readonly. Though we need to discuss how best to handle incorrect typed user inputs if we want to support these props that does not permit certain dates.

vuu-ui/packages/vuu-ui-controls/src/date-picker/DatePicker.css

Squashed commits from salt-ds: Initial Commit [WIP] Characteristics design tokens (#salt-ds4) Css design tokens (#salt-ds8) include 'color' in color foundation token (#salt-ds13) Miscellaneous css fixes update package names to reflect temporary name (#salt-ds53) Characteristic/Foundations story docs and design updates (#salt-ds35) Refactor layer components (#salt-ds48) Apply CharPalette (#salt-ds46) characteristics updates (#salt-ds118) Move Tooltip, Portal and Window to core (#salt-ds198) Move FormField and FormFieldContext to Core (#salt-ds204) List refactor, Dropdown refactor, ComboBox refactor, Tabs refactor, Toolbar refactor, Tree component (#salt-ds10) Migrate from dayjs to @internationalized/date, change initial Calendar props and fix React18 focus bugs (#salt-ds320) Update Calendar stories, unselectable states, year traversal logic and add tooltips to the next and previous buttons (#salt-ds70) Characteristics: text font size token updates (#salt-ds323) Remove component name classes when tokens are density dependent (#salt-ds376) Move layer and deck layout components to core (#salt-ds391) Rename props and types in components related to StatusIcon (#salt-ds410) Rename import from src to fix TS error when using `skipLibCheck` false (#salt-ds362) Backwards compat styling standardisation 2 (#salt-ds441) Update react monorepo to v18 (major) (#salt-ds444) Remove backwards compatibility and some custom style stories (#salt-ds631) Rename caption to label variant; move help text token to editable (#salt-ds683) Characteristic changes to align with data grid (#salt-ds674) Removal of emphasis concept (#salt-ds757) Remove selectable default and primary foreground tokens (#salt-ds844) Move components we aren't publishing out of core (#salt-ds895) Rename packages (#salt-ds877) Big rename (#salt-ds916) Replace classnames with clsx (#salt-ds1031) Tooltip refactor (#salt-ds1080) Move Tooltip to core (#salt-ds1084) Update custom-property-no-foundations lint rule (#salt-ds1319) Add Style injection system (#salt-ds1697) Theme 1.0 updates (#salt-ds2571)

- fixes imports that were no longer valid - adds missing `salt-ds/icons` package to vuu-ui-controls - fixes linting errors - fixes an alignment issue with the calendar - fixes issues with css module imports -> I've reverted to importing css directly and relying on classes for the styles to take effect. Same as what we do elsewhere in VUU.

- first-cut since we still need improvements around theme and subtleties of UX (focus management, keyboard nav, close on click away) etc.

heswell · 2024-01-10T09:20:06Z

vuu-ui/packages/vuu-ui-controls/package.json

@@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@salt-ds/core": "1.13.2",
+    "@salt-ds/icons": "1.9.1",


I don't think we need to specify this as a dependency. It's already a dependency of salt core.
We never want to user these directly ourselves.
In fact, these icons are a bit of a headache, we don't really want to use Salt icons, we would rather use our own. Thats easy with the way we specify icons (in css) but not easy with salt componnets as they ship them as react components.

In our theme CSS you will finsd this

.saltIcon { display: none; }

heswell · 2024-01-10T09:25:48Z

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

+import { useCalendarContext } from "./CalendarContext";
+
+import "./CalendarNavigation.css";
+import { DateValue, isSameMonth, isSameYear } from "@internationalized/date";


interesting. I assumed there would probably be a third party library for date manipulation. I didn't know this one , but I'm sure there was good reason for choosing it. I'll have to famikliarise myself with it

heswell · 2024-01-10T09:31:10Z

vuu-ui/packages/vuu-ui-controls/src/date-picker/types.ts

+
+export interface BaseDatePickerProps<T = PickerSelectionType>
+  extends Pick<CalendarProps, "hideOutOfRangeDates" | "hideYearDropdown"> {
+  onSelectedDateChange: (selected: T) => void;


probably good to keep APIs as similar as possible across form controls, so this could be just onSelectionChange to match list, dropdown, combobox etc

junaidzm13 force-pushed the datepicker-with-calendar-fork-from-saltds branch 5 times, most recently from 9b1ba4e to 2253648 Compare January 8, 2024 04:33

junaidzm13 requested a review from heswell January 8, 2024 04:33

junaidzm13 force-pushed the datepicker-with-calendar-fork-from-saltds branch from 2253648 to 3973e99 Compare January 8, 2024 08:08

junaidzm13 changed the title ~~#1074 add DatePicker & DateRangePicker (first-cut)~~ #1074 add DatePicker & DateRangePicker components (first-cut) Jan 8, 2024

junaidzm13 force-pushed the datepicker-with-calendar-fork-from-saltds branch 4 times, most recently from a929495 to 8f0838a Compare January 8, 2024 11:55

junaidzm13 commented Jan 8, 2024

View reviewed changes

vuu-ui/packages/vuu-ui-controls/src/date-picker/DatePicker.css Outdated Show resolved Hide resolved

junaidzm13 force-pushed the datepicker-with-calendar-fork-from-saltds branch 5 times, most recently from e9386ad to 6c1e250 Compare January 10, 2024 04:03

junaidzm13 added 2 commits January 10, 2024 12:03

junaidzm13 force-pushed the datepicker-with-calendar-fork-from-saltds branch from 6c1e250 to cbb6e3b Compare January 10, 2024 04:03

finos#1074 add DatePicker & DateRangePicker (first-cut)

cb17225

- first-cut since we still need improvements around theme and subtleties of UX (focus management, keyboard nav, close on click away) etc.

junaidzm13 force-pushed the datepicker-with-calendar-fork-from-saltds branch from cbb6e3b to cb17225 Compare January 10, 2024 07:05

heswell reviewed Jan 10, 2024

View reviewed changes

heswell approved these changes Jan 10, 2024

View reviewed changes

heswell merged commit 9e7e631 into finos:main Jan 10, 2024
8 checks passed

junaidzm13 deleted the datepicker-with-calendar-fork-from-saltds branch January 11, 2024 02:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#1074 add DatePicker & DateRangePicker components (first-cut) #1106

#1074 add DatePicker & DateRangePicker components (first-cut) #1106

junaidzm13 commented Jan 8, 2024 •

edited

Loading

linux-foundation-easycla bot commented Jan 8, 2024 •

edited

Loading

netlify bot commented Jan 8, 2024 •

edited

Loading

junaidzm13 commented Jan 8, 2024 •

edited

Loading

heswell Jan 10, 2024

heswell Jan 10, 2024

heswell Jan 10, 2024

#1074 add DatePicker & DateRangePicker components (first-cut) #1106

#1074 add DatePicker & DateRangePicker components (first-cut) #1106

Conversation

junaidzm13 commented Jan 8, 2024 • edited Loading

linux-foundation-easycla bot commented Jan 8, 2024 • edited Loading

netlify bot commented Jan 8, 2024 • edited Loading

✅ Deploy Preview for papaya-valkyrie-395400 canceled.

junaidzm13 commented Jan 8, 2024 • edited Loading

heswell Jan 10, 2024

Choose a reason for hiding this comment

heswell Jan 10, 2024

Choose a reason for hiding this comment

heswell Jan 10, 2024

Choose a reason for hiding this comment

junaidzm13 commented Jan 8, 2024 •

edited

Loading

linux-foundation-easycla bot commented Jan 8, 2024 •

edited

Loading

netlify bot commented Jan 8, 2024 •

edited

Loading

junaidzm13 commented Jan 8, 2024 •

edited

Loading