feat: Ensure equal spacing between prop list info

newrelic · Jun 16, 2020 · 305946d · 305946d
1 parent 96650aa
commit 305946d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 14 deletions.
diff --git a/src/components/PropList.js b/src/components/PropList.js
@@ -125,7 +125,7 @@ const PropList = ({ propTypes }) => {
               </div>
               <div>
                 {deprecation && (
-                  <div className={styles.deprecation}>
+                  <div className={cx(styles.deprecation, styles.section)}>
                     <div className={styles.deprecationDate}>
                       Due {format(new Date(deprecation.date), 'MMMM do, yyyy')}
                     </div>
@@ -137,17 +137,17 @@ const PropList = ({ propTypes }) => {
                 )}
                 {description && (
                   <Markdown
-                    className={cx(styles.details)}
+                    className={cx(styles.section)}
                     source={description}
                   />
                 )}
-                <div className={styles.propInfoContainer}>
+                <div className={styles.section}>
                   <PropTypeInfo type={type} />
                 </div>
                 {examples.map((example, idx) => (
                   <ReferenceExample
                     key={idx}
-                    className={styles.example}
+                    className={styles.section}
                     example={example}
                   />
                 ))}

diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
@@ -31,7 +31,6 @@
 .deprecation {
   padding: 0.5rem;
   background: var(--color-red-100);
-  margin-bottom: 1rem;
 }
 
 .deprecationDate {
@@ -50,10 +49,6 @@
   }
 }
 
-.details:not(:last-child):not(:empty) {
-  margin-bottom: 1rem;
-}
-
 .flagged {
   font-size: 0.75rem;
   color: var(--color-red-400);
@@ -84,10 +79,6 @@
   }
 }
 
-.propInfoContainer:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-.example:not(:last-child) {
+.section:not(:last-child) {
   margin-bottom: 2rem;
 }