fix: some visual alignments 💅 (#1884)

* fix(notification): margin for stacked text slot * fix(breadcrumb): font, arrow, color * docs(card): remove complex story * fix(progress-bar): colors ⚠️ * docs(table): remove unneeded inline style * style: format * fix(textarea, text-field): counter styles * fix(text-area): use helper-text component * docs(textarea): enable readonly story * docs(text-field): polish (kebab event names in snippet) * fix(textarea, text-field): counter color (standard) * docs(textarea, text-field): css vars * test(textarea): update spec snapshots * docs(radio-button): remove, merge with radio-button-group * fix(storybook): broken import * fix(segmented-button): font for medium and large sizes * fix(collapsible): font style for slotted content * feat(collapsible): remove plate background on hover * fix(segmented-buton): icon-only small x spacing * fix(modal): adjust vertical spacing * fix(data-grid): use small switches and buttons * fix(data-grid): style progress-bar with part * fix(data-grid): remove editable option from number cell * feat(dropdown-select): enable fixed position for listbox * feat(data-grid): replace dropdown with dropdown-select * style: nicer * fix(data-grid): spacing and alignment in heading * test: update snapshots * feat(rating-stars): improved font and colors * feat(pagination): improved font and colors * feat(callout): improve colors, font and spacing * docs(link): simplify story logic * feat(link): improve colors etc * feat(telekom-nav-flyout): implement backdrop * fix(button): color for ghost variant * fix(link): remove underline transition * fix(telekom-nav-flyout): remove transition * fix(pagination): revert wrong icon size * fix(notification): close button color * fix(rating-stars): info text font, stories * fix(link): font weight * test(spec): update snapshots * test(visual): update snapshots (#1886) Co-authored-by: acstll <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: acstll <[email protected]>
telekom · May 31, 2023 · 8f668a8 · 8f668a8
1 parent 305a42a
commit 8f668a8
Show file tree

Hide file tree

Showing 210 changed files with 816 additions and 1,183 deletions.
diff --git a/packages/components/src/components/breadcrumb/breadcrumb.css b/packages/components/src/components/breadcrumb/breadcrumb.css
@@ -14,7 +14,7 @@
 
   --font-size-list-item: var(--telekom-typography-font-size-caption);
 
-  --color-separator: var(--telekom-color-ui-regular);
+  --color-separator: var(--telekom-color-text-and-icon-additional);
 
   --spacing-y-item: var(--telekom-spacing-unit-x1);
   --spacing-x-item: var(--telekom-spacing-unit-x2);
@@ -26,6 +26,7 @@
 
   --focus-outline: var(--telekom-line-weight-highlight) solid
     var(--telekom-color-functional-focus-standard);
+  --font-current: var(--telekom-text-style-caption-bold);
   --color-current: var(--telekom-color-text-and-icon-standard);
 }
 
@@ -76,5 +77,6 @@
 }
 
 .breadcrumb__current {
+  font: var(--font-current);
   color: var(--color-current);
 }
diff --git a/packages/components/src/components/breadcrumb/breadcrumb.tsx b/packages/components/src/components/breadcrumb/breadcrumb.tsx
@@ -85,7 +85,7 @@ export class Breadcrumb {
                 ) : (
                   <span class="breadcrumb__separator" part="separator">
                     {this.separator || (
-                      <scale-icon-navigation-right size={12} />
+                      <scale-icon-navigation-right size={10} />
                     )}
                   </span>
                 );

diff --git a/packages/components/src/components/button/button.css b/packages/components/src/components/button/button.css
@@ -76,7 +76,7 @@
   --radius-ghost: var(--radius);
   --border-width-ghost: var(--telekom-spacing-unit-x025);
   --spacing-x-ghost: var(--telekom-spacing-unit-x2);
-  --color-ghost: var(--telekom-color-text-and-icon-standard);
+  --color-ghost: var(--telekom-color-text-and-icon-primary-standard);
   --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed);
   --color-ghost-disabled: var(--telekom-color-text-and-icon-disabled);

diff --git a/packages/components/src/components/callout/callout.css b/packages/components/src/components/callout/callout.css
@@ -2,11 +2,11 @@
   --position: absolute;
   --background: var(--telekom-color-ui-extra-strong);
   --color: var(--telekom-color-text-and-icon-inverted-standard);
-  --spacing: var(--telekom-spacing-unit-x6);
+  --spacing: var(--telekom-spacing-unit-x8);
   --min-width: 6rem;
   --aspect-ratio: 1;
   --rotation: 0deg;
-  --font-standard: var(--telekom-text-style-lead-text);
+  --font-standard: var(--telekom-text-style-body-bold);
   --font-small: var(--telekom-text-style-body-bold);
   --font-large: var(--telekom-text-style-heading-1);
 
@@ -52,7 +52,7 @@
 }
 
 :host([variant='blue']) {
-  --background: var(--telekom-color-additional-cyan-400);
+  --background: var(--telekom-color-additional-cyan-100);
   --color: var(--telekom-color-text-and-icon-black-standard);
 }
 

diff --git a/packages/components/src/components/collapsible/collapsible.css b/packages/components/src/components/collapsible/collapsible.css
@@ -22,7 +22,7 @@
   --spacing-left-button-text: var(--telekom-spacing-unit-x2);
   --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-button-active: var(--telekom-color-text-and-icon-primary-pressed);
-  --background-button-hover: var(--telekom-color-ui-state-fill-hovered);
+  --background-button-hover: none;
   --focus-outline: var(--telekom-line-weight-highlight) solid
     var(--telekom-color-functional-focus-standard);
 
@@ -123,3 +123,7 @@
   margin-top: var(--spacing-top-content);
   margin-bottom: var(--spacing-bottom-content);
 }
+
+::slotted(*:not([slot='heading'])) {
+  font: var(--telekom-text-style-body);
+}
diff --git a/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx
@@ -21,10 +21,18 @@ export const ActionsCell: Cell = {
           const { label, ...props } = action;
           if (typeof label === 'object' && '__html' in label) {
             return (
-              <scale-button innerHTML={label.__html} {...props}></scale-button>
+              <scale-button
+                size="small"
+                innerHTML={label.__html}
+                {...props}
+              ></scale-button>
             );
           }
-          return <scale-button {...props}>{label}</scale-button>;
+          return (
+            <scale-button size="small" {...props}>
+              {label}
+            </scale-button>
+          );
         })}
       </div>
     );

diff --git a/packages/components/src/components/data-grid/cell-handlers/checkbox-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/checkbox-cell.tsx
@@ -47,7 +47,7 @@ export const CheckboxCell: Cell = {
 
     switch (style) {
       case 'switch':
-        return <scale-switch {...props}></scale-switch>;
+        return <scale-switch size="small" {...props}></scale-switch>;
       default:
         // 'checkbox'
         return <scale-checkbox {...props}></scale-checkbox>;

diff --git a/packages/components/src/components/data-grid/cell-handlers/graph-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/graph-cell.tsx
@@ -33,26 +33,17 @@ export const GraphCell: Cell = {
       )
     );
 
+    // I really don't know the difference between bar and progress
     switch (style) {
       case 'bar':
         return (
           <div class={`tbody__bar-cell`}>
             <scale-progress-bar
+              class="data-grid-progress-bar"
               aria-hidden="true"
               percentage={progress}
               // showStatus={true}
               mute={true}
-              style={{ maxWidth: '200px' }}
-              styles={
-                /* css */ `.progress-bar__outer {
-                min-width: 50px;
-                max-width: 200px;
-              }
-              .progress-bar__inner {
-                background: var(--telekom-color-ui-faint) !important;
-              }
-              `
-              }
             ></scale-progress-bar>
             <p class={`scl-body`}>{content}</p>
           </div>
@@ -61,19 +52,10 @@ export const GraphCell: Cell = {
         // progress
         return (
           <scale-progress-bar
+            class="data-grid-progress-bar"
             percentage={progress}
             showStatus={true}
             mute={true}
-            styles={
-              /* css */ `.progress-bar__outer {
-              min-width: 50px;
-              max-width: 200px;
-            }
-            .progress-bar__inner {
-                background: var(--telekom-color-functional-informational-standard) !important;
-              }
-            `
-            }
           ></scale-progress-bar>
         );
     }

diff --git a/packages/components/src/components/data-grid/cell-handlers/number-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/number-cell.tsx
@@ -18,7 +18,7 @@ import { Cell } from './cell-interface';
 // precision
 // decimalSymbol
 // groupSymbol
-// editable?: boolean = false
+// editable?: boolean = false / removed/deprecated in 3.0.0-beta.135
 
 export const NumberCell: Cell = {
   defaults: {
@@ -28,9 +28,9 @@ export const NumberCell: Cell = {
   render: ({
     field,
     content,
-    component,
-    rowIndex,
-    columnIndex,
+    // component,
+    // rowIndex,
+    // columnIndex,
     isAutoWidthCheck,
   }) => {
     const {
@@ -39,79 +39,77 @@ export const NumberCell: Cell = {
       groupSymbol = '',
       prefix = '',
       suffix = '',
-      editable = false,
-      label,
     } = field;
 
     // Input component doesn't expand with content, so need to return a fake element that simulates width
-    if (isAutoWidthCheck && editable) {
-      return (
-        <p class={`scl-body`} style={{ paddingRight: '26px' }}>
-          {content}
-        </p>
-      );
-    }
-
-    const step = `0.${(String(content).split('.')[1] || '')
-      .split('')
-      .map(() => '0')}`.replace(/,/g, '');
+    // if (isAutoWidthCheck && editable) {
+    //   return (
+    //     <p class={`scl-body`} style={{ paddingRight: '26px' }}>
+    //       {content}
+    //     </p>
+    //   );
+    // }
 
-    if (editable) {
-      const props = {
-        type: 'number',
-        size: 'small',
-        step: step.slice(0, step.length - 1) + '1',
-        value: String(content),
-        styles: /* css */ `.text-field__control {
-          text-align: right !important;
-        }`,
-        label,
-      } as any;
+    // const step = `0.${(String(content).split('.')[1] || '')
+    //   .split('')
+    //   .map(() => '0')}`.replace(/,/g, '');
 
-      // TODO: use blur to reduce number of changes - but doesn't pass value
-      props.onScaleChange = ({ detail }) => {
-        const { value } = detail;
-        // Update rows data
-        component.rows[rowIndex][columnIndex] = value;
-        // Trigger event
-        component.triggerEditEvent(value, rowIndex, columnIndex);
-      };
+    // if (editable) {
+    //   const props = {
+    //     type: 'number',
+    //     size: 'small',
+    //     step: step.slice(0, step.length - 1) + '1',
+    //     value: String(content),
+    //     styles: /* css */ `.text-field__control {
+    //       text-align: right !important;
+    //     }`,
+    //     label,
+    //   } as any;
 
-      return <scale-text-field {...props}></scale-text-field>;
-    } else {
-      let value = content;
+    //   // TODO: use blur to reduce number of changes - but doesn't pass value
+    //   props.onScaleChange = ({ detail }) => {
+    //     const { value } = detail;
+    //     // Update rows data
+    //     component.rows[rowIndex][columnIndex] = value;
+    //     // Trigger event
+    //     component.triggerEditEvent(value, rowIndex, columnIndex);
+    //   };
 
-      // Render all digits with 8s as they're the widest
-      if (isAutoWidthCheck) {
-        value = Number(value.toString().replace(/[0-9]/g, '8'));
-      }
+    //   return <scale-text-field {...props}></scale-text-field>;
+    // } else {
+    // }
+    let value = content;
 
-      // Refine to requested decimal precision
-      if (precision < 100) {
-        value = Number(value).toFixed(precision);
-      } else {
-        value = value.toString();
-      }
+    // Render all digits with 8s as they're the widest
+    if (isAutoWidthCheck) {
+      value = Number(value.toString().replace(/[0-9]/g, '8'));
+    }
 
-      // Replace/add requested delimiters
-      if (groupSymbol || decimalSymbol !== '.') {
-        const parts = value.split('.');
-        if (groupSymbol) {
-          parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupSymbol);
-        }
-        value = parts.join(decimalSymbol);
-      }
+    // Refine to requested decimal precision
+    if (precision < 100) {
+      value = Number(value).toFixed(precision);
+    } else {
+      value = value.toString();
+    }
 
-      // Add prefix/suffix
-      if (prefix || suffix) {
-        value = prefix + value + suffix;
+    // Replace/add requested delimiters
+    if (groupSymbol || decimalSymbol !== '.') {
+      const parts = value.split('.');
+      if (groupSymbol) {
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupSymbol);
       }
+      value = parts.join(decimalSymbol);
+    }
 
-      return (
-        <p class={`scl-body`} style={{ textAlign: 'right' }}>
-          {value}
-        </p>
-      );
+    // Add prefix/suffix
+    if (prefix || suffix) {
+      value = prefix + value + suffix;
     }
+
+    return (
+      <p class={`scl-body`} style={{ textAlign: 'right' }}>
+        {value}
+      </p>
+    );
   },
 };
diff --git a/packages/components/src/components/data-grid/cell-handlers/select-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/select-cell.tsx
@@ -58,15 +58,15 @@ export const SelectCell: Cell = {
     }
 
     return (
-      <scale-dropdown size="small" {...props}>
+      <scale-dropdown-select floatingStrategy="fixed" {...props}>
         {options.map((option) => {
           return (
-            <option value={option} selected={option === content}>
+            <scale-dropdown-select-item value={option}>
               {option}
-            </option>
+            </scale-dropdown-select-item>
           );
         })}
-      </scale-dropdown>
+      </scale-dropdown-select>
     );
   },
 };
diff --git a/packages/components/src/components/data-grid/data-grid.css b/packages/components/src/components/data-grid/data-grid.css
@@ -88,18 +88,22 @@
 .data-grid__title-block {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding-right: 62px;
+  justify-content: flex-end;
+  padding-right: var(--telekom-spacing-unit-x4);
   padding-left: var(--telekom-spacing-unit-x6);
 }
 
 .data-grid__heading {
+  flex-grow: 1;
+}
+
+.data-grid__title-block ::slotted(*) {
+  /* --spacing-x-actions-slotted */
+  margin-left: var(--telekom-spacing-unit-x2);
 }
 
 .data-grid__settings-menu {
-  position: absolute;
-  top: var(--telekom-spacing-unit-x4);
-  right: var(--telekom-spacing-unit-x4);
+  margin-left: var(--telekom-spacing-unit-x2);
 }
 
 .data-grid__scroll-container {
@@ -289,7 +293,7 @@
   margin: 8px;
   padding: 8px;
   overflow: hidden;
-  line-height: 32px;
+  /* line-height: 32px; */
 }
 .tbody__cell--numbered {
   text-align: right;
@@ -388,6 +392,11 @@
   margin-right: var(--telekom-spacing-unit-x2);
 }
 
+.data-grid-progress-bar::part(progress-bar) {
+  min-width: 50px;
+  max-width: 200px;
+}
+
 /* Info block */
 .info {
   height: 44px;