Informer - extract private component

Author: Zedwag

apps/react-storybook/stories/informer/Informer.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import dxInformer from 'devextreme/ui/informer';
+import { wrapDxWithReact } from '../utils';
+
+
+const Informer = wrapDxWithReact(dxInformer);
+
+const textOptions = {
+    error: 'error',
+    biggerError: 'bigger error',
+    bigError: 'really really big and huge error that takes really much space',
+    superBigError: 'error that will never be able to fit into one line because it is so big and even if it tried to fit it would still not be able to be displayed properly due to its excessive length',
+};
+
+const meta: Meta<typeof Informer> = {
+    title: 'Components/Informer',
+    component: Informer,
+    parameters: {
+        layout: 'padded',
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Informer>;
+
+export const DefaultInformer: Story = {
+    args: {
+        showBackground: true,
+        width: '100%',
+        contentAlignment: 'center',
+        icon: 'errorcircle',
+        text: 'error',
+        visible: true,
+        rtlEnabled: false,
+        disabled: false,
+    },
+    argTypes: {
+        showBackground: {
+            control: 'boolean'
+        },
+        width: {
+            options: ['100%', 'auto'],
+            control: { type: 'radio' }
+        },
+        contentAlignment: {
+            options: ['start', 'center', 'end'],
+            control: { type: 'radio' }
+        },
+        icon: {
+            options: ['errorcircle', 'bell', 'sun', undefined],
+            control: { type: 'select' }
+        },
+        text: {
+            options: Object.keys(textOptions),
+            mapping: textOptions,
+            control: { type: 'select' }
+        },
+        visible: {
+            control: 'boolean'
+        },
+        rtlEnabled: {
+            control: 'boolean'
+        },
+        disabled: {
+            control: 'boolean'
+        },
+    },
+    render: ({
+        showBackground,
+        width,
+        contentAlignment,
+        icon,
+        text,
+        visible,
+        rtlEnabled,
+        disabled,
+    }) => {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <Informer
+                    width={width}
+                    disabled={disabled}
+                    rtlEnabled={rtlEnabled}
+                    visible={visible}
+                    text={text}
+                    icon={icon}
+                    showBackground={showBackground}
+                    contentAlignment={contentAlignment}
+                />
+            </div>
+        );
+    }
+};

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-alertlist/_index.scss

@@ -2,9 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.dx-chat-alertlist-error {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-alertlist/_mixins.scss

@@ -6,8 +6,6 @@
   $padding-inline,
   $error-padding-block,
   $row-gap,
-  $icon-size,
-  $content-column-gap,
 ) {
   .dx-chat-alertlist {
     padding-block: $padding-block;
@@ -21,13 +19,9 @@
   }
 
   .dx-chat-alertlist-error {
-    color: $error-color;
-    column-gap: $content-column-gap;
-    padding-block: $error-padding-block;
-  }
-
-  .dx-chat-alertlist-error-icon {
-    @include dx-icon(errorcircle);
-    @include dx-icon-sizing($icon-size);
+    &.dx-informer {
+      color: $error-color;
+      padding-block: $error-padding-block;
+    }
   }
 }

packages/devextreme-scss/scss/widgets/base/informer/_index.scss

@@ -0,0 +1,25 @@
+.dx-informer {
+  width: 100%;
+  align-items: center;
+  display: flex;
+  word-break: break-word;
+
+  &.dx-informer-alignment-start {
+    justify-content: flex-start;
+    align-self: flex-start;
+  }
+
+  &.dx-informer-alignment-center {
+    justify-content: center;
+    align-self: center;
+  }
+
+  &.dx-informer-alignment-end {
+    justify-content: flex-end;
+    align-self: flex-end;
+  }
+
+  .dx-informer-icon {
+    display: flex;
+  }
+}

packages/devextreme-scss/scss/widgets/base/informer/_mixins.scss

@@ -0,0 +1,29 @@
+@use "../icons" as *;
+
+@mixin informer(
+  $color,
+  $background-color,
+  $border-radius,
+  $icon-size,
+  $padding-inline,
+  $padding-block,
+  $column-gap,
+) {
+  .dx-informer {
+    color: $color;
+    padding-inline: $padding-inline;
+    padding-block: $padding-block;
+    column-gap: $column-gap;
+  }
+
+  .dx-informer-bg {
+    background-color: $background-color;
+    border-radius: $border-radius;
+  }
+
+  .dx-informer-icon {
+    & * {
+      @include dx-icon-sizing($icon-size);
+    }
+  }
+}

packages/devextreme-scss/scss/widgets/fluent/_index.scss

@@ -13,6 +13,7 @@
 @use "./validation";
 @use "./textBox";
 @use "./dropDownBox";
+@use "./informer";
 @use "./list";
 @use "./textArea";
 @use "./numberBox";

packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss

@@ -22,8 +22,6 @@
   $chat-alerts-padding-inline,
   $chat-alert-padding-block,
   $chat-alerts-row-gap,
-  $chat-alert-icon-size,
-  $chat-alert-content-column-gap,
 );
 @include chat-messagebox(
   $chat-messagebox-padding,

packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss

@@ -23,10 +23,8 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
 
-$chat-alert-icon-size: $fluent-base-icon-size !default;
-$chat-alert-content-column-gap: null !default;
 $chat-alerts-padding-block: null !default;
-$chat-alerts-padding-inline: null !default;
+$chat-alerts-padding-inline: 8px !default;
 $chat-alerts-row-gap: null !default;
 $chat-alert-padding-block: null !default;
 
@@ -59,9 +57,7 @@ $chat-typingindicator-circle-border-radius: 999em !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
-  $chat-alert-content-column-gap: 6px !default;
   $chat-alerts-padding-block: 12px !default;
-  $chat-alerts-padding-inline: 20px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 6px !default;
 
@@ -87,9 +83,7 @@ $chat-typingindicator-circle-border-radius: 999em !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
-  $chat-alert-content-column-gap: 4px !default;
   $chat-alerts-padding-block: 8px !default;
-  $chat-alerts-padding-inline: 16px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 5px !default;
 

packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss

@@ -0,0 +1,15 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-color: $base-invalid-color !default;
+$informer-background-color: null !default;
+
+@if $mode == "light" {
+  $informer-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67);
+}
+
+@if $mode == "dark" {
+  $informer-background-color: darken(desaturate($base-danger, 5.06), 53.53);
+}

packages/devextreme-scss/scss/widgets/fluent/informer/_index.scss

@@ -0,0 +1,16 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+
+// adduse
+
+@include informer(
+  $informer-color,
+  $informer-background-color,
+  $informer-border-radius,
+  $informer-icon-size,
+  $informer-padding-inline,
+  $informer-padding-block,
+  $informer-column-gap,
+);