[UIK-3464][time-picker] rewrote component to ts/refactoring time picker component/added unit tests for core time picker elements #2641
Conversation
This file contains hidden or 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
## Changelog ### @semcore/notice-global #### Deprecated - Package is deprecated. <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
…ows height (#2633) ## Changelog ### @semcore/data-table #### Fixed - Non-working virtual scroll with rows with unknown height. <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [X] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
## Changelog ### @semcore/carousel #### Fixed - Enabled `overflow-hidden` for `Indicator` for `border-radius` to apply correctly. - Moved default width and height for indicators with preview to CSS for more convenient styling. - Added `aria-roledescription="carousel"` to the root element. - Added translations for `aria-roledescription` in the root element and indicators with preview. <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context Was: <img width="1096" height="456" alt="image" src="https://github.com/user-attachments/assets/810c7520-78ec-4bc6-9b5b-f6eb09aabf31" /> Now: <img width="1194" height="356" alt="image" src="https://github.com/user-attachments/assets/70f4869b-07c4-43c9-955b-7433a056e589" /> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [x] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Signed-off-by: Sheila <166654065+sheila-semrush@users.noreply.github.com> Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
## Changelog ### @semcore/add-filter #### Fixed - Missing translations ### @semcore/base-trigger #### Fixed - Missing translations ### @semcore/color-picker #### Fixed - Missing translations ### @semcore/d3-chart #### Fixed - Missing translations ### @semcore/date-picker #### Fixed - Missing translations ### @semcore/dropdown-menu #### Fixed - Missing translations ### @semcore/tag #### Fixed - Missing translations ### @semcore/wizard #### Fixed - Missing translations <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [X] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [X] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
…c into release/v16
…er component/added unit tests for core time picker elements
slizhevskyv-semrush
requested review from
Valeria-Zimnitskaya and
ilyabrower
ilyabrower
reviewed
Dec 17, 2025
| placeholder: '00', | ||
| offset: defaultPopperOffset, | ||
| offset: [-8, 4], | ||
| }); |
Contributor
There was a problem hiding this comment.
let's use raw object, as you don't need to use props
Contributor
Author
There was a problem hiding this comment.
The Hours and Minutes classes use a function approach, to grab size prop, that is why it also should follow the function pattern.
semcore/time-picker/src/component/PickerInput/PickerInput.type.ts
Outdated
Show resolved
Hide resolved
semcore/time-picker/src/component/TimePicker/time-picker.shadow.css
Outdated
Show resolved
Hide resolved
ilyabrower
reviewed
Dec 17, 2025
- Package is deprecated. <!--- Provide a general summary of your changes in the Title above --> <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
…ows height (#2633) ## Changelog ### @semcore/data-table #### Fixed - Non-working virtual scroll with rows with unknown height. <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [X] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
## Changelog ### @semcore/carousel #### Fixed - Enabled `overflow-hidden` for `Indicator` for `border-radius` to apply correctly. - Moved default width and height for indicators with preview to CSS for more convenient styling. - Added `aria-roledescription="carousel"` to the root element. - Added translations for `aria-roledescription` in the root element and indicators with preview. <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context Was: <img width="1096" height="456" alt="image" src="https://github.com/user-attachments/assets/810c7520-78ec-4bc6-9b5b-f6eb09aabf31" /> Now: <img width="1194" height="356" alt="image" src="https://github.com/user-attachments/assets/70f4869b-07c4-43c9-955b-7433a056e589" /> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [x] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality. --------- Signed-off-by: Sheila <166654065+sheila-semrush@users.noreply.github.com> Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [ ] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
## Changelog ### @semcore/add-filter #### Fixed - Missing translations ### @semcore/base-trigger #### Fixed - Missing translations ### @semcore/color-picker #### Fixed - Missing translations ### @semcore/d3-chart #### Fixed - Missing translations ### @semcore/date-picker #### Fixed - Missing translations ### @semcore/dropdown-menu #### Fixed - Missing translations ### @semcore/tag #### Fixed - Missing translations ### @semcore/wizard #### Fixed - Missing translations <!--- Provide a general summary of your changes in the Title above --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How has this been tested? <!--- Please describe in detail how you tested your changes. --> <!--- For example: --> <!--- I have added unit tests --> <!--- I have added Voice Over tests --> <!--- Code cannot be tested automatically so I have tested it only manually --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [X] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [X] Nice improve. ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have updated the documentation accordingly. - [ ] I have added new tests on added of fixed functionality.
ilyabrower
force-pushed
the
release/v16
branch
from
63e05f4 to
199b49f
Compare
…picker-on-change-api
ilyabrower
force-pushed
the
release/v16
branch
2 times, most recently
from
5ddc4cb to
9deaf08
Compare
…nit tests for them/refactored time picker
…picker-on-change-api
| it('should work with arrays', () => { | ||
| const callback = vi.fn(); | ||
|
|
||
| // TODO: 111 |
Contributor
Author
There was a problem hiding this comment.
just not to forget about it
ilyabrower
reviewed
Dec 24, 2025
| expect(capturedThis.name).toBe('TestInstance'); | ||
| }); | ||
|
|
||
| it('should handle string primitive', () => { |
Contributor
There was a problem hiding this comment.
this is redundant, I think
| expect(instance.text).toBe('updated'); | ||
| }); | ||
|
|
||
| it('should handle boolean primitive', () => { |
| expect(instance.isActive).toBe(true); | ||
| }); | ||
|
|
||
| it('should handle null primitive', () => { |
| expect(callback).toHaveBeenCalledWith('value', 42); | ||
| }); | ||
|
|
||
| it('should handle undefined primitive', () => { |
| expect(callback).toHaveBeenCalledWith('value', 'defined'); | ||
| }); | ||
|
|
||
| it('should call callback multiple times on multiple changes', () => { |
Contributor
There was a problem hiding this comment.
I'm not sure, that this is good... maybe we should collect the changes and call it one times...
Contributor
Author
There was a problem hiding this comment.
kinda agree for some cases :)
I would leave it as it is to have a chance to process intermediate changes, if you don't mind :)
| setTimeout(() => { | ||
| const { meridiem, getI18nText } = this.asProps; | ||
| this.setState({ changedFormatNotice: getI18nText('changedFormatNotice', { meridiem }) }); | ||
| this.setState({ changedFormatNotice: getI18nText?.('changedFormatNotice', { meridiem }) }); |
Contributor
There was a problem hiding this comment.
so, you don't need ? here and on the 50th line
Contributor
Author
There was a problem hiding this comment.
will fix it :) Thanks!
| class TimePickerEntity { | ||
| private _hours: string = ''; | ||
| private _minutes: string = ''; | ||
| private _options: { is12Hour?: boolean }; |
Contributor
There was a problem hiding this comment.
let's store it as property is12Hour, not options object
Contributor
Author
There was a problem hiding this comment.
yeap, thanks!
|
|
||
| constructor( | ||
| value: string = ':', // should be in the format 'HH:mm' | ||
| options: { is12Hour?: boolean }, |
Contributor
There was a problem hiding this comment.
what do you think about add here default meridiem too?
| } | ||
|
|
||
| set options(newOptions) { | ||
| this._options = newOptions; |
Contributor
There was a problem hiding this comment.
not sure we need this setter...
Contributor
Author
There was a problem hiding this comment.
yeap, thanks!
| } | ||
|
|
||
| set meridiem(newMeridiem) { | ||
| this._meridiem = newMeridiem; |
Contributor
There was a problem hiding this comment.
not sure we need this setter...
Contributor
Author
There was a problem hiding this comment.
It's needed to watch the meridiem property change rather than _meridiem in reactive decorator call.
…t tests for it/small PR fix
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.
Changelog
@semcore/time-picker
Changed
Break
onChangeformat toHH:mmMotivation and Context
The
onChangeoutput format has been updated toHH:mm.The component has been migrated back to TypeScript.
The core business logic was extracted into a dedicated entity layer and is now fully covered by unit tests.
How has this been tested?
I've added unit tests.
Screenshots (if appropriate):
Types of changes
Checklist: