Merge pull request #2474 from boltdesignsystem/bugfix/DS-756-Animatio…

…ns-using-wrong-selector DS-756 Fix css animation selector
boltdesignsystem · Apr 8, 2022 · e15598c · e15598c
2 parents 59f0e74 + 41e071e
commit e15598c
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 46 deletions.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/banner-test-fade-ins.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/banner-test-fade-ins.twig
@@ -8,6 +8,8 @@
       content: 'This is the banner content fade' ~ fade,
       attributes: {
         class: [
+          'a-bolt-base',
+          'a-bolt-in',
           'a-bolt' ~ fade,
           'a-bolt-cascade-fast'
         ],
@@ -18,7 +20,7 @@
 
 <script>
 
-  const fadeEl = document.querySelectorAll('[class*="a-bolt-"]');
+  const fadeEl = document.querySelectorAll('.a-bolt-base');
 
   // Repeat single specific fade on click
   function triggerThisEl({ target }) {

diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/gallery-test-fade-ins.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/gallery-test-fade-ins.twig
@@ -301,7 +301,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -313,7 +314,8 @@
         content: item_external_link,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -325,7 +327,8 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -337,7 +340,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -349,7 +353,8 @@
         content: item_pdf,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -361,7 +366,8 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -373,7 +379,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -385,7 +392,8 @@
         content: item_external_link,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -397,7 +405,7 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -409,7 +417,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -421,7 +430,8 @@
         content: item_pdf,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -433,7 +443,8 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -445,7 +456,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -457,7 +469,8 @@
         content: item_external_link,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -469,7 +482,8 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -481,7 +495,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -493,7 +508,8 @@
         content: item_external_link,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -505,7 +521,8 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -517,7 +534,8 @@
         content: item_video,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -529,7 +547,8 @@
         content: item_pdf,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]
@@ -541,7 +560,8 @@
         content: item_locked,
         attributes: {
           class: [
-
+            'a-bolt-base',
+            'a-bolt-in',
             'a-bolt-in--fade-up',
             'a-bolt-cascade-slow'
           ]

diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/icon-test-fade-ins.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/animations/icon-test-fade-ins.twig
@@ -7,6 +7,8 @@
     size: 'xlarge',
     attributes: {
       class: [
+        'a-bolt-base',
+        'a-bolt-in',
         'a-bolt-in--fade-up',
         'a-bolt-duration-short',
         'a-bolt-cascade-fast',