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: add datepicker as a fragment component #262

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

Conversation

maxxyouu
Copy link
Contributor

@maxxyouu maxxyouu commented Aug 31, 2023

for #131

Signed-off-by: Max You <[email protected]>
@netlify
Copy link

netlify bot commented Aug 31, 2023

Deploy Preview for carbon-components-builder ready!

Name Link
🔨 Latest commit 8a15d63
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-builder/deploys/66a2996b7fcb8c0008aadf32
😎 Deploy Preview https://deploy-preview-262--carbon-components-builder.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.

@maxxyouu maxxyouu marked this pull request as ready for review September 6, 2023 20:25
Copy link
Member

@zvonimirfras zvonimirfras left a comment

Choose a reason for hiding this comment

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

  • Shouldn't be able to take focus and type inside in the editor.
  • Date format doesn't seem to be reflected correctly from config.
  • Range looks broken when label is set
image
  • "Date picker range start" and "end" feel misleading
  • Exporting undefined seems pointless, also defining empty strings when they are default shouldn't be a thing in export
image
  • This is also wrong?
image
  • size in angular export is incorrectly applied
  • angular export doesn't follow the same pattern as other angular exports, when it comes to inputs
  • type "text" is not a thing in datepicker afaik
image

etc...

Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() });
}}>
<DatePickerInput
id={`${state.id} + '-start'`}
Copy link
Member

Choose a reason for hiding this comment

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

We don't need the "-start", do we?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, we need something to differentiate the start date and end date if type is selecting a date range instead of a single date

sdk/react/src/lib/fragment-components/a-date-picker.tsx Outdated Show resolved Hide resolved
sdk/react/src/lib/fragment-components/a-date-picker.tsx Outdated Show resolved Hide resolved
datePickerType={componentObj.datePickerType}
light={componentObj.light}>
<DatePickerInput
id={`${componentObj.id} + '-start'`}
Copy link
Member

Choose a reason for hiding this comment

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

Do we need -start?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, this is the date range selection

Comment on lines 189 to 193
placeholder: 'mm/dd/yyyy',
size: 'md',
datePickerType: 'simple',
dateFormat: 'm/d/Y',
rangeStartLabel: 'Start Label'
Copy link
Member

Choose a reason for hiding this comment

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

Do we need all these? 'Start Label' feels wrong

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, we need it to select a date range (eg., start and end date)

imports: ['DatePicker', 'DatePickerInput'],
code: ({ json }) => {
return `<DatePicker
${reactClassNamesFromComponentObj(json)}
Copy link
Member

Choose a reason for hiding this comment

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

Indentation for this block looks wrong...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

This is weird, in local it looks fine

imports: ['DatePicker', 'DatePickerInput'],
code: ({ json }) => {
return `<DatePicker
${reactClassNamesFromComponentObj(json)}
Copy link
Member

Choose a reason for hiding this comment

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

block indentation looks off

Copy link
Contributor Author

Choose a reason for hiding this comment

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

same thing, in local, it looks fine

image

maxxyouu and others added 3 commits January 10, 2024 16:15
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
@maxxyouu
Copy link
Contributor Author

Verified that the component features and export works.

Signed-off-by: Max You <[email protected]>
@Akshat55 Akshat55 changed the title date picker feat: add datepicker as a fragment component May 22, 2024
Copy link
Member

@zvonimirfras zvonimirfras left a comment

Choose a reason for hiding this comment

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

  • linting errors
  • indentation and ternaries

sdk/react/src/lib/components/settings-context-pane.tsx Outdated Show resolved Hide resolved
Comment on lines 98 to 110
const componentAttributes = selectedComponent;

if (!checked) {
// Deleting the attributes from the model
delete componentAttributes.rangePlaceholder;
} else {
// Restore user set range placeholder
componentAttributes.rangePlaceholder = rangePlaceholder;
}

setComponent({
...componentAttributes
});
Copy link
Member

Choose a reason for hiding this comment

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

There needs to be a better way to do what you're trying to do.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

note: spread the operator and only set the rangePlaceholder

Max You added 3 commits July 23, 2024 11:54
Signed-off-by: Max You <[email protected]>

export interface DatePickerState {
type: string;
placeholder: string;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

optional

Max You added 2 commits July 25, 2024 14:21
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: QA/Review
Development

Successfully merging this pull request may close these issues.

3 participants