fix(calendar): 🐛 find a way to use utilities for data attributes #13
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/timelessco/renderlesskit-react-tailwind/73qcrd9tv |
navin-moorthy
commented
Dec 17, 2020
Comment on lines
+37
to
+52
| export interface RangeCalendarProps extends RangeCalendarInitialState {} | ||
|
|
||
| export const RangeCalendar: React.FC<RangeCalendarProps> = props => { | ||
| const { children } = props; | ||
| const ctx = useRangeCalendarState(props); | ||
| const context = React.useMemo(() => ctx, [ctx]); | ||
|
|
||
| return ( | ||
| <CalendarProvider value={context}> | ||
| <RenderlessCalendar {...ctx} className={theme.calendar.base}> | ||
| {children} | ||
| </RenderlessCalendar> | ||
| </CalendarProvider> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Creating a range calendar couldn't be so easier 😆
navin-moorthy
commented
Dec 17, 2020
|
|
||
| const RangeTemplate: Story = () => { | ||
| return ( | ||
| <RangeCalendar> |
There was a problem hiding this comment.
Users just need to do this, they get normal/Range
Suggested change
| <RangeCalendar> | |
| <Calendar> |
navin-moorthy
commented
Dec 17, 2020
src/calendar/stories/calendar.css
Outdated
Comment on lines
8
to
12
| /** Need to add the variant for our data variant via addVariant plugin */ | ||
| /** Need to fix the tailwind override issue with focuswith with the new variants */ | ||
| /** Tailwind override detects only the plain css doesn't support variants */ | ||
| /** Or Look into styling the calendar like the storybook example from renderless component */ | ||
| /* .calendar .calendar__cell[data-is-range-selection]:focus-within { |
There was a problem hiding this comment.
Things that needs to be solved later on when working on Calendar after design is done !
navin-moorthy
commented
Dec 17, 2020
Comment on lines
+64
to
+108
| plugin(function ({ addVariant, e }) { | ||
| addVariant("aria-selected", ({ modifySelectors, separator }) => { | ||
| modifySelectors(({ className }) => { | ||
| return `.${e( | ||
| `aria-selected${separator}${className}`, | ||
| )}[aria-selected="true"]`; | ||
| }); | ||
| }); | ||
| }), | ||
| plugin(function ({ addVariant, e }) { | ||
| addVariant("aria-disabled", ({ modifySelectors, separator }) => { | ||
| modifySelectors(({ className }) => { | ||
| return `.${e( | ||
| `aria-disabled${separator}${className}`, | ||
| )}[aria-disabled="true"]`; | ||
| }); | ||
| }); | ||
| }), | ||
| plugin(function ({ addVariant, e }) { | ||
| addVariant("is-range-selection", ({ modifySelectors, separator }) => { | ||
| modifySelectors(({ className }) => { | ||
| return `.${e( | ||
| `is-range-selection${separator}${className}`, | ||
| )}[data-is-range-selection]`; | ||
| }); | ||
| }); | ||
| }), | ||
| plugin(function ({ addVariant, e }) { | ||
| addVariant("is-range-start", ({ modifySelectors, separator }) => { | ||
| modifySelectors(({ className }) => { | ||
| return `.${e( | ||
| `is-range-start${separator}${className}`, | ||
| )}[data-is-selection-start]`; | ||
| }); | ||
| }); | ||
| }), | ||
| plugin(function ({ addVariant, e }) { | ||
| addVariant("is-range-end", ({ modifySelectors, separator }) => { | ||
| modifySelectors(({ className }) => { | ||
| return `.${e( | ||
| `is-range-end${separator}${className}`, | ||
| )}[data-is-selection-end]`; | ||
| }); | ||
| }); | ||
| }), |
There was a problem hiding this comment.
Of course, we can simplify this into a single plugin !
Left it separately for experimenting, we can simplify them at last IMO
anuraghazra
approved these changes
Dec 21, 2020
anuraghazra
added a commit
that referenced
this pull request
Dec 23, 2020
* feat: added calendar component, wip * feat: calendar extract inline classes to theme file * chore: improved colors * feat: added initial datepicker * chore: added stateless calendar * feat(calendar): ✨ add new api calendar (#6) * feat: added compound datepicker & range datepicker (#5) * feat: added compound datepicker & range datepicker * fix(datepicker): fixed & improved typescript support * chore: removed dot notation components * chore: added custom input story example * chore: datepicker export & css file added * chore(deps): move & removed deps * fix(calendar): 🐛 find a way to use utilities for data attributes (#13) * fix(calendar): 🐛 find a way to use utilities for data attributes * docs(calendar): 📝 add notes to calendar to solve later * refactor(css): ♻️ remove old css * refactor(css): ♻️ create a new css * fix(datepicker): 🐛 fix datepicker styles Co-authored-by: Navin Moorthy <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.