Merge pull request #2230 from tf/content-element-full-box

Allow setting different border radius for full width elements

Author: tf

entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md

@@ -172,6 +172,7 @@ elements etc.
 | Name | Description |
 | ---- | ----------- |
 | `content_element_box_border_radius` | Display content element boxes with rounded corners. |
+| `content_element_full_box_border_radius` | Set to control rounded corners of elements with full width. Defaults to `content_element_box_border_radius`. |
 
 ### Text Block Styles
 

entry_types/scrolled/package/src/frontend/ContentElementBox.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import {useContentElementAttributes} from './useContentElementAttributes';
+import {widths} from './layouts/widths';
 
 import styles from './ContentElementBox.module.css';
 
@@ -12,14 +14,14 @@ import styles from './ContentElementBox.module.css';
  * @param {string} props.children - Content of box.
  */
 export function ContentElementBox({children}) {
-  const {position} = useContentElementAttributes();
+  const {position, width} = useContentElementAttributes();
 
   if (position === 'backdrop') {
     return children;
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={classNames(styles.wrapper, {[styles.full]: width === widths.full})}>
       {children}
     </div>
   );

entry_types/scrolled/package/src/frontend/ContentElementBox.module.css

@@ -2,3 +2,8 @@
   overflow: hidden;
   border-radius: var(--theme-content-element-box-border-radius);
 }
+
+.full {
+  border-radius: var(--theme-content-element-full-box-border-radius,
+                     var(--theme-content-element-box-border-radius));
+}

entry_types/scrolled/package/src/frontend/__stories__/appearance-stories.js

@@ -181,6 +181,24 @@ storiesOf(`Frontend/Section Appearance`, module)
       );
     }
   )
+  .add(
+    'Custom Border Radiuses expect full width',
+    () => {
+      const customBorderRadiusStyles = {
+        '--theme-cards-border-radius': '0',
+        '--theme-content-element-box-border-radius': '10px',
+        '--theme-content-element-full-box-border-radius': '0'
+      };
+
+      return (
+        <RootProviders seed={exampleSeed('cards')}>
+          <div style={customBorderRadiusStyles}>
+            <Entry />
+          </div>
+        </RootProviders>
+      );
+    }
+  )
 
 storiesOf(`Frontend/Section Appearance`, module)
   .add(