Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: pure SVG icons, Moment to Tempo, Flatpickr to Vanilla-Calendar #1518

Merged
merged 61 commits into from
May 9, 2024

Conversation

ghiscoding
Copy link
Owner

No description provided.

ghiscoding and others added 30 commits April 26, 2024 18:27
* feat(styling): use regular CSS for icons instead of :before pseudo
- by using regular CSS, we can use regular font-size and even regular CSS color which was not possible with previous implementation, the technique is credited to UnoCSS project https://antfu.me/posts/icons-in-pure-css
- this is just a draft since it needs more investigation and it might actually turn out to be a breaking change because at the moment we use CSS `content` with `:before` pseudo to previously add SVG icons but with the new approach this might not be needed and might also mean that the default Font-Awesome (font) may no longer work, need investigation. - It might be a breaking change too for the users who configured different icons via content SASS vars. Unless we keep them for users but we defined them as unset.

* fix(plugin): Custom Tooltip should append className when provided
- when user adds a `className` to SlickCustomTooltip, it was overriding the default class name and by doing so, it was breaking the CSS styling because the CSS Theme still expect the default CSS class name, so we need to append to the default instead of overriding it
- also fix a few more Dark Mode styling and provide alternate colors for Tooltip demo in Dark Mode
- also add alternate colors to `text-color-primary` and `text-color-secondary` for Dark Mode
- this might mean that old UI framework like Bootstrap v4 will not work. So I'm tagging this as a breaking change for the next major
- it removes a polyfill that was used in place of SASS `math.div` that should be use for division (instead of `/` character)
* feat!: migrate from Flatpickr to Vanilla-Calendar
…ted (#1484)

* feat(styling)!: delete `checkmarkFormatter` and any Font-Awesome related
- fix some more Dark Mode issues when using both styling themes in the same project
- re-exporting is typically discouraged by the TypeScript team, so let's stop doing that and ask the user to import it directly from the ms-select external lib
* feat(common): migrate from `moment` to `moment-tiny`
- so I created yet another repo, it is very similar to `moment-mini` except that it includes both CJS and ESM builds (which actually both come from the Moment project), however `moment-mini` only includes the CJS build.
- it looks like an extra dot on the bottom right corner of the icon container was added, just using `display: block` instead of `inline-block` fixes the issue
![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/e1035dcc-bff6-4e6b-a292-06c1aa9e95a6)

- also remove duplicate ms-select styling import
- the previous code was using the `:before` pseudo and we were able to add text to the same div but that is no longer feasible with the new pure CSS icons since the div is the icon and nothing else, so the text has to be in a separate div
- also use flex to align the text and icon in the middle
* fix(styling): properly import Vanilla-Calendar CSS and only once
- we should have only 1 import and for it to be properly imported in SASS, we need to remove the file externsion when importing
- fixes invalid import and missing CSS when tested in Salesforce
…ap (#1493)

* feat(styling)!: delete "bare" Themes but keep "lite" & add to Bootstrap
- when using flex on `.slick-cell` like in Example 7, a couple of small issues came up mostly with flex alignment
- also fix some flex issues directly in ms-select lib and update it here to get fixes, also remove some now duplicate CSS
- we should use `column-gap` instead of `gap` to only change the gap horizontally but not vertically

Co-authored-by: ghiscoding <Ghislain.Beaulac@se.com>
* chore: fix some styling issues found in upstream libs
ghiscoding and others added 25 commits May 3, 2024 14:28
* feat!: migrate from Moment to Tempo
- I can finally migrate away from MomentJS, [Tempo](https://tempo.formkit.com) is simple, ESM, small and has all necessary functions to replace Moment
- the previous code was having a simple check of the final output text, however when using DOMPurify it returns a TrustedHTML object which is considered defined even though it could be empty.
- we can fix the issue via 2 changes (1. sanitize only string value, 2. check tooltip value against `toString()`
* fix(common): Select Editor should always close with Escape key
- the issue was fixed in upstream lib ms-select-vanilla
…1513)

- add reason to `onClose(reason)` feature in external repo
- Escape key should cancel any edit change (that would mostly only happen when multiple selection since single select would close after single selection
- when clicking outside the select (body click), wouldn't call a save either
- clicking a grid cell should close any opened menu, except Cell Menu.
- I created `deepCopy` before adding node-extend, I think that we no longer need the implementation of `deepCopy()`, however to avoid breaking users of the function, I'll keep it in place but simply call `extend()` behind the scene. However, there are 2 simple checks that need to be performed before calling node-extend.
- node-extend has the exact same usage as jQuery.extend(), you can see jQuery's doc for more demos
)

- when calculating picker/modal by available position, it should (wasn't) consider targeted element. For example when a calendar picker is reposition according to attached input
- exact same change was applied to Vanilla-Calendar-Picker external dep, also remove it from unused package.json
Copy link

stackblitz bot commented May 9, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

codecov bot commented May 9, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.8%. Comparing base (3e87e9b) to head (6290af0).

Additional details and impacted files
@@           Coverage Diff            @@
##           master   #1518     +/-   ##
========================================
- Coverage    99.8%   99.8%   -0.0%     
========================================
  Files         199     198      -1     
  Lines       21717   21619     -98     
  Branches     7256    6947    -309     
========================================
- Hits        21653   21555     -98     
- Misses         58      64      +6     
+ Partials        6       0      -6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ghiscoding ghiscoding merged commit 21e50db into master May 9, 2024
10 checks passed
@ghiscoding ghiscoding deleted the next branch May 9, 2024 13:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants