fix: div isn't allowed in button elements (#1438)

Author: mfranzke

packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss

@@ -74,14 +74,15 @@
   font-size: 0.8rem;
   margin-bottom: -1px;
   padding: 0.4rem 0.5rem;
+  padding-right: 1.75rem;
   color: $pl-color-gray-55;
   background-color: transparent;
   cursor: pointer;
   font-weight: normal;
   transition: all $pl-animate-quick ease-out;
   font-family: $pl-font;
   border-color: #ddd;
-  border-width: 1px; // fix for different browser defaults 
+  border-width: 1px; // fix for different browser defaults
   border-style: solid; // fix for different browser defaults (ex. Safari)
   display: flex;
   align-items: center;
@@ -103,22 +104,14 @@
   }
 }
 
-.pl-c-pattern__toggle-icon-wrapper {
-  position: relative;
-  height: 1rem;
-  width: 1rem;
-}
-
 .pl-c-pattern__toggle-icon {
   height: 0.9rem;
   width: 0.9rem;
   display: inline-block;
   vertical-align: middle;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  transition: transform .1s linear, opacity .1s linear;
+  right: .625rem;
+  transition: opacity .1s linear;
 }
 
 .pl-c-pattern__toggle-icon--expand {
@@ -140,7 +133,7 @@
   }
 }
 
-.pl-c-pattern__extra-toggle-text ~ .pl-c-pattern__toggle-icon-wrapper {
+.pl-c-pattern__extra-toggle-text ~ svg {
   margin-left: 0.25rem;
 }
 

packages/uikit-workshop/views-twig/partials/patternSection.twig

@@ -19,18 +19,16 @@
     <button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{partial.patternPartial}}" data-patternpartial="{{ partial.patternPartial }}" title="View Pattern Info">
         <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
         <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
-        <div class="pl-c-pattern__toggle-icon-wrapper" aria-hidden="true">
-          <svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
-            <path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
-            <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
-          </svg>
-
-          <svg viewBox="0 0 20 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--collapse">
-            <path fill="currentColor" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
-            <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
-            <path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
-          </svg>
-        </div>
+        <svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
+          <path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+          <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+        </svg>
+
+        <svg viewBox="0 0 20 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--collapse">
+          <path fill="currentColor" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+          <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+          <path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
+        </svg>
       </button>
   </div><!--end pl-c-pattern__header-->
 

packages/uikit-workshop/views/partials/patternSection.mustache

@@ -18,7 +18,6 @@
 		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{ patternPartial }}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info">
 			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
 			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
-			<div class="pl-c-pattern__toggle-icon-wrapper" aria-hidden="true">
 				<svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
 					<path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
 					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
@@ -29,7 +28,6 @@
 					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
 					<path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
 				</svg>
-			</div>
 		</button>
 
 	</div><!--end pl-c-pattern__header-->
@@ -45,4 +43,4 @@
 	{{{ patternData }}}
 	</script>
 
-</div><!--end pl-c-pattern-->
+</div><!--end pl-c-pattern-->