Issue #3292739 by Grimreaper: Avoid side effects in offcanvas dialog and on...

Issue #3292739 by Grimreaper: Avoid side effects in offcanvas dialog and on input form-text. Provide required icon.

assets/css/form/form-required.css

+/* @see core/themes/olivero/css/components/form.css */
+
+.form-label.form-required::after,
+.required-mark::after {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.3em;
+  margin-left: 0.3em;
+  content: "";
+  vertical-align: text-top;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23dc3545'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 0.5rem 0.5rem;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .form-label.form-required::after,
+  .required-mark::after {
+    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+  }
+}

assets/css/form/form-text.css

+/**
+ * Bootstrap 5 places form-text class on description but Drupal places this
+ * class on the input.
+ */
+
+/* Remove form-text styles applied on input. */
+input.form-text.form-control {
+  margin-top: 0;
+}
+input.form-text.form-control-plaintext {
+  margin-top: 0;
+  font-size: inherit;
+}

assets/css/form/off-canvas.form.css

+/**
+ * Bootstrap 5 places form-text class on description but Drupal places this
+ * class on the input.
+ *
+ * @see core/misc/dialog/off-canvas.form.css
+ */
+
+/* Remove form-text input styles applied on description. */
+#drupal-off-canvas .description.form-text {
+  max-width: none;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  line-height: normal;
+}

templates/overrides/input/input.html.twig

@@ -29,11 +29,7 @@
   {% endif %}
 
   {% block input %}
-    {#
-    Core puts a "form-text" class on input. In Bootstrap 5, this class is for
-    the description of the form element.
-    #}
-    <input{{ attributes.removeClass('form-text') }} />
+    <input{{ attributes }} />
   {% endblock %}
 
   {% if suffix %}

ui_suite_bootstrap.info.yml

@@ -24,9 +24,12 @@ regions:
 
 libraries:
   - ui_suite_bootstrap/bootstrap
-  - ui_suite_bootstrap/component_placeholder
   - ui_suite_bootstrap/accessibility
+  - ui_suite_bootstrap/component_placeholder
+  - ui_suite_bootstrap/form
 
 libraries-extend:
+  core/drupal.dialog.off_canvas:
+    - ui_suite_bootstrap/drupal.dialog.off_canvas
   core/drupal.progress:
     - ui_suite_bootstrap/drupal.progress

ui_suite_bootstrap.libraries.yml

@@ -8,19 +8,10 @@ bootstrap:
   css:
     theme:
       /libraries/bootstrap/dist/css/bootstrap.min.css: { minified: true }
+      assets/css/form/form-text.css: { }
   dependencies:
     - core/popperjs
 
-example_carousel:
-  css:
-    theme:
-      assets/css/example/carousel.css: {}
-
-component_placeholder:
-  css:
-    theme:
-      assets/css/component/placeholder.css: {}
-
 accessibility:
   js:
     assets/js/accessibility.js: { minified: true }
@@ -28,9 +19,29 @@ accessibility:
     - core/drupal
     - core/once
 
+component_placeholder:
+  css:
+    theme:
+      assets/css/component/placeholder.css: {}
+
+drupal.dialog.off_canvas:
+  css:
+    component:
+      assets/css/form/off-canvas.form.css: { }
+
 drupal.progress:
   js:
     assets/js/misc/progress.js: { minified: true }
   dependencies:
     - core/drupal
     - core/jquery
+
+example_carousel:
+  css:
+    theme:
+      assets/css/example/carousel.css: {}
+
+form:
+  css:
+    component:
+      assets/css/form/form-required.css: { }