feat(sbb-time-input): add size 's' #3018
Merged
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
github-actions
bot
added
the
pr: peer review required
|
@TomMenga for the size s, it would be 51px and from medium 58px. So we have a little problem here :D |
Not the best looking but something like this works. Ps. can I ask you where did you get the value? |
|
@TomMenga From Figma by clicking on the input: Maybe it's more clean, if we create a separate var for it and then only do the assignment in the block you showed? Would align a little bit more into the current solution |
Don't know how I missed it... I blame the holidays 😐 |
TomMenga
assigned dauriamarco and DavideMininni-Fincons and unassigned dauriamarco and DavideMininni-Fincons
DavideMininni-Fincons
approved these changes
Aug 23, 2024
github-actions
bot
removed
the
pr: peer review required
github-actions
bot
added
the
pr: peer review approved
jeripeierSBB
requested changes
Aug 26, 2024
jeripeierSBB
added
the
pr: ux review required
github-actions
bot
added
the
pr: lead review approved
|
LGTM. Thanks! |
mcilurzo
added
pr: ux review approved
This was referenced Nov 4, 2024
kyubisation
pushed a commit
that referenced
this pull request
Dec 11, 2024
🤖 I have created a release *beep* *boop* --- ## [2.0.0](v1.14.0...v2.0.0) (2024-12-11) ### ⚠ BREAKING CHANGES * react is now a peer dependency of our react package. * **sbb-image:** Removed `caption`, `copyright`, `copyrightHolder` attributes; We removed the caption and the copyright from the component to improve the usage flexibility of the `sbb-image`. The consumer is now responsible for providing them (see the `sbb-image` readme to know more). * **sbb-image:** Removed `borderRadius`, `aspectRatio` attributes. Use the utility classes instead (see the `sbb-image` readme to know more). Removed the `--sbb-image-border-radius` CSS var from the `sbb-image`. Alternatively, use the `border-radius` CSS property. * **sbb-teaser-hero:** Removed `image-src`, `image-alt` attributes. Removed `chip` slot. Consumers can slot an `sbb-image` and add overlay elements on top of it (see the `sbb-teaser-hero` readme to know more). * `willOpen`, `didOpen`, `willClose`, `didClose`, `willStick`, `didStick`, `willUnstick` and `didUnstick` events no longer bubble. * **sbb-alert:** The link properties (`linkContent`, `href`, `target`, `rel`, `accessibilityLabel`) of the `sbb-alert` have been removed. Consumers have to slot a `<sbb-link>` into the unnamed content slot. * **sbb-loading-indicator:** The `sbb-loading-indicator` component no longer supports the `circle` variant, to achieve this look use `sbb-loading-indicator-circle` instead. For any other case where it is used in its `window` variant just remove the `variant` property as it is no longer needed. * **sbb-tertiary-button:** `sbb-tertiary-button` was renamed to `sbb-accent-button` * **sbb-header:** removed the `logo` slot and the default `sbb-logo` from the `sbb-header`. Alternatively, add the `sbb-header-logo` CSS class to the logo or to an `<a>`-element containing the logo and use the default slot. To align the logo to the right, use a spacer element with the `sbb-header-spacer` CSS class applied. For more information, see `sbb-header` docs. * remove deprecated `didChange` events from `sbb-checkbox`, `sbb-checkbox-panel`, `sbb-toggle-check`, `sbb-select`, `sbb-toggle` and `sbb-datepicker`. Use `change` event as alternative. * **sbb-mini-button:** the `SbbMiniButtonBaseElement` is used only in the `sbb-mini-button-component`, so it can be safely removed to avoid redundant code. * **sbb-datepicker:** This refactoring introduces multiple breaking changes to the datepicker: - DateAdapter: return value for invalid dates changed from undefined to null - Datepicker: removed functions `getAvailableDate()` and `isDateAvailable()` - Datepicker: moved functions `findPreviousAvailableDate()` and `findNextAvailableDate()` into `SbbDatepickerElement` and removed all params but `date` - Datepicker: removed properties `dateParser` and `format`, as alternative use custom DateAdapter - Datepicker: `now` property newly accepts `null` instead of `undefined` - Datepicker: removed methods `getValueAsDate()` and `setValueAsDate()`. Use getter/setter `valueAsDate` instead. * **sbb-dialog, sbb-link:** Removed the `word-break: break-word;` CSS rule from lyne components. They will follow the default [break rules](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break). Impacted components are: `sbb-dialog-content`, `sbb-link` and variants; * **sbb-file-selector:** The `sbb-file-selector` has been split into two components based on the values of the `variant` property. The `files` property has now `Readonly<File>[]` type instead than `File[]` to not allow the direct modification of the inner `File` properties. Changes: - the `variant` property has been removed from the `sbb-file-selector` component; - the `sbb-file-selector` now corresponds to the old `default` variant; - a new component named `sbb-file-selector-dropzone` has been created; it corresponds to the old `dropzone` variant; - the 'titleContent' property has been removed from the `sbb-file-selector` (since it refers only to dropzone case); - the `files` property now returns a `Readonly<File>[]`; - the deprecated `getFiles()` method has been removed. * **sbb-time-input:** `getValueAsDate()` and `setValueAsDate()` methods of the `sbb-time-input` have been replaced by getter/setter `valueAsDate`. * **sbb-alert, sbb-alert-group:** The deprecated `dismissalRequested` event and `requestDismissal()` method of `sbb-alert` have been removed. The `sbb-alert` handles its closing and DOM removal on his own. If the closing should be prevented, the `willClose` event can be canceled. The `didDismissAlert` of the `sbb-alert-group` has been removed. As alternative, consumers can listen to the `didClose` event of an `sbb-alert`. * **sbb-form-field:** The `getInputElement()` method of the `sbb-form-field` has been removed. Use `inputElement` property as alternative. * **sbb-option,sbb-autocomplete-grid-option:** `active` property from `sbb-option` and `sbb-autocomplete-grid-option` has been removed * Several deprecated core functionality has been removed. - dom.js `getDocumentWritingMode()` removed - dom.js `getLocalName()` removed - eventing.js `formElementHandlerAspect()` removed - eventing.js `HandlerRepository`, `HandlerAspectParams` and `HandlerAspect` removed - mixins.js `SbbFocusableDisabledActionMixin` removed - observers.js completely removed (containing `NodeIntersectionObserver`, `AgnosticIntersectionObserver`, `NodeMutationObserver`, `AgnosticMutationObserver`, `NodeResizeObserver` and `AgnosticResizeObserver`) * **sbb-train-formation:** The `hide-wagen-label` property of the `sbb-train-formation` was removed. Now it automatically doesn't show the label if no label is set on all the wagons. The i18n `i18nClosedCompartmentLabel()` method doesn't take `wagonNumber` as an argument anymore but is a constant now. Additionally, there are some visual changes: - `sbb-train-wagon`: The `ouccpancy` property doesn't default to `none` anymore but to `null`. Please replace the currently undefined occupancy property with the value `none`. - `sbb-train-wagon`: Previously for the locomotive the label was not displayed, but now it would, as soon as there is one provided - `sbb-train-formation`: The inline padding (left / right) was removed but can be set by CSS variable. See documentation. * **sbb-radio-button, sbb-radio-button-panel:** Removed `SbbRadioButtonGroupEventDetail` from the `change`, `input` and `didChange` events of the `sbb-radio-button-group`. As an alternative to `event.detail.value` use `radioButtonGroup.value` * waitForEvent() method was removed in favor of using EventSpy class * **sbb-chip-label:** sbb-chip has been renamed to sbb-chip-label. * Previously the `disabledInteractive` property had to be used along with the `disabled` property. With this change, either `disabled` or `disabledInteractive` should be used. * **sbb-teaser-hero, sbb-teaser-paid:** `sbb-teaser-paid` was removed and integrated in `sbb-teaser-hero`. Replacing the component / selector should be enough, as the API remains the same. `sbb-teaser-hero` moved from `@sbb-esta/experimental` into `@sbb-esta/elements` package, therefore imports need to be adapted. ### Features * add sbb-icon-list styles ([#3038](#3038)) ([d081288](d081288)) * **datepicker:** add size s ([#3006](#3006)) ([b75c4c5](b75c4c5)) * introduce button form support ([#3170](#3170)) ([eeb7a0a](eeb7a0a)) * keep action elements focusable when disabled ([#3040](#3040)) ([a9410ba](a9410ba)) * provide lean context config ([#3233](#3233)) ([0e2a847](0e2a847)) * provide scrollbar and table styles as CSS classes ([#3285](#3285)) ([839c84e](839c84e)), closes [#3271](#3271) * **sbb-autocomplete:** introduce size s ([#3020](#3020)) ([aa55e7f](aa55e7f)) * **sbb-calendar, sbb-datepicker-toggle:** allow choosing initial calendar view ([#2990](#2990)) ([7c8a690](7c8a690)), closes [#2822](#2822) * **sbb-container:** support background-expanded for images ([#3004](#3004)) ([298b335](298b335)) * **sbb-container:** support for background image ([#2999](#2999)) ([ff68e28](ff68e28)) * **sbb-file-selector:** implement native form support ([#3085](#3085)) ([449ee6d](449ee6d)) * **sbb-file-selector:** split file-selector variants in separate components ([#3198](#3198)) ([7527030](7527030)) * **sbb-flip-card:** add flip event and isFlipped getter ([#2988](#2988)) ([b912dac](b912dac)) * **sbb-form-field:** introduce size s ([#2995](#2995)) ([9abb131](9abb131)) * **sbb-header:** introduce active state ([#3154](#3154)) ([ffdeec4](ffdeec4)) * **sbb-header:** introduce size s ([#3047](#3047)) ([cd60922](cd60922)) * **sbb-icon:** provide compatibility with sbb-angular ([#2971](#2971)) ([3c4e4b0](3c4e4b0)), closes [#2746](#2746) * **sbb-image:** support overlapping `sbb-chip-label` ([#3200](#3200)) ([a59064e](a59064e)) * **sbb-journey-summary:** provide a11y footpath property ([#3104](#3104)) ([05c6d1a](05c6d1a)) * **sbb-lead-container:** add spacing class support for notification ([#3019](#3019)) ([2f4c817](2f4c817)), closes [#2932](#2932) * **sbb-link-list-anchor:** component implementation ([#2987](#2987)) ([d81a565](d81a565)) * **sbb-map-container:** allow config of sticky offset on mobile ([#3092](#3092)) ([520d812](520d812)), closes [#3091](#3091) * **sbb-mini-button-group:** component implementation ([#2959](#2959)) ([e732593](e732593)) * **sbb-paginator:** add disabled property ([#3130](#3130)) ([d43f64c](d43f64c)) * **sbb-paginator:** add sbb-compact-paginator component variant ([#3142](#3142)) ([2f3dc21](2f3dc21)) * **sbb-paginator:** initial implementation ([#2982](#2982)) ([8306362](8306362)) * **sbb-radio-button, sbb-radio-button-panel:** implement native form support ([#3160](#3160)) ([e113c6a](e113c6a)) * **sbb-select:** implement native form support ([#3101](#3101)) ([b9156ab](b9156ab)) * **sbb-select:** introduce size s ([#3011](#3011)) ([b614923](b614923)) * **sbb-selection-expansion-panel:** introduce size s ([#3030](#3030)) ([a04b5b4](a04b5b4)) * **sbb-slider:** implement native form support ([#3071](#3071)) ([ad35f2f](ad35f2f)) * **sbb-stepper:** add size 's' ([#3026](#3026)) ([6c965c5](6c965c5)) * **sbb-sticky-bar:** introduce controllable slide in and out animation ([11884da](11884da)), closes [#3072](#3072) * **sbb-teaser-hero, sbb-teaser-paid:** merge components and move into elements package ([#2984](#2984)) ([2b3f13e](2b3f13e)) * **sbb-teaser-product:** initial implementation ([#2976](#2976)) ([79601d2](79601d2)) * **sbb-time-input:** add size 's' ([#3018](#3018)) ([375bdad](375bdad)) * **sbb-timetable-row:** provide a11y footpaths ([#3048](#3048)) ([cf9e70f](cf9e70f)) * **sbb-train-formation:** introduce new types and refactoring ([#3199](#3199)) ([8eb7ae6](8eb7ae6)) * **table:** introduce table size xs ([#3077](#3077)) ([9701f84](9701f84)) ### Bug Fixes * assign correct dependency versions for published packages ([#3102](#3102)) ([ed99ce9](ed99ce9)), closes [#3100](#3100) * cleanup deprecated core functionality ([#3219](#3219)) ([4b129c4](4b129c4)) * fix inert mechanism for overlays ([#2986](#2986)) ([92992d2](92992d2)), closes [#2969](#2969) * fix list colors ([#3126](#3126)) ([44c2810](44c2810)), closes [#3123](#3123) * fix type of form associated controls ([#3242](#3242)) ([cbf839c](cbf839c)), closes [#3238](#3238) * fix width breakpoints of SbbMediaMatcherController ([#3226](#3226)) ([f3b192c](f3b192c)) * improve handling of animation events for zero duration ([#3284](#3284)) ([6da37fc](6da37fc)) * introduce disabledInteractive property and revert focusing disabled actions in general ([#3096](#3096)) ([74b3e6f](74b3e6f)) * opening and close events no longer bubble ([#3278](#3278)) ([eabc4ca](eabc4ca)) * **option-base:** use data-active instead of active attribute ([#3055](#3055)) ([92cf0ca](92cf0ca)) * prevent using HTMLElement in SSR context ([#3107](#3107)) ([333e90e](333e90e)) * provide correct react typings ([#3269](#3269)) ([8e0be99](8e0be99)) * provide jsdom support for focus trap mechanism ([#3113](#3113)) ([57179c1](57179c1)) * remove deprecated `didChange` events where possible ([#3253](#3253)) ([da64d5d](da64d5d)) * respect disabled interactive elements in focus trap ([#3108](#3108)) ([fb0a1bb](fb0a1bb)), closes [#3109](#3109) * **sbb-alert, sbb-alert-group:** remove dismissal event and method ([#3216](#3216)) ([4acede6](4acede6)) * **sbb-autocomplete, sbb-autocomplete-grid:** avoid form submission on enter press ([#3243](#3243)) ([fe5b0a9](fe5b0a9)), closes [#3239](#3239) * **sbb-calendar:** fix disabled month selection on wide view ([#3195](#3195)) ([f7ae7ea](f7ae7ea)) * **sbb-calendar:** fix month selection on wide view ([#3192](#3192)) ([ecfd50d](ecfd50d)) * **sbb-container:** remove relative positioning for non-image case ([#3024](#3024)) ([d0d928f](d0d928f)) * **sbb-datepicker-toggle:** fix datepicker toggle empty state synchronization ([#3032](#3032)) ([cae910b](cae910b)) * **sbb-datepicker:** remove deprecated methods and properties ([#3247](#3247)) ([ad6b19f](ad6b19f)) * **sbb-dialog:** fix resizing flickering ([#3065](#3065)) ([06aa927](06aa927)), closes [#3063](#3063) * **sbb-expansion-panel-header:** fix height if disabled ([#3059](#3059)) ([64eca9f](64eca9f)) * **sbb-flip-card:** fix accessibility issues ([#3000](#3000)) ([1f107a0](1f107a0)), closes [#2983](#2983) * **sbb-flip-card:** fix animation ([#3001](#3001)) ([9885dfc](9885dfc)) * **sbb-flip-card:** fix card summary image position ([#3254](#3254)) ([38c4cc5](38c4cc5)) * **sbb-flip-card:** support disabled animation ([#2998](#2998)) ([fbb6ca6](fbb6ca6)) * **sbb-flip-card:** use type button to avoid accidental form submission ([#3002](#3002)) ([25dbd78](25dbd78)) * **sbb-form-field:** fix disabled state for borderless variant ([#2994](#2994)) ([c31cc89](c31cc89)) * **sbb-form-field:** fix textarea bottom padding ([#2997](#2997)) ([1540f46](1540f46)) * **sbb-form-field:** remove deprecated `getInputElement()` method ([#3221](#3221)) ([23d1fea](23d1fea)) * **sbb-form-field:** update floating label on programmatic changes ([#3277](#3277)) ([7b49f3f](7b49f3f)), closes [#3274](#3274) * **sbb-icon:** ensure sbb-angular compatibility ([#3081](#3081)) ([ef4b587](ef4b587)) * **sbb-image:** fix skipLqip mode ([#3131](#3131)) ([4519006](4519006)) * **sbb-image:** improve default image cdn config ([#3060](#3060)) ([546cfd8](546cfd8)) * **sbb-image:** introduce css property to configure object-fit ([#3134](#3134)) ([5a4ae41](5a4ae41)), closes [#3133](#3133) * **sbb-loading-indicator:** center component into his box ([#3144](#3144)) ([22978f6](22978f6)) * **sbb-map-container:** improve support for tablet devices ([#3214](#3214)) ([b1e75ee](b1e75ee)), closes [#3091](#3091) * **sbb-mini-button:** remove useless base class ([#3257](#3257)) ([ce8c318](ce8c318)) * **sbb-option,sbb-autocomplete-grid-option:** remove deprecated `active` property ([#3220](#3220)) ([bb62e75](bb62e75)) * **sbb-overlay:** fix padding block ([#3028](#3028)) ([6b95be6](6b95be6)) * **sbb-pearl-chain:** fix spacing of bullet points ([#3066](#3066)) ([0f10796](0f10796)), closes [#3064](#3064) * **sbb-popover:** ensure correct trigger connection after hydration ([#3016](#3016)) ([5e59b8f](5e59b8f)), closes [#3012](#3012) [#3014](#3014) * **sbb-radio-group:** avoid focusing disabled radios ([#3125](#3125)) ([e4745c4](e4745c4)) * **sbb-radio-group:** disable focus when disabling radio ([#3116](#3116)) ([6453b6b](6453b6b)) * **sbb-select:** fix display value in SSR context ([#3027](#3027)) ([f733b38](f733b38)) * **sbb-select:** improve connected label handling ([#3229](#3229)) ([0c41fb2](0c41fb2)) * **sbb-tab-group:** correctly select a new tab if it is 'active' ([#3251](#3251)) ([ed975f7](ed975f7)) * **sbb-teaser, sbb-teaser-product:** allow screen readers to navigate the content ([#3250](#3250)) ([487faa3](487faa3)) * **sbb-teaser:** allow teaser usage in flexible layouts ([#3140](#3140)) ([a51507b](a51507b)), closes [#3136](#3136) * **sbb-teaser:** css variable typo ([#3143](#3143)) ([d3e4fb3](d3e4fb3)) * **sbb-time-input:** create get/set for valueAsDate ([#2244](#2244)) ([7d39928](7d39928)) * **sbb-toggle:** avoid console error on checked option click ([#3034](#3034)) ([94fa2b6](94fa2b6)) * **sbb-toggle:** fix pill position on value change and initial rendering ([#3015](#3015)) ([bd03798](bd03798)), closes [#3013](#3013) * **step-list:** fix border radius of step list elements ([#3036](#3036)) ([cf26d07](cf26d07)) * switch to standard decorators and tighten property types ([#3121](#3121)) ([e61bca5](e61bca5)) * warn about nested action elements ([#3058](#3058)) ([5b1a823](5b1a823)) ### Documentation * fix link in the contributing guideline ([#3283](#3283)) ([16464fb](16464fb)) * fix package names ([#3282](#3282)) ([2364424](2364424)) * fix SASS link in getting started docs ([#3151](#3151)) ([692a72d](692a72d)) * **sbb-autocomplete-grid:** fix urls in readme.md ([#2979](#2979)) ([7aa916f](7aa916f)) * **sbb-card:** cleanup stories and visual tests ([#3225](#3225)) ([dd8d644](dd8d644)) * standardize todos in code ([a3d0b51](a3d0b51)) * **teaser-product:** fixed broken link in documentation ([#3029](#3029)) ([f7e9807](f7e9807)) ### Code Refactoring * add SbbMediaMatcherController ([#3205](#3205)) ([39fa565](39fa565)) * change react to a peer dependency ([1e806ed](1e806ed)) * fix scss mixed declarations ([#2947](#2947)) ([ca22eda](ca22eda)) * remove async modifier from willUpdate ([#3223](#3223)) ([30292e9](30292e9)) * remove dvh/dvw backwards compatibility ([#3228](#3228)) ([ef10abb](ef10abb)) * remove font-smoothing ([#3052](#3052)) ([489ef28](489ef28)) * remove obsolete `getLocalName()` ([#3110](#3110)) ([f349463](f349463)) * remove obsolete index.ts files ([#3147](#3147)) ([837106d](837106d)) * replace [rtl] and [ltr] selectors with :dir ([#3084](#3084)) ([164e3bc](164e3bc)) * **sbb-alert:** remove sbb-link from shadow DOM ([#3270](#3270)) ([8197bf1](8197bf1)) * **sbb-chip-label:** rename chip to chip-label ([#3188](#3188)) ([4b2123d](4b2123d)) * **sbb-header:** removed 'logo' slot ([#3230](#3230)) ([0f0066d](0f0066d)) * **sbb-image:** add utility classes for border-radius and aspect-ratio ([#3200](#3200)) ([a59064e](a59064e)) * **sbb-image:** extract caption and copyright from the component ([#3200](#3200)) ([a59064e](a59064e)) * **sbb-loading-indicator:** split variants into two components and add missing sizes ([#3211](#3211)) ([d450f49](d450f49)) * **sbb-teaser-hero:** adapt to the new `sbb-image` usage ([#3200](#3200)) ([a59064e](a59064e)) * **sbb-teaser, sbb-teaser-product, sbb-teaser-product-static:** adapt to the new `sbb-image` usage ([#3200](#3200)) ([a59064e](a59064e)) * **sbb-tertiary-button:** rename tertiary to accent button ([#3260](#3260)) ([449b04d](449b04d)) * use --sbb-hover-image-brightness token for images ([#3045](#3045)) ([75b44c2](75b44c2)) * use inert attribute instead of property hack ([#3099](#3099)) ([fdd2862](fdd2862)) * use lit observers ([#3074](#3074)) ([3e554eb](3e554eb)) ### Styles * **sbb-dialog, sbb-link:** removed `break-word` css rule ([#3231](#3231)) ([edcdec1](edcdec1)) ### Miscellaneous Chores * release 1.7.0 ([b486bb4](b486bb4)) * release 2.0.0 ([5e6087f](5e6087f)) ### Tests * remove obsolete waitForEvent() method ([#3210](#3210)) ([dba0322](dba0322)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
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.
This PR Closes #2769
Most of the task was accomplished by the form field.
The only doubt I have is on a CSS rule in
core.scssthat sets the max-width for time inputs.The value seems arbitrary and I could not find it in Figma. Might be that we need to tune it when sizing 's'
@jeripeierSBB Perhaps you know something more?