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

Add typescript types to fluid date picker and its skeleton state and fluid datepicker input #17385

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

riddhybansal
Copy link
Contributor

@riddhybansal riddhybansal commented Sep 7, 2024

Closes #17366
Closes #17365

Added typescript types to fluid date picker and its skeleton state and fluid datepicker input

Changelog

Changed

  • Added typescript types to fluid date picker and its skeleton state and fluid datepicker input and converted index.js to index.tsx for both the components

Testing / Reviewing

FluidDatePickerInput, FluidDatePicker and its skeleton should work as intended.

@riddhybansal
Copy link
Contributor Author

Hey there @tay1orjones @Gururajj77 there is not any props defined for FluidDatePickerInput so what should be the type for this since no interface!

Copy link

netlify bot commented Sep 7, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 5cc6c60
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/66e959345187810008e40769
😎 Deploy Preview https://deploy-preview-17385--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Sep 7, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 5cc6c60
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/66e95934f301220008e0ab4b
😎 Deploy Preview https://deploy-preview-17385--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Gururajj77
Copy link
Contributor

Hey there @tay1orjones @Gururajj77 there is not any props defined for FluidDatePickerInput so what should be the type for this since no interface!

We can convert the file to .tsx. If we have a propTypes object, then we need to write an interface for the component. Looking at the FluidDatePickerInput, we don't have any propTypes object, we don't need an interface here.

@riddhybansal riddhybansal force-pushed the add_typescript_types_to_FluidDatePicker branch from 3bb9e56 to 2952677 Compare September 11, 2024 13:22
) {
return (
<FormContext.Provider value={{ isFluid: true }}>
<DatePickerInput ref={ref} {...other} />
<DatePickerInput id={''} labelText={undefined} ref={ref} {...other} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could the id and labelText be removed here so users can still configure them?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

id and labelText are required props in DatepickerInput so need to pass something. What can we do other than this?

Copy link
Member

@tay1orjones tay1orjones Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@riddhybansal If they're required in DatePickerInput, they should be required here in FluidDatePickerInput too and passed through ...other.

If typescript isn't automatically inferring that relationship then I think we need to explicitly specify that FluidDatePickerInput inherits/extends DatePickerInputProps.

@tay1orjones
Copy link
Member

@Gururajj77 do we need to explicitly specify that FluidDatePickerInput inherits DatePickerInputProps?

Copy link

codecov bot commented Sep 16, 2024

Codecov Report

Attention: Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.

Project coverage is 76.93%. Comparing base (a1a3b8a) to head (5cc6c60).

Files with missing lines Patch % Lines
...nents/FluidDatePicker/FluidDatePicker.Skeleton.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main   #17385   +/-   ##
=======================================
  Coverage   76.92%   76.93%           
=======================================
  Files         408      408           
  Lines       13979    13980    +1     
  Branches     4339     4291   -48     
=======================================
+ Hits        10754    10755    +1     
  Misses       3052     3052           
  Partials      173      173           

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

@riddhybansal riddhybansal force-pushed the add_typescript_types_to_FluidDatePicker branch from aed133c to 0c40f27 Compare September 17, 2024 10:25
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.

Add typescript types to FluidDatePicker and its skeleton state Add typescript types to FluidDatePickerInput
3 participants