GBC 5.01.03 new features and upgrade notes

A summary of new features and changes in functionality introduced with Genero Browser Client (GBC) 5.01.03. Note the changes you may need to make when moving to this version of the GBC.

Important:

This page covers only those new features introduced with the Genero Browser Client version specified in the page title. Check prior new features pages if you migrate from an earlier version.

For a detailed list of GBC 5.01.03 changes, please refer to the list of fixes on our issue tracker.

Previous new features page: GBC 5.01.02 new features and upgrade notes.

Widgets refactored to comply with BEM notation

We have refactored multiple GBC widgets to comply with the BEM structured naming convention for CSS classes.

BEM, which stands for block, element, modifier, is a methodology for naming and organizing CSS classes in a way that makes it clearer what widget each CSS class represents and how it relates to other classes.

The objective is to reduce CSS selector nesting and improve selector precision, which will ease the load on the browser's CSS engine for better performance, while also keeping the code easy to maintain. Each selector should clearly convey its purpose at a glance.

For details of the changes to the naming of widget classes, go to Widget CSS class naming pattern.

For the list of CSS classes implemented with BEM for this release, go to What is changing in CSS?. You may need to review JavaScript in your existing customizations for changes described in What is changing in JavaScript?.

What is changing in CSS?

To provide better visual feedback, the outline for the hover, focus, and activate state layers has been moved inside the widget to prevent cropped rendering. Additionally, the outline has been replaced with an inset box-shadow to avoid any issues with border width collision.

We have removed the file ChoiceDropDownWidget.scss, and moved its contents into DropDownWidget.scss file.

The ListDropDownWidget no longer uses the Checkbox template. Instead, you can now use the special template implementing the following classes:

gbc_ListDropDownWidget__item
gbc_ListDropDownWidget__itemIcon
gbc_ListDropDownWidget__itemText

The RadioGroupWidget now uses BEM notation with the following classes:

gbc_RadioGroupWidget__item
gbc_RadioGroupWidget__itemIcon
gbc_RadioGroupWidget__itemText

The ToggleCheckBoxWidget now uses BEM notation with the following classes:

gbc_ToggleCheckBoxWidget__container
gbc_ToggleCheckBoxWidget__box
gbc_ToggleCheckBoxWidget__label
gbc_ToggleCheckBoxWidget__input
gbc_ToggleCheckBoxWidget__text

What is changing in JavaScript?

We recommend that you review your existing customizations for the following changes:

A new method, WidgetBase.getBEMPartName(partName: string), has been introduced to facilitate easy DOM element querying using BEM notation for widget element initialization.
The CheckBoxWidget no longer creates and adds the text HTMLElement when calling setText(). The widget construction includes it.
The WidgetEvents constants file now contains the DropDown static variables for events.

CheckBoxWidget variable

One new CheckBoxWidget variable is available:

Table 1. CheckBox widget variables
Variable	Comment
$gbc-CheckBoxWidget-gap	Defines the space between the checkbox and the text.

For more information about CheckBoxWidget variables, go to CheckBox.

DropDown widget items variables

There are several new DropDown widget item variables available:

Table 2. DropDown widget item variables
Variable	Comment
$gbc-DropDownWidget-item-current-background-color	Background color of the current item of the Dropdown widget.
$gbc-DropDownWidget-item-current-disabled-background-color	Background color of the current item of the Dropdown widget when disabled.
$gbc-DropDownWidget-item-hover-background-color	Background color of hovered item of Dropdown widget.
$gbc-DropDownWidget-item-checked-color	Color of the selected/checked items.
$gbc-DropDownWidget-item-unchecked-color	Color of the unselected/unchecked items.
$gbc-DropDownWidget-item-checked-icon	Icon used for the ListDropDownWidget checked items when multiple choices are possible.
$gbc-DropDownWidget-item-unchecked-icon	Icon used for the ListDropDownWidget unchecked items when multiple choices are possible.
$gbc-DropDownWidget-item-selected-icon	Icon used for the ListDropDownWidget selected item when only a single choice is possible.
$gbc-DropDownWidget-item-icon-size	Icon size of items in Dropdown widget.

For more information about DropDown widget item variables, go to DropDown items.

DropDown widget default values changing

There are slight changes to default values for the DropDown widget margin variable:

Table 3. Value changed variables
Variable	Comment
$gbc-DropDownWidget-margin	using `$theme-combobox-margin`* `$gbc-DropDownWidget-margin-ratio` rather than `$theme-combobox-margin`

For more information about DropDown widget variables, go to Dropdown.

DropDown widget variables removed

Three DropDown widget variables are removed.

Table 4. DropDown widget variables removed
Variable	Comment
`$gbc-DropDownWidget-item-current-background-color`	Variable removed
`$gbc-DropDownWidget-item-current-disabled-background-color`	Variable removed
`$gbc-DropDownWidget-item-hover-background-color`	Variable removed

DropDown widget state layer variable removed

One DropDown widget state layer variable is removed.

Table 5. DropDown widget state layer variable removed
Variable	Comment
`$gbc-DropDownWidget-hover-border-width`	Variable removed

DropDown widget state layer default values changing

There are new default values for DropDown widget state layer variables:

Table 6. Value changed variables
Variable	Comment
$gbc-DropDownWidget-hover-color	using `$theme-focus-border-width` rather than `$gbc-mt-field-focus-border-width`
$gbc-DropDownWidget-focus-border-width	using `$theme-active-border-width` rather than `$gbc-mt-field-active-border-width`

RadioGroup widget variables

There are new RadioGroup widget *padding variables available:

Table 7. RadioGroup widget variables
Variable	Comment
$gbc-RadioGroupWidget-padding	Space between radio group items.
$gbc-RadioGroupWidget-item-padding	Space between radio group items.

For more information about RadioGroup widget variables, go to Radio group.

mt-field state layer default values changing

There are new default values for mt-field state layer *border-width variables:

Table 8. Value changed variables
Variable	Comment
Theme state layer	using `$theme-hover-border-width`- `$mt-field-border-width-top` rather than `$theme-hover-border-width`
Theme state layer	using `$theme-focus-border-width`- `$mt-field-border-width-top` rather than `$theme-focus-border-width`
Theme state layer	using `$theme-focus-border-width`- `$mt-field-border-width-top` rather than `$theme-focus-border-width`

SliderWidget variable

One new SliderWidget variable is available:

Table 9. Slider widget variables
Variable	Comment
$gbc-SliderWidget-border-radius	Border radius of the Slider Widget

For more information about SliderWidget variables, go to Slider.

Slider widget default values changing

There are slight changes to default values for Slider widget padding variables:

Table 10. Value changed variables
Variable	Comment
$gbc-sliderWidget-horizontal-padding	using `$theme-space-s`* `$theme-field-height-ratio` rather than `$theme-space-xs`* `$theme-field-height-ratio`
$gbc-sliderWidget-vertical-padding	using `$theme-space-xs`* `$theme-field-height-ratio` rather than `$theme-space-xxs`*`$theme-field-height-ratio`

For more information about Slider widget variables, go to Slider.

Application host variables

Two new Application host variables are available:

Table 11. Application host widget variables
Variable	Comment
$gbc-ApplicationSettingsWidget-alertTopic-background-color	Background color of the message in ApplicationHostSettings Widget
$gbc-ApplicationSettingsWidget-message-background-color	Background color of the message in ApplicationHostSettingsWidget

For more information about Application host variables, go to Application Host.

Changes to theme color variables

The theme variables for the main color palettes have been deprecated in favor of an improved system. While theme colors were previously defined by these main color palettes, they are now being replaced with new default values for theme color variables, offering greater flexibility and consistency. For more information on these enhancements to the theme color variables, go to Main variables.