[EuiDescriptionList] Update inline styles

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added virtulized rendering option to `EuiSelectableList` with `isVirtualized` ([#5521](https://github.com/elastic/eui/pull/5521))
 - Added expanded option properties to `EuiSelectableOption` with `data` ([#5521](https://github.com/elastic/eui/pull/5521))
+- Updated styles in `EuiDescriptionList` of `type` inline ([#5534](https://github.com/elastic/eui/pull/5534))
 
 **Bug fixes**
 

src/components/description_list/_description_list.scss

@@ -170,19 +170,31 @@
 
   &.euiDescriptionList--inline {
 
+    &:not(.euiDescriptionList--compressed) {
+      .euiDescriptionList__titleBadge {
+        @include fontSize($euiFontSizeS);
+      }
+    }
+
     .euiDescriptionList__title {
       @include euiFontSizeS;
       display: inline;
-      border-radius: $euiBorderRadius;
-      font-weight: $euiFontWeightRegular;
-      background: $euiColorLightestShade;
-      border: $euiBorderThin;
-      padding:  0 $euiSizeXS;
+      padding:  0;
       margin: 0 $euiSizeXS;
 
+      &Badge {
+        vertical-align: baseline;
+        font-weight: $euiFontWeightRegular;
+        padding:  0 $euiSizeXS;
+        border: none;
+        background-color: transparentize(shade($euiColorPrimary, 20%), .9) !important; // sass-lint:disable-line no-important
+        color: $euiTextColor !important; // sass-lint:disable-line no-important
+      }
+
       // Make sure the first <dt> doesn't get a margin.
       &:first-of-type {
         margin-left: 0;
+        padding-left: 0;
       }
     }
 
@@ -195,10 +207,6 @@
     // Compressed when inline is even smaller.
     &.euiDescriptionList--compressed {
 
-      .euiDescriptionList__title {
-        @include euiFontSizeXS;
-      }
-
       .euiDescriptionList__description {
         @include euiFontSizeXS;
       }

src/components/description_list/description_list.tsx

@@ -102,7 +102,11 @@ export const EuiDescriptionList: FunctionComponent<
   if (listItems) {
     childrenOrListItems = listItems.map((item, index) => {
       return [
-        <EuiDescriptionListTitle key={`title-${index}`} {...titleProps}>
+        <EuiDescriptionListTitle
+          key={`title-${index}`}
+          inline={type === 'inline'}
+          {...titleProps}
+        >
           {item.title}
         </EuiDescriptionListTitle>,
 

src/components/description_list/description_list_title.tsx

@@ -9,15 +9,25 @@
 import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { EuiBadge } from '../badge';
+
+export type EuiDescriptionListTitleProps = {
+  inline?: boolean;
+};
 
 export const EuiDescriptionListTitle: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLElement>
-> = ({ children, className, ...rest }) => {
+  EuiDescriptionListTitleProps & CommonProps & HTMLAttributes<HTMLElement>
+> = ({ children, inline, className, ...rest }) => {
   const classes = classNames('euiDescriptionList__title', className);
-
   return (
     <dt className={classes} {...rest}>
-      {children}
+      {inline ? (
+        <EuiBadge className="euiDescriptionList__titleBadge">
+          {children}
+        </EuiBadge>
+      ) : (
+        children
+      )}
     </dt>
   );
 };

src/themes/amsterdam/overrides/_description_list.scss

@@ -0,0 +1,7 @@
+.euiDescriptionList {
+  &.euiDescriptionList--inline {
+    .euiDescriptionList__title {
+      line-height: $euiLineHeight;
+    }
+  }
+}

src/themes/amsterdam/overrides/_index.scss

@@ -12,6 +12,7 @@
 @import 'data_grid';
 @import 'date_picker';
 @import 'date_popover_button';
+@import 'description_list';
 @import 'facet';
 @import 'filter_group';
 @import 'form_control_layout';