..F....... [ZBX-20320] fixed order of checkboxes in user role view; added vertical display to CCheckBoxList; removed CSeverityCheckBoxList

Merge in ZBX/zabbix from feature/ZBX-20320-5.5 to master

* commit 'c1db7713aa823e8881ac3ee051c59de4602ec237': (24 commits)
  ..F....... [ZBX-20320] changed user role checkbox list whole grid width to 540px
  ..F....... [ZBX-20320] changed back dashboard checkbox for user roles
  .......... [ZBX-20320] fixed Selenium tests, removed checkbox list element mentioned in the linked task DEV-1859
  ..F....... [ZBX-20320] fixed coding style
  ..F....... [ZBX-20320] changed css style checkbox-list grid-template-columns to adjust to minmax size
  ..F....... [ZBX-20320] fixed code style
  ..F....... [ZBX-20320] fixed ids format created by CCheckBoxList
  ..F....... [ZBX-20320] fixed undefined name index error in serice additional rules
  ..F....... [ZBX-20320] fixed CCheckboxList in audit log filter
  ..F....... [ZBX-20320] fixed undefined index 'name' for CSeverity runtime error
  ..F....... [ZBX-20320] fixed userrole edit page disabled checkboxes for super admin
  ..F....... [ZBX-20320] changed setVertical function paramaeter to optional in CCheckBoxList
  ..F....... [ZBX-20320] fixed undefined index errors
  ..F....... [ZBX-20320] changed checkboxlist internal constant to ZBX_STYLE_CLASS
  ..F....... [ZBX-20320] made changes according to the comments in PR
  ..F....... [ZBX-20320] moved ZBX_STYLE_CHECKBOX_LIST and ZBX_STYLE_VERTICAL constants from defines file to internal CCheckboxList constants
  ..F....... [ZBX-20320] added id to user role UI elements so that checkboxes would work after merge
  ..F....... [ZBX-20320] implemented CCheckBoxList as a grid
  ..F....... [ZBX-20320] added to CheckBoxList setUncheckedValue option; fixed user roles unchecked values
  .D........ [ZBX-20320] updated ChangeLog
  ...

24 files changed, 221 insertions, 169 deletions

diff --git a/ChangeLog.d/bugfix/ZBX-20320 b/ChangeLog.d/bugfix/ZBX-20320
new file mode 100644
index 00000000000..fba1085ac84
--- /dev/null
+++ b/ChangeLog.d/bugfix/ZBX-20320
@@ -0,0 +1 @@
+..F....... [ZBX-20320] fixed order of checkboxes in user role view; added vertical display to CCheckBoxList; removed CSeverityCheckBoxList (epulke)
diff --git a/sass/stylesheets/sass/components/_checkbox-list.scss b/sass/stylesheets/sass/components/_checkbox-list.scss
new file mode 100644
index 00000000000..48daf701afe
--- /dev/null
+++ b/sass/stylesheets/sass/components/_checkbox-list.scss
@@ -0,0 +1,16 @@
+.checkbox-list {
+	display: grid;
+	grid-column-gap: 10px;
+	grid-template-columns: repeat(var(--columns), minmax(max-content, 1fr));
+
+	&.vertical {
+		grid-template-rows: repeat(var(--rows), 1fr);
+		grid-auto-flow: column;
+	}
+
+	li {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: 24px;
+	}
+}
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 2710253f8b9..f5e6e5cfff4 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -29,6 +29,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20220722';
 @import "layout/form-grid";
 
 @import "components/buttons";
+@import "components/checkbox-list";
 @import "components/color-picker";
 @import "components/columns-wrapper";
 @import "components/dashboard/dashboard";
@@ -4786,14 +4787,6 @@ svg {
 	visibility: hidden;
 }
 
-.checkbox-list {
-	li {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		line-height: 24px;
-	}
-}
-
 .preprocessing-list {
 	$name-width: 295px;
 	$on-fail-width: 100px;
diff --git a/ui/app/partials/monitoring.host.filter.php b/ui/app/partials/monitoring.host.filter.php
index abf6c43f0bc..b98d3db60b6 100644
--- a/ui/app/partials/monitoring.host.filter.php
+++ b/ui/app/partials/monitoring.host.filter.php
@@ -116,9 +116,12 @@ $left_column = (new CFormList())
 			->setId('port_#{uniqid}')
 	)
 	->addRow(_('Severity'),
-		(new CSeverityCheckBoxList('severities'))
-			->setChecked($data['severities'])
+		(new CCheckBoxList('severities'))
 			->setUniqid('#{uniqid}')
+			->setOptions(CSeverityHelper::getSeverities())
+			->setChecked($data['severities'])
+			->setColumns(3)
+			->setVertical(true)
 	);
 
 $right_column = (new CFormList())
diff --git a/ui/app/partials/monitoring.problem.filter.php b/ui/app/partials/monitoring.problem.filter.php
index 1c9d69605ec..16e3e4daef2 100644
--- a/ui/app/partials/monitoring.problem.filter.php
+++ b/ui/app/partials/monitoring.problem.filter.php
@@ -101,9 +101,12 @@ $left_column = (new CFormList())
 			->setId('name_#{uniqid}')
 	)
 	->addRow(_('Severity'),
-		(new CSeverityCheckBoxList('severities'))
-			->setChecked($data['severities'])
+		(new CCheckBoxList('severities'))
 			->setUniqid('#{uniqid}')
+			->setOptions(CSeverityHelper::getSeverities())
+			->setChecked($data['severities'])
+			->setColumns(3)
+			->setVertical(true)
 	);
 
 $filter_age = (new CNumericBox('age', $data['age'], 3, false, false, false))
diff --git a/ui/app/partials/scheduledreport.formgrid.html.php b/ui/app/partials/scheduledreport.formgrid.html.php
index 04bb1e18606..2dd679e5c46 100644
--- a/ui/app/partials/scheduledreport.formgrid.html.php
+++ b/ui/app/partials/scheduledreport.formgrid.html.php
@@ -121,10 +121,10 @@ $form_grid
 $show_weekdays = ($data['cycle'] == ZBX_REPORT_CYCLE_WEEKLY);
 
 $weekdays = [];
-foreach ([1, 4, 6, 2, 5, 7, 3] as $day) {
+foreach (range(1, 7) as $day) {
 	$value = 1 << ($day - 1);
 	$weekdays[] = [
-		'name' => getDayOfWeekCaption($day),
+		'label' => getDayOfWeekCaption($day),
 		'value' => $value,
 		'checked' => (bool) ($value & $data['weekdays'])
 	];
@@ -139,8 +139,8 @@ $form_grid
 		(new CFormField(
 			(new CCheckBoxList('weekdays'))
 				->setOptions($weekdays)
-				->addClass(ZBX_STYLE_COLUMNS)
-				->addClass(ZBX_STYLE_COLUMNS_3)
+				->setVertical(true)
+				->setColumns(3)
 				->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
 				->setEnabled($data['allowed_edit'])
 		))
diff --git a/ui/app/views/administration.userrole.edit.php b/ui/app/views/administration.userrole.edit.php
index ad5eaf50179..66a5ce1eb61 100644
--- a/ui/app/views/administration.userrole.edit.php
+++ b/ui/app/views/administration.userrole.edit.php
@@ -104,26 +104,24 @@ foreach ($data['labels']['sections'] as $section_key => $section_label) {
 	} else {
 		$ui = [];
 		foreach ($data['labels']['rules'][$section_key] as $rule_key => $rule_label) {
-			$ui[] = new CDiv(
-				(new CCheckBox(str_replace('.', '_', $rule_key), 1))
-					->setId($rule_key)
-					->setChecked(
-						array_key_exists($rule_key, $data['rules']['ui'])
-						&& $data['rules']['ui'][$rule_key]
-					)
-					->setReadonly($data['readonly'])
-					->setLabel($rule_label)
-					->setUncheckedValue(0)
-			);
+			$ui[] = [
+				'id' => $rule_key,
+				'name' => str_replace('.', '_', $rule_key),
+				'label' => $rule_label,
+				'value' => 1,
+				'checked' => array_key_exists($rule_key, $data['rules']['ui']) && $data['rules']['ui'][$rule_key],
+				'unchecked_value' => 0
+			];
 		}
 		$form_grid->addItem([
 			new CLabel($section_label, $section_key),
 			new CFormField(
-				(new CDiv(
-					(new CDiv($ui))
-						->addClass(ZBX_STYLE_COLUMNS)
-						->addClass(ZBX_STYLE_COLUMNS_3)
-				))->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
+				(new CCheckBoxList())
+					->setWidth(ZBX_TEXTAREA_BIG_WIDTH)
+					->setOptions($ui)
+					->setVertical()
+					->setColumns(3)
+					->setEnabled(!$data['readonly'])
 			)
 		]);
 	}
diff --git a/ui/app/views/configuration.correlation.edit.php b/ui/app/views/configuration.correlation.edit.php
index 60b75563b31..0fdc1c7add4 100644
--- a/ui/app/views/configuration.correlation.edit.php
+++ b/ui/app/views/configuration.correlation.edit.php
@@ -141,22 +141,25 @@ $form_list
 			->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
 			->setMaxlength(DB::getFieldLength('hosts', 'description'))
 	)
-	->addRow(
-		_('Operations'),
-		(new CList())
-			->addItem(
-				(new CCheckBox('op_close_old'))
-					->setChecked($data['op_close_old'])
-					->setId('operation_0_type')
-					->setLabel(_('Close old events'))
-			)
-			->addItem(
-				(new CCheckBox('op_close_new'))
-					->setChecked($data['op_close_new'])
-					->setId('operation_1_type')
-					->setLabel(_('Close new event'))
-			)
-			->addClass(ZBX_STYLE_CHECKBOX_LIST)
+	->addRow(_('Operations'),
+		(new CCheckBoxList())
+			->setVertical(true)
+			->setOptions([
+				[
+					'label' => _('Close old events'),
+					'checked' => $data['op_close_old'],
+					'name' => 'op_close_old',
+					'id' => 'operation_0_type',
+					'value' => '1'
+				],
+				[
+					'label' => _('Close new event'),
+					'checked' => $data['op_close_new'],
+					'name' => 'op_close_new',
+					'id' => 'operation_1_type',
+					'value' => '1'
+				]
+			])
 	)
 	->addRow('', (new CDiv((new CLabel(_('At least one operation must be selected.')))->setAsteriskMark())))
 	->addRow(_('Enabled'),
diff --git a/ui/app/views/popup.maintenance.period.php b/ui/app/views/popup.maintenance.period.php
index 9137af9e7e4..00ed7462662 100644
--- a/ui/app/views/popup.maintenance.period.php
+++ b/ui/app/views/popup.maintenance.period.php
@@ -40,28 +40,28 @@ if (array_key_exists('timeperiodid', $data)) {
 $days_weekly = [];
 $days_monthly = [];
 
-foreach ([1, 4, 6, 2, 5, 7, 3] as $day) {
+foreach (range(1, 7) as $day) {
 	$value = 1 << ($day - 1);
 	$days_weekly[] = [
-		'name' => getDayOfWeekCaption($day),
+		'label' => getDayOfWeekCaption($day),
 		'value' => $value,
-		'checked' => ($data['timeperiod_type'] == TIMEPERIOD_TYPE_WEEKLY && (bool) ($value & $data['dayofweek']))
+		'checked' => $data['timeperiod_type'] == TIMEPERIOD_TYPE_WEEKLY && ($value & $data['dayofweek'])
 	];
 	$days_monthly[] = [
-		'name' => getDayOfWeekCaption($day),
+		'label' => getDayOfWeekCaption($day),
 		'value' => $value,
-		'checked' => ($data['timeperiod_type'] == TIMEPERIOD_TYPE_MONTHLY && (bool) ($value & $data['dayofweek']))
+		'checked' => $data['timeperiod_type'] == TIMEPERIOD_TYPE_MONTHLY && ($value & $data['dayofweek'])
 	];
 }
 
 $months = [];
 
-foreach ([1, 5, 9, 2, 6, 10, 3, 7, 11, 4, 8, 12] as $month) {
+foreach (range(1, 12) as $month) {
 	$value = 1 << ($month - 1);
 	$months[] = [
-		'name' => getMonthCaption($month),
+		'label' => getMonthCaption($month),
 		'value' => $value,
-		'checked' => ($data['timeperiod_type'] == TIMEPERIOD_TYPE_MONTHLY && (bool) ($value & $data['month']))
+		'checked' => $data['timeperiod_type'] == TIMEPERIOD_TYPE_MONTHLY && ($value & $data['month'])
 	];
 }
 
@@ -95,18 +95,18 @@ $form_list
 	)
 	->addRow((new CLabel(_('Day of week'), 'days'))->setAsteriskMark(),
 		(new CCheckBoxList('days'))
-			->addClass(ZBX_STYLE_COLUMNS)
-			->addClass(ZBX_STYLE_COLUMNS_3)
 			->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
-			->setOptions($days_weekly),
+			->setOptions($days_weekly)
+			->setVertical(true)
+			->setColumns(3),
 		'row_timeperiod_dayofweek'
 	)
 	->addRow((new CLabel(_('Month'), 'months'))->setAsteriskMark(),
 		(new CCheckBoxList('months'))
-			->addClass(ZBX_STYLE_COLUMNS)
-			->addClass(ZBX_STYLE_COLUMNS_3)
 			->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
-			->setOptions($months),
+			->setOptions($months)
+			->setVertical(true)
+			->setColumns(3),
 		'row_timeperiod_months'
 	)
 	->addRow(new CLabel(_('Date'), 'month_date_type'),
@@ -132,10 +132,10 @@ $form_list
 	)
 	->addRow('',
 		(new CCheckBoxList('monthly_days'))
-			->addClass(ZBX_STYLE_COLUMNS)
-			->addClass(ZBX_STYLE_COLUMNS_3)
 			->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
-			->setOptions($days_monthly),
+			->setOptions($days_monthly)
+			->setVertical(true)
+			->setColumns(3),
 		'row_timeperiod_week_days'
 	)
 	->addRow((new CLabel(_('Day of month'), 'day'))->setAsteriskMark(),
diff --git a/ui/app/views/reports.auditlog.list.php b/ui/app/views/reports.auditlog.list.php
index 911fd046805..89eab58bab8 100644
--- a/ui/app/views/reports.auditlog.list.php
+++ b/ui/app/views/reports.auditlog.list.php
@@ -41,7 +41,7 @@ $filter_actions_options = [];
 
 foreach ($data['actions'] as $value => $name) {
 	$filter_actions_options[] = [
-		'name' => $name,
+		'label' => $name,
 		'value' => $value,
 		'checked' => in_array($value, $data['auditlog_actions'])
 	];
@@ -49,8 +49,7 @@ foreach ($data['actions'] as $value => $name) {
 
 $filter_actions = (new CCheckBoxList('filter_actions'))
 	->setId('filter-actions')
-	->addClass(ZBX_STYLE_COLUMNS)
-	->addClass(ZBX_STYLE_COLUMNS_3)
+	->setColumns(3)
 	->setOptions($filter_actions_options);
 
 $html_page = (new CHtmlPage())
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index d59fa10f67e..a27a153d726 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -814,6 +814,18 @@ footer {
   .subfilter-disable-btn:focus, .subfilter-disable-btn:active {
     color: #e6e6e6; }
 
+.checkbox-list {
+  display: grid;
+  grid-column-gap: 10px;
+  grid-template-columns: repeat(var(--columns), minmax(max-content, 1fr)); }
+  .checkbox-list.vertical {
+    grid-template-rows: repeat(var(--rows), 1fr);
+    grid-auto-flow: column; }
+  .checkbox-list li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 24px; }
+
 .color-picker .color-picker-preview,
 .color-picker-dialogue .color-picker-preview {
   position: relative;
@@ -6278,11 +6290,6 @@ svg {
 .visibility-hidden {
   visibility: hidden; }
 
-.checkbox-list li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 24px; }
-
 .preprocessing-list {
   display: block;
   max-width: 930px;
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index 238ffee0199..0d08da5017f 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -827,6 +827,18 @@ footer {
   .subfilter-disable-btn:focus, .subfilter-disable-btn:active {
     color: #d9d9d9; }
 
+.checkbox-list {
+  display: grid;
+  grid-column-gap: 10px;
+  grid-template-columns: repeat(var(--columns), minmax(max-content, 1fr)); }
+  .checkbox-list.vertical {
+    grid-template-rows: repeat(var(--rows), 1fr);
+    grid-auto-flow: column; }
+  .checkbox-list li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 24px; }
+
 .color-picker .color-picker-preview,
 .color-picker-dialogue .color-picker-preview {
   position: relative;
@@ -6289,11 +6301,6 @@ svg {
 .visibility-hidden {
   visibility: hidden; }
 
-.checkbox-list li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 24px; }
-
 .preprocessing-list {
   display: block;
   max-width: 930px;
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index 089bb7af81a..5d83cab5211 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -814,6 +814,18 @@ footer {
   .subfilter-disable-btn:focus, .subfilter-disable-btn:active {
     color: #e6e6e6; }
 
+.checkbox-list {
+  display: grid;
+  grid-column-gap: 10px;
+  grid-template-columns: repeat(var(--columns), minmax(max-content, 1fr)); }
+  .checkbox-list.vertical {
+    grid-template-rows: repeat(var(--rows), 1fr);
+    grid-auto-flow: column; }
+  .checkbox-list li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 24px; }
+
 .color-picker .color-picker-preview,
 .color-picker-dialogue .color-picker-preview {
   position: relative;
@@ -6231,11 +6243,6 @@ svg {
 .visibility-hidden {
   visibility: hidden; }
 
-.checkbox-list li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 24px; }
-
 .preprocessing-list {
   display: block;
   max-width: 930px;
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index 09919987373..f43a5973f45 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -814,6 +814,18 @@ footer {
   .subfilter-disable-btn:focus, .subfilter-disable-btn:active {
     color: #e6e6e6; }
 
+.checkbox-list {
+  display: grid;
+  grid-column-gap: 10px;
+  grid-template-columns: repeat(var(--columns), minmax(max-content, 1fr)); }
+  .checkbox-list.vertical {
+    grid-template-rows: repeat(var(--rows), 1fr);
+    grid-auto-flow: column; }
+  .checkbox-list li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 24px; }
+
 .color-picker .color-picker-preview,
 .color-picker-dialogue .color-picker-preview {
   position: relative;
@@ -6231,11 +6243,6 @@ svg {
 .visibility-hidden {
   visibility: hidden; }
 
-.checkbox-list li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 24px; }
-
 .preprocessing-list {
   display: block;
   max-width: 930px;
diff --git a/ui/include/classes/helpers/CServiceHelper.php b/ui/include/classes/helpers/CServiceHelper.php
index a4d39239fb6..e6c287f7ea5 100644
--- a/ui/include/classes/helpers/CServiceHelper.php
+++ b/ui/include/classes/helpers/CServiceHelper.php
@@ -137,7 +137,7 @@ class CServiceHelper {
 		$status_names = [];
 
 		foreach (CSeverityHelper::getSeverities() as $severity) {
-			$status_names[$severity['value']] = $severity['name'];
+			$status_names[$severity['value']] = $severity['label'];
 		}
 
 		return $status_names;
diff --git a/ui/include/classes/helpers/CSeverityHelper.php b/ui/include/classes/helpers/CSeverityHelper.php
index dc668318fef..227fc63f9c5 100644
--- a/ui/include/classes/helpers/CSeverityHelper.php
+++ b/ui/include/classes/helpers/CSeverityHelper.php
@@ -147,7 +147,7 @@ class CSeverityHelper {
 
 		foreach (range($min, $max) as $severity) {
 			$severities[] = [
-				'name' => self::getName($severity),
+				'label' => self::getName($severity),
 				'value' => $severity,
 				'style' => self::getStyle($severity)
 			];
diff --git a/ui/include/classes/html/CCheckBoxList.php b/ui/include/classes/html/CCheckBoxList.php
index 07f848d6607..4653b5d6b5b 100644
--- a/ui/include/classes/html/CCheckBoxList.php
+++ b/ui/include/classes/html/CCheckBoxList.php
@@ -21,6 +21,10 @@
 
 class CCheckBoxList extends CList {
 
+	private const ZBX_STYLE_CLASS = 'checkbox-list';
+
+	private const ZBX_STYLE_VERTICAL = 'vertical';
+
 	/**
 	 * @var array $values
 	 */
@@ -42,14 +46,25 @@ class CCheckBoxList extends CList {
 	protected $uniqid = '';
 
 	/**
+	 * @var bool $vertical
+	 */
+	protected $vertical = false;
+
+	/**
+	 * @var int $columns
+	 */
+	protected $columns;
+
+	/**
 	 * @param string $name
 	 */
-	public function __construct($name) {
+	public function __construct($name = '') {
 		parent::__construct();
 
-		$this->addClass(ZBX_STYLE_CHECKBOX_LIST);
+		$this->addClass(self::ZBX_STYLE_CLASS);
 		$this->name = $name;
 		$this->values = [];
+		$this->columns = 1;
 	}
 
 	/**
@@ -89,7 +104,7 @@ class CCheckBoxList extends CList {
 
 		foreach ($values as $value) {
 			$this->values[] = $value + [
-				'name' => '',
+				'label' => '',
 				'value' => null,
 				'checked' => false
 			];
@@ -120,20 +135,66 @@ class CCheckBoxList extends CList {
 		return $this;
 	}
 
+	/**
+	 * Display checkboxes in vertical order.
+	 *
+	 * @param bool $vertical
+	 *
+	 * @return CCheckBoxList
+	 */
+	public function setVertical(bool $vertical = true): CCheckBoxList {
+		$this->vertical = $vertical;
+
+		return $this;
+	}
+
+	/**
+	 * Set number of columns.
+	 *
+	 * @param int $columns
+	 *
+	 * @return CCheckBoxList
+	 */
+	public function setColumns(int $columns): CCheckBoxList {
+		$this->columns = $columns;
+
+		return $this;
+	}
+
 	/*
 	 * @param bool $destroy
 	 *
 	 * @return string
 	 */
 	public function toString($destroy = true) {
-		$uniqid = ($this->uniqid === '') ? '' : '_'.$this->uniqid;
+		$this->addStyle('--columns: '.$this->columns.';');
+
+		if ($this->vertical) {
+			$values_count = count($this->values);
+			$max_rows = (int) ceil($values_count / $this->columns);
+
+			$this->addClass(self::ZBX_STYLE_VERTICAL);
+			$this->addStyle('--rows: '.$max_rows.';');
+		}
 
 		foreach ($this->values as $value) {
-			$checkbox = (new CCheckBox($this->name.'['.$value['value'].']', $value['value']))
-				->setLabel($value['name'])
+			$name = array_key_exists('name', $value) ? $value['name'] : $this->name.'['.$value['value'].']';
+
+			$checkbox = (new CCheckBox($name, $value['value']))
+				->setLabel($value['label'])
 				->setChecked($value['checked'])
 				->setEnabled($this->enabled);
-			$checkbox->setId($checkbox->getId().$uniqid);
+
+			if (array_key_exists('id', $value) || $this->uniqid !== '') {
+				$checkbox->setId(array_key_exists('id', $value)
+					? $value['id']
+					: $checkbox->getId().'_'.$this->uniqid
+				);
+			}
+
+			if (array_key_exists('unchecked_value', $value)) {
+				$checkbox->setUncheckedValue($value['unchecked_value']);
+			}
 
 			parent::addItem($checkbox);
 		}
diff --git a/ui/include/classes/html/CSeverity.php b/ui/include/classes/html/CSeverity.php
index d6d90f1248a..a93bd043861 100644
--- a/ui/include/classes/html/CSeverity.php
+++ b/ui/include/classes/html/CSeverity.php
@@ -56,7 +56,7 @@ class CSeverity extends CRadioButtonList {
 
 	public function toString($destroy = true): string {
 		foreach (CSeverityHelper::getSeverities() as $severity) {
-			$this->addValue($severity['name'], $severity['value'], $severity['style']);
+			$this->addValue($severity['label'], $severity['value'], $severity['style']);
 		}
 
 		return parent::toString($destroy);
diff --git a/ui/include/classes/html/CSeverityCheckBoxList.php b/ui/include/classes/html/CSeverityCheckBoxList.php
deleted file mode 100644
index adcc16bce6e..00000000000
--- a/ui/include/classes/html/CSeverityCheckBoxList.php
+++ /dev/null
@@ -1,64 +0,0 @@
-<?php
-/*
-** Zabbix
-** Copyright (C) 2001-2022 Zabbix SIA
-**
-** This program is free software; you can redistribute it and/or modify
-** it under the terms of the GNU General Public License as published by
-** the Free Software Foundation; either version 2 of the License, or
-** (at your option) any later version.
-**
-** This program is distributed in the hope that it will be useful,
-** but WITHOUT ANY WARRANTY; without even the implied warranty of
-** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-** GNU General Public License for more details.
-**
-** You should have received a copy of the GNU General Public License
-** along with this program; if not, write to the Free Software
-** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-**/
-
-
-class CSeverityCheckBoxList extends CCheckBoxList {
-
-	/**
-	 * Number of columns.
-	 */
-	private const COLUMNS = 3;
-
-	/**
-	 * Create check box list with severities.
-	 *
-	 * @param string $name  Field name in form.
-	 */
-	public function __construct(string $name) {
-		parent::__construct($name);
-
-		$this
-			->setOptions(self::getSeverities())
-			->addClass(ZBX_STYLE_COLUMNS)
-			->addClass(ZBX_STYLE_COLUMNS_3);
-	}
-
-	/**
-	 * Generate array with data for severities options ordered for showing by rows.
-	 *
-	 * @return array
-	 */
-	private static function getSeverities(): array {
-		$ordered = [];
-		$severities = CSeverityHelper::getSeverities();
-		$severities_count = count($severities);
-		$max_rows = (int) ceil($severities_count / self::COLUMNS);
-
-		for ($row = 0; $row < $max_rows; $row++) {
-			for ($i = 0; $i < $severities_count; $i += $max_rows) {
-				if (array_key_exists($row + $i, $severities)) {
-					$ordered[$row + $i] = $severities[$row + $i];
-				}
-			}
-		}
-
-		return $ordered;
-	}
-}
diff --git a/ui/include/classes/html/widgets/CWidgetFieldSeveritiesView.php b/ui/include/classes/html/widgets/CWidgetFieldSeveritiesView.php
index 3831e8db139..316d2629b12 100644
--- a/ui/include/classes/html/widgets/CWidgetFieldSeveritiesView.php
+++ b/ui/include/classes/html/widgets/CWidgetFieldSeveritiesView.php
@@ -27,10 +27,13 @@ class CWidgetFieldSeveritiesView extends CWidgetFieldView {
 		$this->field = $field;
 	}
 
-	public function getView(): CSeverityCheckBoxList {
-		return (new CSeverityCheckBoxList($this->field->getName()))
+	public function getView(): CCheckBoxList {
+		return (new CCheckBoxList($this->field->getName()))
+			->setOptions(CSeverityHelper::getSeverities())
 			->setChecked($this->field->getValue())
 			->setWidth(ZBX_TEXTAREA_STANDARD_WIDTH)
-			->setEnabled(!$this->isDisabled());
+			->setEnabled(!$this->isDisabled())
+			->setColumns(3)
+			->setVertical();
 	}
 }
diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php
index df6aade9e89..1583e4980db 100644
--- a/ui/include/defines.inc.php
+++ b/ui/include/defines.inc.php
@@ -1829,7 +1829,6 @@ define('ZBX_STYLE_CHECKBOX_RADIO', 'checkbox-radio');
 define('ZBX_STYLE_CLOCK', 'clock');
 define('ZBX_STYLE_SYSMAP', 'sysmap');
 define('ZBX_STYLE_NAVIGATIONTREE', 'navtree');
-define('ZBX_STYLE_CHECKBOX_LIST', 'checkbox-list');
 define('ZBX_STYLE_CLOCK_SVG', 'clock-svg');
 define('ZBX_STYLE_CLOCK_FACE', 'clock-face');
 define('ZBX_STYLE_CLOCK_HAND', 'clock-hand');
diff --git a/ui/include/views/configuration.triggers.list.php b/ui/include/views/configuration.triggers.list.php
index 911f86b8dac..6efdfad5d0b 100644
--- a/ui/include/views/configuration.triggers.list.php
+++ b/ui/include/views/configuration.triggers.list.php
@@ -71,7 +71,13 @@ $filter_column1 = (new CFormList())
 	->addRow(_('Name'),
 		(new CTextBox('filter_name', $data['filter_name']))->setWidth(ZBX_TEXTAREA_FILTER_STANDARD_WIDTH)
 	)
-	->addRow(_('Severity'),	(new CSeverityCheckBoxList('filter_priority'))->setChecked($data['filter_priority']));
+	->addRow(_('Severity'),
+		(new CCheckBoxList('filter_priority'))
+			->setOptions(CSeverityHelper::getSeverities())
+			->setChecked($data['filter_priority'])
+			->setColumns(3)
+			->setVertical(true)
+	);
 
 if ($data['context'] === 'host') {
 	$filter_column1->addRow(_('State'),
diff --git a/ui/include/views/reports.toptriggers.php b/ui/include/views/reports.toptriggers.php
index 60e8e70dcff..3be7a636a44 100644
--- a/ui/include/views/reports.toptriggers.php
+++ b/ui/include/views/reports.toptriggers.php
@@ -74,7 +74,11 @@ $filter_column = (new CFormList())
 		]))->setWidth(ZBX_TEXTAREA_FILTER_STANDARD_WIDTH)
 	)
 	->addRow(new CLabel(_('Severity')),
-		(new CSeverityCheckBoxList('severities'))->setChecked($data['filter']['severities'])
+		(new CCheckBoxList('severities'))
+			->setOptions(CSeverityHelper::getSeverities())
+			->setChecked($data['filter']['severities'])
+			->setColumns(3)
+			->setVertical(true)
 	);
 
 $filterForm
diff --git a/ui/tests/include/web/CElementQuery.php b/ui/tests/include/web/CElementQuery.php
index cd2d03babb1..767e58bfcfe 100644
--- a/ui/tests/include/web/CElementQuery.php
+++ b/ui/tests/include/web/CElementQuery.php
@@ -578,7 +578,6 @@ class CElementQuery implements IWaitable {
 				'/div/ul[contains(@class, "radio-list-control")]' // TODO: remove after fix DEV-1071.
 			],
 			'CCheckboxListElement'		=> [
-				'/div/div[@class="columns-wrapper columns-3"]', // TODO: fix after DEV-1859.
 				'/ul[contains(@class, "checkbox-list")]',
 				'/ul[contains(@class, "list-check-radio")]'
 			],