-
Notifications
You must be signed in to change notification settings - Fork 42
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
base: main
Are you sure you want to change the base?
Conversation
Signed-off-by: Max You <[email protected]>
✅ Deploy Preview for carbon-components-builder ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this 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
- "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
- This is also wrong?
- 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
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]>
6d1dd87
to
4157f0e
Compare
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'`} |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
datePickerType={componentObj.datePickerType} | ||
light={componentObj.light}> | ||
<DatePickerInput | ||
id={`${componentObj.id} + '-start'`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need -start
?
There was a problem hiding this comment.
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
placeholder: 'mm/dd/yyyy', | ||
size: 'md', | ||
datePickerType: 'simple', | ||
dateFormat: 'm/d/Y', | ||
rangeStartLabel: 'Start Label' |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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)} |
There was a problem hiding this comment.
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...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
imports: ['DatePicker', 'DatePickerInput'], | ||
code: ({ json }) => { | ||
return `<DatePicker | ||
${reactClassNamesFromComponentObj(json)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
block indentation looks off
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Verified that the component features and export works. |
Signed-off-by: Max You <[email protected]>
Signed-off-by: Akshat Patel <[email protected]>
Signed-off-by: Akshat Patel <[email protected]>
Signed-off-by: Akshat Patel <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Akshat Patel <[email protected]>
Signed-off-by: Akshat Patel <[email protected]>
Signed-off-by: Akshat Patel <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
There was a problem hiding this 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
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 | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
|
||
export interface DatePickerState { | ||
type: string; | ||
placeholder: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
optional
Signed-off-by: Max You <[email protected]>
Signed-off-by: Max You <[email protected]>
for #131