fix(Message): make the visual style of Message more prominent (#3603)

* fix(Message): make the visual style of Message more prominent * docs: add a11y guide * fix: fix error tests * fix: adjust the background color * fix: add zIndex for full message * docs: update examples
rsuite · Feb 2, 2024 · 114013f · 114013f
1 parent 303350f
commit 114013f
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 39 deletions.
diff --git a/docs/pages/components/message/en-US/index.md b/docs/pages/components/message/en-US/index.md
@@ -16,7 +16,11 @@ Used to show important tips on a page.
 
 <!--{include:`types.md`}-->
 
-### Icons
+### With header and actions
+
+<!--{include:`header.md`}-->
+
+### With icon
 
 <!--{include:`icons.md`}-->
 
@@ -34,6 +38,16 @@ A message type that contains an Alert
 
 <!--{include:`with-toaster.md`}-->
 
+## Accessibility
+
+### ARIA properties
+
+Message has a `role` of `alert`.
+
+### Keyboard interactions
+
+No keyboard interaction needed.
+
 ## Props & Hooks
 
 ### `<Message>`

diff --git a/docs/pages/components/message/fragments/basic.md b/docs/pages/components/message/fragments/basic.md
@@ -5,7 +5,9 @@ import { Message } from 'rsuite';
 
 const App = () => (
   <>
-    <Message>Informational</Message>
+    <Message>
+      <strong>Info!</strong> You can use the `Message` component to display a alert message.
+    </Message>
   </>
 );
 

diff --git a/docs/pages/components/message/fragments/close.md b/docs/pages/components/message/fragments/close.md
@@ -6,11 +6,10 @@ import { Message } from 'rsuite';
 const App = () => (
   <>
     <Message closable type="info">
-      Informational
+      <strong>Info!</strong> You can use the `Message` component to display a info message.
     </Message>
-    <Message closable type="info" header="Informational">
-      Detailed description and advices about successful copywriting.
-      <a href="#">This is a Link.</a>
+    <Message closable type="info" header={<strong>Info!</strong>}>
+      Additional description and informations about copywriting.
     </Message>
   </>
 );

diff --git a/docs/pages/components/message/fragments/full.md b/docs/pages/components/message/fragments/full.md
@@ -11,10 +11,11 @@ const styles = {
 
 const App = () => (
   <div style={styles}>
-    <Message full showIcon type="warning">
-      Warning
+    <Message full showIcon type="warning" closable>
+      <strong> Warning!</strong> The system will be maintained in two days, please be prepared in
+      advance.
     </Message>
-    <Placeholder.Paragraph rows={10} />
+    <Placeholder.Paragraph rows={10} graph="image" />
   </div>
 );
 

diff --git a/docs/pages/components/message/fragments/header.md b/docs/pages/components/message/fragments/header.md
@@ -0,0 +1,35 @@
+<!--start-code-->
+
+```js
+import { Message, Button, Divider } from 'rsuite';
+
+const App = () => (
+  <>
+    <Message showIcon type="warning" header={<strong>Cannot delete the file</strong>}>
+      We are sorry, the file cannot be deleted. Please try again later.
+    </Message>
+
+    <Message showIcon type="error" header={<strong>A problem occurred</strong>}>
+      <ol>
+        <li>Please check your network connection.</li>
+        <li>Please check the file permissions.</li>
+        <li>Please check the file size.</li>
+        <li>Please check the file format.</li>
+      </ol>
+    </Message>
+
+    <Message showIcon type="info" header={<strong>Do you want to allow notifications?</strong>}>
+      We can let you know when new messages arrive.
+      <hr />
+      <ButtonToolbar>
+        <Button size="sm">Don't allow</Button>
+        <Button size="sm">Allow</Button>
+      </ButtonToolbar>
+    </Message>
+  </>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/message/fragments/icons.md b/docs/pages/components/message/fragments/icons.md
@@ -6,19 +6,19 @@ import { Message } from 'rsuite';
 const App = () => (
   <>
     <Message showIcon type="info">
-      Informational
+      <strong>Info!</strong> You can use the `Message` component to display a info message.
     </Message>
     <Message showIcon type="success">
-      Success
+      <strong>Success!</strong> You can use the `Message` component to display a success message.
     </Message>
     <Message showIcon type="warning">
-      Warning
+      <strong>Warning!</strong> You can use the `Message` component to display a warning message.
     </Message>
     <Message showIcon type="error">
-      Error
+      <strong>Error!</strong> You can use the `Message` component to display a error message.
     </Message>
-
-    <Message showIcon type="info" header="Informational">
+    <hr />
+    <Message showIcon type="info" header="Info">
       Additional description and informations about copywriting.
     </Message>
 

diff --git a/docs/pages/components/message/fragments/types.md b/docs/pages/components/message/fragments/types.md
@@ -5,10 +5,18 @@ import { Message } from 'rsuite';
 
 const App = () => (
   <>
-    <Message type="info">Informational</Message>
-    <Message type="success">Success</Message>
-    <Message type="warning">Warning</Message>
-    <Message type="error">Error</Message>
+    <Message type="info">
+      <strong>Info!</strong> You can use the `Message` component to display a info message.
+    </Message>
+    <Message type="success">
+      <strong>Success!</strong> You can use the `Message` component to display a success message.
+    </Message>
+    <Message type="warning">
+      <strong>Warning!</strong> You can use the `Message` component to display a warning message.
+    </Message>
+    <Message type="error">
+      <strong>Error!</strong> You can use the `Message` component to display a error message.
+    </Message>
   </>
 );
 

diff --git a/docs/pages/components/message/fragments/with-toaster.md b/docs/pages/components/message/fragments/with-toaster.md
@@ -10,7 +10,7 @@ const App = () => {
 
   const message = (
     <Message showIcon type={type} closable>
-      {type}: The message appears on the {placement}.
+      <strong>{type}!</strong> The message appears on the {placement}.
     </Message>
   );
 

diff --git a/docs/pages/components/message/index.tsx b/docs/pages/components/message/index.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Message, Button, ButtonToolbar, SelectPicker, useToaster, Placeholder } from 'rsuite';
+import {
+  Message,
+  Button,
+  ButtonToolbar,
+  SelectPicker,
+  useToaster,
+  Placeholder,
+  Divider
+} from 'rsuite';
 import DefaultPage from '@/components/Page';
 import ImportGuide from '@/components/ImportGuide';
 
@@ -11,7 +19,15 @@ export default function Page() {
   return (
     <DefaultPage
       inDocsComponents={inDocsComponents}
-      dependencies={{ Message, Button, ButtonToolbar, SelectPicker, useToaster, Placeholder }}
+      dependencies={{
+        Message,
+        Button,
+        ButtonToolbar,
+        SelectPicker,
+        useToaster,
+        Placeholder,
+        Divider
+      }}
     />
   );
 }
diff --git a/docs/pages/components/message/zh-CN/index.md b/docs/pages/components/message/zh-CN/index.md
@@ -12,10 +12,14 @@
 
 <!--{include:`basic.md`}-->
 
-### 类型
+### 消息类型
 
 <!--{include:`types.md`}-->
 
+### 带标题和操作
+
+<!--{include:`header.md`}-->
+
 ### 显示图标
 
 <!--{include:`icons.md`}-->
@@ -34,6 +38,16 @@
 
 <!--{include:`with-toaster.md`}-->
 
+## 可访问性
+
+### ARIA 属性
+
+Message 的 `role` 为 `alert`。
+
+### Keyboard interactions
+
+无需键盘交互。
+
 ## Props & Hooks
 
 ### `<Message>`

diff --git a/src/Message/styles/index.less b/src/Message/styles/index.less
@@ -16,6 +16,7 @@
   line-height: @line-height-base;
   position: relative;
   animation-fill-mode: forwards;
+  overflow: hidden;
 
   &-container {
     padding: @message-padding;
@@ -54,6 +55,12 @@
   // Description
   &-body {
     color: var(--rs-text-primary);
+    ul,
+    ol {
+      margin: 0;
+      padding: 0;
+      padding-inline-start: 16px;
+    }
   }
 
   // Message with a title
@@ -103,6 +110,7 @@
   left: 0;
   width: 100%;
   border-radius: 0;
+  z-index: @zindex-message-full;
 }
 
 // Alternate styles

diff --git a/src/Message/styles/mixin.less b/src/Message/styles/mixin.less
@@ -1,7 +1,11 @@
 // Messages
 
 .message-variant(@background; @header-color; @text-color; @icon-color) {
-  background-color: @background;
+  background-color: #fff;
+
+  .rs-message-container {
+    background-color: @background;
+  }
 
   .rs-message-header {
     color: @header-color;

diff --git a/src/Message/test/MessageStylesSpec.tsx b/src/Message/test/MessageStylesSpec.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Message from '../index';
-import { getDOMNode, getStyle, toRGB } from '@test/utils';
-
+import { toRGB } from '@test/utils';
 import '../styles/index.less';
 
 describe('Message styles', () => {
   it('Should render the correct background color', () => {
-    const instanceRef = React.createRef<HTMLDivElement>();
-    render(<Message ref={instanceRef} />);
-    assert.equal(getStyle(getDOMNode(instanceRef.current), 'backgroundColor'), toRGB('#f0f9ff'));
+    render(<Message />);
+    expect(screen.getByRole('alert')).to.have.style('background-color', toRGB('#fff'));
   });
 
   it('Icon should render the correct color', () => {
-    const instanceRef = React.createRef<HTMLDivElement>();
-    render(<Message showIcon type="info" ref={instanceRef} />);
-    const icon = getDOMNode(instanceRef.current).querySelector('.rs-icon') as HTMLElement;
-    assert.equal(getStyle(icon, 'color'), toRGB('#2196f3'));
+    render(<Message showIcon type="info" />);
+
+    expect(screen.getByRole('alert').querySelector('.rs-icon')).to.have.style(
+      'color',
+      toRGB('#2196f3')
+    );
   });
 });
diff --git a/src/styles/color-modes/light.less b/src/styles/color-modes/light.less
@@ -140,19 +140,19 @@
   --rs-message-success-header: var(--rs-text-heading);
   --rs-message-success-text: var(--rs-text-primary);
   --rs-message-success-icon: var(--rs-color-green);
-  --rs-message-success-bg: var(--rs-green-50);
+  --rs-message-success-bg: rgb(from var(--rs-green-100) r g b / 60%);
   --rs-message-info-header: var(--rs-text-heading);
   --rs-message-info-text: var(--rs-text-primary);
   --rs-message-info-icon: var(--rs-color-blue);
-  --rs-message-info-bg: var(--rs-blue-50);
+  --rs-message-info-bg: rgb(from var(--rs-blue-100) r g b / 60%);
   --rs-message-warning-header: var(--rs-text-heading);
   --rs-message-warning-text: var(--rs-text-primary);
   --rs-message-warning-icon: var(--rs-color-yellow);
-  --rs-message-warning-bg: var(--rs-yellow-50);
+  --rs-message-warning-bg: rgb(from var(--rs-yellow-100) r g b / 60%);
   --rs-message-error-header: var(--rs-text-heading);
   --rs-message-error-text: var(--rs-text-primary);
   --rs-message-error-icon: var(--rs-color-red);
-  --rs-message-error-bg: var(--rs-red-50);
+  --rs-message-error-bg: rgb(from var(--rs-red-100) r g b / 60%);
 
   // Tooltip
   --rs-tooltip-bg: var(--rs-gray-900);
@@ -392,6 +392,12 @@
     --rs-loader-ring-inverse: fade(@B050, 30%);
     --rs-loader-backdrop-inverse: fade(@B900, 83%);
 
+    // Message
+    --rs-message-success-bg: fade(@green-100, 60%);
+    --rs-message-info-bg: fade(@blue-100, 60%);
+    --rs-message-warning-bg: fade(@yellow-100, 60%);
+    --rs-message-error-bg: fade(@red-100, 60%);
+
     // Dropdown
     --rs-dropdown-item-bg-hover: fade(@H100, 50%);
 

diff --git a/src/styles/variables.less b/src/styles/variables.less
@@ -571,7 +571,7 @@
 @message-title-size:          @font-size-base;
 @message-link-font-weight:    bold;
 
-@message-icon-size:           @font-size-small;
+@message-icon-size:           16px;
 @message-icon-large-size:     24px;
 @message-icon-margin-right:   10px;
 
@@ -862,6 +862,7 @@
 @zindex-popover:                              1060;
 @zindex-tooltip:                              1070;
 @zindex-notification:                         1080;
+@zindex-message-full:                         1090;
 
 //#==== Uploader
 @zindex-uploader-picture-preview:         1;