feat(skeleton): add display var, change default to block (#718)

BREAKING CHANGE: inline-block changes to block
core-ds · Jun 28, 2021 · 27aaa60 · 27aaa60
1 parent c0f7688
commit 27aaa60
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/skeleton/src/Component.stories.mdx b/packages/skeleton/src/Component.stories.mdx
@@ -26,6 +26,7 @@ import styles from './stories.module.css';
                 className={ text('className', '') }
                 dataTestId={ text('dataTestId', '') }
                 animate={ boolean('animate', true) }
+                className={styles['example-7']}
             >
                 <img
                     width={ 150 }

diff --git a/packages/skeleton/src/index.module.css b/packages/skeleton/src/index.module.css
@@ -1,6 +1,7 @@
 @import '../../vars/src/colors-indigo.css';
 
 :root {
+    --skeleton-display: block;
     --skeleton-default-color: var(--color-light-specialbg-component);
     --skeleton-border-radius: var(--border-radius-m);
     --skeleton-backdrop-filter: none;
@@ -12,7 +13,7 @@
 
 .component {
     position: relative;
-    display: inline-block;
+    display: var(--skeleton-display);
     vertical-align: middle;
     color: transparent;
     border-radius: var(--skeleton-border-radius);

diff --git a/packages/skeleton/src/stories.module.css b/packages/skeleton/src/stories.module.css
@@ -50,3 +50,8 @@
     left: 72px;
     top: 76px;
 }
+
+.example-7 {
+    width: 150px;
+    height: 150px;
+}