@ember-eui/core 4.4.0 → 5.0.0-alpha.4

package/addon/utils/color/eui_palettes.ts

@@ -96,7 +96,8 @@ export const euiPaletteColorBlind = ({
     // Sort the colors based on the color wheel, but shifting the values based on sortShift
     base = [...base].sort(function (a, b) {
       return (
-        chroma(a).set('hsl.h', sortShift).hsl()[0] - chroma(b).set('hsl.h', sortShift).hsl()[0]
+        chroma(a).set('hsl.h', sortShift).hsl()[0] -
+        chroma(b).set('hsl.h', sortShift).hsl()[0]
       );
     });
   }
@@ -134,9 +135,13 @@ export const euiPaletteColorBlind = ({
   return colors;
 };
 
-export const euiPaletteColorBlindBehindText = (paletteProps: EuiPaletteColorBlindProps = {}) => {
+export const euiPaletteColorBlindBehindText = (
+  paletteProps: EuiPaletteColorBlindProps = {}
+) => {
   const originalPalette = euiPaletteColorBlind(paletteProps);
-  const newPalette = originalPalette.map((color) => chroma(color).brighten(0.5).hex());
+  const newPalette = originalPalette.map((color) =>
+    chroma(color).brighten(0.5).hex()
+  );
   return newPalette;
 };
 
@@ -160,7 +165,11 @@ export const euiPaletteForStatus = function (steps: number): EuiPalette {
   }
   if (steps <= 3) {
     return euiPalette(
-      [euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightNegativeColor],
+      [
+        euiPaletteColorBlind()[0],
+        euiPaletteColorBlind()[5],
+        lightNegativeColor
+      ],
       steps,
       true
     );
@@ -196,7 +205,11 @@ export const euiPaletteComplimentary = function (steps: number): EuiPalette {
     return [euiPaletteColorBlind()[1]];
   }
 
-  return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
+  return euiPalette(
+    [euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]],
+    steps,
+    true
+  );
 };
 
 export const euiPaletteNegative = function (steps: number): EuiPalette {
@@ -236,5 +249,9 @@ export const euiPaletteGray = function (steps: number): EuiPalette {
     return ['#98a2b3'];
   }
 
-  return euiPalette(['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'], steps, false);
+  return euiPalette(
+    ['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'],
+    steps,
+    false
+  );
 };

package/addon/utils/css-mappings/eui-avatar.ts

@@ -1,6 +1,8 @@
 import { isColorDark } from '../../helpers/is-color-dark';
 import { hexToRgb } from '../../helpers/hex-to-rgb';
 import { euiPaletteColorBlindBehindText } from '../../utils/color/eui_palettes';
+import { isValidHex } from '../../helpers/is-valid-hex';
+import { assert, warn } from '@ember/debug';
 
 export const baseClass = 'euiAvatar';
 export const VIS_COLORS = euiPaletteColorBlindBehindText();
@@ -19,30 +21,70 @@ export const typeMapping = {
 
 export function inlineStyles({
   name,
-  color
+  color,
+  imageUrl,
+  initials
 }: {
   name: string;
   color: string;
   iconColor: string;
+  imageUrl?: string;
+  initials?: string;
 }): Styling {
   let assignedColor = color;
+  // let iconCustomColor = iconColor;
+  let avatarStyle: {
+    backgroundColor?: string;
+    color?: string;
+    backgroundImage?: string;
+  } = {};
+
+  checkValidInitials(initials);
 
   const isNamedColor = color === 'plain' || color === null;
 
+  if (imageUrl) {
+    avatarStyle.backgroundImage = `url(${imageUrl})`;
+  }
+
   if (!isNamedColor) {
-    if (name && !assignedColor) {
-      assignedColor = VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
-    }
+    checkValidColor(color);
+
+    assignedColor =
+      color || VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
+
     const textColor = isColorDark(...hexToRgb(assignedColor || 'base'))
       ? '#FFFFFF'
       : '#000000';
-    return {
-      'background-color': assignedColor,
-      color: textColor
-    };
+
+    avatarStyle.backgroundColor = assignedColor;
+    avatarStyle.color = textColor;
+    return avatarStyle;
   }
 
-  return {};
+  return avatarStyle;
+}
+
+export const checkValidColor = (color: string | 'plain' | null) => {
+  const validHex = (color && isValidHex(color)) || color === 'plain';
+  if (color && !validHex) {
+    assert(
+      'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value',
+      true
+    );
+  }
+};
+
+function checkValidInitials(initials?: string) {
+  // Must be a string of 1 or 2 characters
+  if (initials && initials.length > 2) {
+    warn(
+      'EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.',
+      {
+        id: 'EuiAvatar-initials-excedeed'
+      }
+    );
+  }
 }
 
 const mapping: ComponentMapping = {

package/addon/utils/css-mappings/eui-badge.ts

@@ -8,7 +8,7 @@ export const VIS_COLORS = euiPaletteColorBlindBehindText();
 export const colorToHexMap = {
   default: '#d3dae6',
   primary: VIS_COLORS[1],
-  secondary: VIS_COLORS[0],
+  success: VIS_COLORS[0],
   accent: VIS_COLORS[2],
   warning: VIS_COLORS[5],
   danger: VIS_COLORS[9]
@@ -22,7 +22,11 @@ export type ColorType = EuiBadgeColorType | string;
 
 export const baseClass = 'euiBadge';
 
-export function inlineStyles({ badgeColor }: { badgeColor: ColorType }): Styling {
+export function inlineStyles({
+  badgeColor
+}: {
+  badgeColor: ColorType;
+}): Styling {
   let textColor = null;
   let colorHex = 'default';
 

package/addon/utils/css-mappings/eui-beta-badge.ts

@@ -0,0 +1,22 @@
+export const baseClass = 'euiBetaBadge';
+
+export const colorMapping = {
+  accent: `${baseClass}--accent`,
+  subdued: `${baseClass}--subdued`,
+  hollow: `${baseClass}--hollow`
+};
+
+export const sizeMapping = {
+  s: `${baseClass}--small`,
+  m: ''
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    color: colorMapping,
+    size: sizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-bottom-bar.ts

@@ -7,10 +7,17 @@ const paddingSizeMapping = {
   l: `${baseClass}--paddingLarge`
 };
 
+const positionTypeMapping = {
+  fixed: `${baseClass}--fixed`,
+  sticky: `${baseClass}--sticky`,
+  static: `${baseClass}--static`
+};
+
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
-    paddingSize: paddingSizeMapping
+    paddingSize: paddingSizeMapping,
+    positionType: positionTypeMapping
   }
 };
 

package/addon/utils/css-mappings/eui-button-empty.ts

@@ -1,18 +1,18 @@
 export const baseClass = 'euiButtonEmpty';
 
 const colorMapping = {
-  text: `${baseClass}--text`,
+  primary: `${baseClass}--primary`,
   danger: `${baseClass}--danger`,
-  warning: `${baseClass}--warning`,
+  text: `${baseClass}--text`,
   ghost: `${baseClass}--ghost`,
-  primary: `${baseClass}--primary`,
+  warning: `${baseClass}--warning`,
   success: `${baseClass}--success`
 };
 
 const sizeMapping = {
   xs: `${baseClass}--xSmall`,
   s: `${baseClass}--small`,
-  l: `${baseClass}--large`
+  m: ''
 };
 
 const flushMapping = {

package/addon/utils/css-mappings/eui-button-icon.ts

@@ -1,20 +1,33 @@
 export const baseClass = 'euiButtonIcon';
 
 const colorMapping = {
+  primary: `${baseClass}--primary`,
   accent: `${baseClass}--accent`,
+  success: `${baseClass}--success`,
+  warning: `${baseClass}--warning`,
   danger: `${baseClass}--danger`,
   ghost: `${baseClass}--ghost`,
-  primary: `${baseClass}--primary`,
-  subdued: `${baseClass}--subdued`,
-  success: `${baseClass}--success`,
-  text: `${baseClass}--text`,
-  warning: `${baseClass}--warning`
+  text: `${baseClass}--text`
+};
+
+const displayMapping = {
+  base: '',
+  empty: `${baseClass}--empty`,
+  fill: `${baseClass}--fill`
+};
+
+const sizeMapping = {
+  xs: `${baseClass}--xSmall`,
+  s: `${baseClass}--small`,
+  m: `${baseClass}--medium`
 };
 
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
-    color: colorMapping
+    color: colorMapping,
+    display: displayMapping,
+    size: sizeMapping
   }
 };
 

package/addon/utils/css-mappings/eui-button.ts

@@ -6,7 +6,8 @@ const sizeMapping = {
 
 const colorMapping = {
   primary: `${baseClass}--primary`,
-  secondary: `${baseClass}--secondary`,
+  accent: `${baseClass}--accent`,
+  success: `${baseClass}--success`,
   warning: `${baseClass}--warning`,
   danger: `${baseClass}--danger`,
   ghost: `${baseClass}--ghost`,

package/addon/utils/css-mappings/eui-card-select.ts

@@ -1,18 +1,8 @@
 export const baseClass = 'euiCardSelect';
 
-export const colorMapping = {
-  primary: `${baseClass}--primary`,
-  danger: `${baseClass}--danger`,
-  text: `${baseClass}--text`,
-  ghost: `${baseClass}--ghost`,
-  success: `${baseClass}--success`
-};
-
 const mapping: ComponentMapping = {
   base: baseClass,
-  properties: {
-    color: colorMapping
-  }
+  properties: {}
 };
 
 export default mapping;

package/addon/utils/css-mappings/eui-card.ts

@@ -6,27 +6,10 @@ export const textAlignMapping = {
   right: `${baseClass}--rightAligned`
 };
 
-export const paddingSizeMapping = {
-  none: `${baseClass}--paddingNone`,
-  s: `${baseClass}--paddingSmall`,
-  m: `${baseClass}--paddingMedium`,
-  l: `${baseClass}--paddingLarge`
-};
-
-export const selectableColor = {
-  primary: `${baseClass}--isSelectable--primary`,
-  danger: `${baseClass}--isSelectable--danger`,
-  text: `${baseClass}--isSelectable--text`,
-  ghost: `${baseClass}--isSelectable--ghost`,
-  success: `${baseClass}--isSelectable--success`
-};
-
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
-    textAlign: textAlignMapping,
-    paddingSize: paddingSizeMapping,
-    color: selectableColor
+    textAlign: textAlignMapping
   }
 };
 

package/addon/utils/css-mappings/eui-description-list.ts

@@ -0,0 +1,29 @@
+export const baseClass = 'euiDescriptionList';
+
+export const typeMapping = {
+  row: `${baseClass}--row`,
+  inline: `${baseClass}--inline`,
+  column: `${baseClass}--column`,
+  responsiveColumn: `${baseClass}--responsiveColumn`
+};
+
+export const alignMapping = {
+  center: `${baseClass}--center`,
+  left: ''
+};
+
+export const textStyleMapping = {
+  center: `${baseClass}--reverse`,
+  normal: ''
+};
+
+export const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    type: typeMapping,
+    align: alignMapping,
+    textStyle: textStyleMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-empty-prompt.ts

@@ -0,0 +1,17 @@
+export const baseClass = 'euiEmptyPrompt';
+
+export const paddingSizeMapping = {
+  none: '',
+  s: `${baseClass}--paddingSmall`,
+  m: `${baseClass}--paddingMedium`,
+  l: `${baseClass}--paddingLarge`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    paddingSize: paddingSizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-flyout.ts

@@ -1,5 +1,22 @@
 export const baseClass = 'euiFlyout';
 
+export const paddingSizeMapping = {
+  none: `${baseClass}--paddingNone`,
+  s: `${baseClass}--paddingSmall`,
+  m: `${baseClass}--paddingMedium`,
+  l: `${baseClass}--paddingLarge`
+};
+
+export const sideMapping = {
+  left: 'euiFlyout--left',
+  right: ''
+};
+
+export const typeMapping = {
+  push: 'euiFlyout--push',
+  overlay: ''
+};
+
 export const sizeMapping = {
   s: `${baseClass}--small`,
   m: `${baseClass}--medium`,
@@ -9,7 +26,10 @@ export const sizeMapping = {
 const mapping: ComponentMapping = {
   base: baseClass,
   properties: {
-    size: sizeMapping
+    size: sizeMapping,
+    padding: paddingSizeMapping,
+    side: sideMapping,
+    type: typeMapping
   }
 };
 

package/addon/utils/css-mappings/eui-header-links.ts

@@ -0,0 +1,27 @@
+export const baseClass = 'euiHeaderLinks__list';
+
+export const gutterSizeMapping = {
+  none: '',
+  xs: `${baseClass}--gutterXS`,
+  s: `${baseClass}--gutterS`,
+  m: `${baseClass}--gutterM`,
+  l: `${baseClass}--gutterL`
+};
+
+export const mobileGutterSizeMapping = {
+  none: '',
+  xs: 'euiHeaderLinks__mobileList--gutterXS',
+  s: 'euiHeaderLinks__mobileList--gutterS',
+  m: 'euiHeaderLinks__mobileList--gutterM',
+  l: 'euiHeaderLinks__mobileList--gutterL'
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    gutterSize: gutterSizeMapping,
+    mobileGutterSize: mobileGutterSizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-health.ts

@@ -0,0 +1,17 @@
+export const baseClass = 'euiHealth';
+
+export const sizeToClassNameMap = {
+  xs: `${baseClass}--textSizeXS`,
+  s: `${baseClass}--textSizeS`,
+  m: `${baseClass}--textSizeM`,
+  inherit: `${baseClass}--textSizeInherit`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    textSize: sizeToClassNameMap
+  }
+};
+
+export default mapping;