Issue #3173774 by onfire84, ayalon: Icon select widget broken with Claro (996b9b23) · Commits · project / icon_select

css/icon_select.css

+24 −0

Original line number	Diff line number	Diff line
		@@ -69,3 +69,27 @@
		.icon-select-wrapper .field-prefix {
		order: 3;
		}
		.admin-theme-claro.icon-select-wrapper .form-checkboxes .form-item {
		display: flex;
		align-items: center;
		margin: 10px 10px 10px 0;
		padding: 10px;
		border: 1px solid lightgray;
		border-radius: 4px;
		}
		.admin-theme-claro.icon-select-wrapper .form-checkboxes .form-item input {
		order: 0;
		width: 20px;
		height: 20px;
		}
		.admin-theme-claro.icon-select-wrapper .form-checkboxes .form-item .form-item__suffix {
		order: 1;
		margin-right: 10px;
		}
		.admin-theme-claro.icon-select-wrapper .form-checkboxes .form-item .form-item__suffix .icon {
		width: 20px;
		height: 20px;
		}
		.admin-theme-claro.icon-select-wrapper .form-checkboxes .form-item .form-item__prefix {
		order: 2;
		}

src/Plugin/Field/FieldWidget/IconSelectFieldWidgetDefault.php

+18 −3

Original line number	Diff line number	Diff line
		@@ -9,6 +9,8 @@ use Drupal\Core\Field\WidgetBase;
		use Drupal\Core\Form\FormStateInterface;
		use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
		use Drupal\Core\Render\Element\Checkboxes;
		use Drupal\Core\Theme\ThemeManager;
		use Drupal\Component\Utility\Html;
		use Symfony\Component\DependencyInjection\ContainerInterface;

		/**
		@@ -32,6 +34,13 @@ class IconSelectFieldWidgetDefault extends WidgetBase implements ContainerFactor
		*/
		protected $entityTypeManager;

		/**
		* The drupal theme manager.
		*
		* @var \Drupal\Core\Theme\ThemeManager
		*/
		protected $themeManager;

		/**
		* Constructs a new IconSelectFieldWidget object.
		*
		@@ -47,11 +56,14 @@ class IconSelectFieldWidgetDefault extends WidgetBase implements ContainerFactor
		* Any third party settings.
		* @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
		* The entity type manager.
		* @param \Drupal\Core\Theme\ThemeManager $theme_manager
		* The drupal theme manager.
		*/
		public function __construct($plugin_id, $plugin_definition, FieldDefinitionInterface $field_definition, array $settings, array $third_party_settings, EntityTypeManagerInterface $entity_type_manager) {
		public function __construct($plugin_id, $plugin_definition, FieldDefinitionInterface $field_definition, array $settings, array $third_party_settings, EntityTypeManagerInterface $entity_type_manager, ThemeManager $theme_manager) {
		parent::__construct($plugin_id, $plugin_definition, $field_definition, $settings, $third_party_settings);

		$this->entityTypeManager = $entity_type_manager;
		$this->themeManager = $theme_manager;
		}

		/**
		@@ -64,7 +76,8 @@ class IconSelectFieldWidgetDefault extends WidgetBase implements ContainerFactor
		$configuration['field_definition'],
		$configuration['settings'],
		$configuration['third_party_settings'],
		$container->get('entity_type.manager')
		$container->get('entity_type.manager'),
		$container->get('theme.manager')
		);
		}

		@@ -100,10 +113,12 @@ class IconSelectFieldWidgetDefault extends WidgetBase implements ContainerFactor
		'#terms' => $form['#terms'],
		];

		$theme_class = 'admin-theme-' . Html::cleanCssIdentifier($this->themeManager->getActiveTheme()->getName());

		$container = [
		'#type' => 'details',
		'#title' => $this->t('Choose an icon'),
		'#attributes' => ['class' => ['icon-select-wrapper']],
		'#attributes' => ['class' => ['icon-select-wrapper', $theme_class]],
		'target_id' => $element,
		'#open' => FALSE,
		'#attached' => [