Issue #3214332 by kostyashupenko, ckrina, Hosisam, Gauravvvv, ameymudras,...

Issue #3214332 by kostyashupenko, ckrina, Hosisam, Gauravvvv, ameymudras, IndrajithKB, Meeni_Dhobale, athyamvidyasagar, KapilV, Sakthivel M, imalabya, Diego Sabolo, manojithape, Shyam_Bhatt, guilhermevp, divya.sejekan, Madhu kumar, Saurabh Srivastava, Satyajit1990, lauriii, vikashsoni: Preview content is broken in Claro

core/themes/claro/claro.info.yml

@@ -136,6 +136,8 @@ libraries-extend:
     - claro/ajax
   user/drupal.user:
     - claro/form.password-confirm
+  node/drupal.node.preview:
+    - claro/drupal.node.preview
   views/views.module:
     - claro/views
   media/media_embed_ckeditor_theme:

core/themes/claro/claro.libraries.yml

@@ -133,6 +133,12 @@ claro.tabledrag:
   js:
     js/tabledrag.js: {}
 
+drupal.node.preview:
+  version: VERSION
+  css:
+    theme:
+      css/components/node-preview.css: {}
+
 tour-styling:
   version: VERSION
   css:

core/themes/claro/claro.theme

@@ -1848,3 +1848,13 @@ function claro_form_user_admin_permissions_alter(&$form, FormStateInterface $for
     }
   }
 }
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function claro_form_node_preview_form_select_alter(array &$form, FormStateInterface $form_state) {
+  if (isset($form['backlink'])) {
+    $form['backlink']['#options']['attributes']['class'][] = 'action-link';
+    $form['backlink']['#options']['attributes']['class'][] = 'action-link--icon-chevron-left';
+  }
+}

core/themes/claro/css/components/action-link.css

@@ -508,3 +508,15 @@
 .action-link--icon-questionmark.action-link--danger:active::before {
   background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e");
 }
+
+.action-link--icon-chevron-left::before {
+  display: block;
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
+}
+
+@media (min-width: 30em) {
+  .action-link--icon-chevron-left::before {
+    display: inline-block;
+  }
+}

core/themes/claro/css/components/action-link.pcss.css

@@ -494,3 +494,19 @@
     }
   }
 }
+
+.action-link--icon-chevron-left {
+  &::before {
+    display: block;
+    content: "";
+    background-image: url("../../images/icons/545560/pager-prev.svg");
+  }
+}
+
+@media (min-width: 30em) {
+  .action-link--icon-chevron-left {
+    &::before {
+      display: inline-block;
+    }
+  }
+}

core/themes/claro/css/components/node-preview.css

+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+.node-preview-container {
+  position: sticky;
+  z-index: 499;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.node-preview-form-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}

core/themes/claro/css/components/node-preview.pcss.css

+.node-preview-container {
+  position: sticky;
+  z-index: 499;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.node-preview-form-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}