[Draft] Introducing hasBevel to panels and cards

packages/eui/src-docs/src/views/panel/panel_color.js

@@ -13,5 +13,9 @@ export default () => (
     <EuiPanel color="transparent" hasBorder={false}>
       <p>I am a transparent box simply for padding</p>
     </EuiPanel>
+
+    <EuiPanel color="subdued" hasBevel={true}>
+      <p>I am a beveled panel</p>
+    </EuiPanel>
   </div>
 );

packages/eui/src-docs/src/views/panel/split_panel.js

@@ -65,13 +65,13 @@ export default () => (
     </EuiFlexGroup>
     <EuiSpacer />
     <EuiSplitPanel.Outer direction="row">
-      <EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner hasBevel={true}>
         <EuiText>
           <p>Left panel</p>
           <p>Has more content</p>
         </EuiText>
       </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner color="subdued">
+      <EuiSplitPanel.Inner color="subdued" hasBevel={true}>
         <EuiText>
           <p>Right panel</p>
         </EuiText>

packages/eui/src/components/card/card.styles.ts

@@ -158,19 +158,15 @@ export const euiCardStyles = (
         ${logicalCSS('margin-bottom', `-${paddingAmount}`)}
 
         /* Match border radius, minus border width */
-        ${logicalCSS(
-          'border-top-left-radius',
-          `calc(${euiTheme.border.radius.medium} - ${euiTheme.border.width.thin})`
-        )}
-        ${logicals['border-top-right-radius']}: calc(${euiTheme.border.radius
-          .medium} - ${euiTheme.border.width.thin});
+        ${logicalCSS('border-top-left-radius', `2px`)}
+        ${logicals['border-top-right-radius']}: 2px;
 
         img {
           ${logicalCSS('width', '100%')}/* 4 */
         }
       `,
       transparent: css`
-        border-radius: ${euiTheme.border.radius.medium};
+        border-radius: 2px;
       `,
     },
 

packages/eui/src/components/card/card.tsx

@@ -136,6 +136,8 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Use a border style of card instead of shadow
      */
     hasBorder?: EuiPanelProps['hasBorder'];
+    hasBevel?: EuiPanelProps['hasBevel'];
+    hasShadow?: EuiPanelProps['hasShadow'];
   };
 
 export const EuiCard: FunctionComponent<EuiCardProps> = ({

packages/eui/src/components/panel/panel.styles.ts

@@ -30,16 +30,23 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
+      ${euiShadow(euiThemeContext, 'panel')}
     `,
 
     hasBorder: css`
       border: ${euiTheme.border.thin};
     `,
 
+    hasBevel: css`
+      ${euiThemeContext.colorMode === 'LIGHT'
+        ? `border-block-end: ${euiTheme.border.thin}`
+        : `border-block-start: ${euiTheme.border.thin}`}
+    `,
+
     radius: {
       none: css``,
       m: css`
-        border-radius: ${euiTheme.border.radius.medium};
+        border-radius: 2px;
       `,
     },
 
@@ -61,7 +68,7 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
       &:hover,
       &:focus {
-        ${euiShadow(euiThemeContext, 'l')}
+        ${euiShadow(euiThemeContext, 'panel_hover')}
         transform: translateY(-2px);
         cursor: pointer;
       }

packages/eui/src/components/panel/panel.tsx

@@ -75,6 +75,7 @@ export interface _EuiPanelProps extends CommonProps {
    * Usually a lightened form of the brand colors
    */
   color?: PanelColor;
+  hasBevel?: boolean;
 }
 
 export interface _EuiPanelDivlike
@@ -102,6 +103,7 @@ export const EuiPanel: FunctionComponent<EuiPanelProps> = ({
   color = 'plain',
   hasShadow = true,
   hasBorder = false,
+  hasBevel = false,
   grow = true,
   panelRef,
   element,
@@ -110,6 +112,7 @@ export const EuiPanel: FunctionComponent<EuiPanelProps> = ({
   // Shadows are only allowed when there's a white background (plain)
   const canHaveShadow = !hasBorder && color === 'plain';
   const canHaveBorder = color === 'plain' || color === 'transparent';
+  const canHaveBevel = !hasBorder;
 
   const styles = useEuiMemoizedStyles(euiPanelStyles);
   const cssStyles = [
@@ -120,6 +123,7 @@ export const EuiPanel: FunctionComponent<EuiPanelProps> = ({
     useEuiBackgroundColorCSS()[color],
     canHaveShadow && hasShadow === true && styles.hasShadow,
     canHaveBorder && hasBorder === true && styles.hasBorder,
+    canHaveBevel && hasBevel === true && styles.hasBevel,
     rest.onClick && styles.isClickable,
   ];
 

packages/eui/src/global_styling/variables/shadow.ts

@@ -6,7 +6,15 @@
  * Side Public License, v 1.
  */
 
-export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const;
+export const EuiThemeShadowSizes = [
+  'panel',
+  'panel_hover',
+  'xs',
+  's',
+  'm',
+  'l',
+  'xl',
+] as const;
 
 export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number];
 
@@ -15,6 +23,8 @@ export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number];
  */
 export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> =
   {
+    panel: 'For panels',
+    panel_hover: 'For hovered panels',
     xs: 'Very subtle shadow used on small components.',
     s: 'Adds subtle depth, usually used in conjunction with a border.',
     m: 'Used on small sized portalled content like popovers.',

packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts

@@ -17,6 +17,36 @@ export interface EuiShadowCustomColor {
   color?: string;
 }
 
+/**
+ * euiPanelShadow
+ */
+export const euiShadowPanel = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 2px 4px ${getShadowColor(color, 0.08, colorMode)},
+  0 2px 8px ${getShadowColor(color, 0.06, colorMode)};
+`;
+};
+
+/**
+ * euiPanelHoverShadow
+ */
+export const euiShadowPanelHover = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 2px 6px ${getShadowColor(color, 0.1, colorMode)},
+  0 2px 10px ${getShadowColor(color, 0.08, colorMode)};
+`;
+};
+
 /**
  * euiSlightShadow
  */
@@ -164,6 +194,10 @@ export const euiShadow = (
   { color }: _EuiThemeShadowCustomColor = {}
 ) => {
   switch (size) {
+    case 'panel':
+      return euiShadowPanel(euiThemeContext, { color });
+    case 'panel_hover':
+      return euiShadowPanelHover(euiThemeContext, { color });
     case 'xs':
       return euiShadowXSmall(euiThemeContext, { color });
     case 's':