@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.0

package/button/__test__/button.test.js

@@ -8,6 +8,7 @@ describe('Button', () => {
     it('button with custom className & style', () => {
         const wrapper = mount(<Button className="test" style={{ color: 'red' }} />);
         expect(wrapper.hasClass('test')).toEqual(true);
+        expect(wrapper.find('button').getDOMNode().style.color).toBe('red');
     });
 
     it(`button with icon`, () => {
@@ -61,4 +62,10 @@ describe('Button', () => {
         );
         expect(buttonGroup.getDOMNode().textContent).toEqual('1查询剪切');
     });
+
+    it('button group with custom className & style', () => {
+        const wrapper = mount(<ButtonGroup className="test" style={{ color: 'red' }} />);
+        expect(wrapper.hasClass('test')).toEqual(true);
+        expect(wrapper.find('button').getDOMNode().style.color).toBe('red');
+    });
 });

package/button/buttonGroup.tsx

@@ -1,6 +1,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
 import { Type, Size } from './Button';
 
@@ -13,6 +14,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    className?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
@@ -36,8 +38,9 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     };
 
     render() {
-        const { children, disabled, size, type, 'aria-label': ariaLabel, ...rest } = this.props;
+        const { children, disabled, size, type, className, 'aria-label': ariaLabel, ...rest } = this.props;
         let inner;
+        const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
             inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
@@ -46,6 +49,6 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                     : itm
             ));
         }
-        return <div className={`${prefixCls}-group`} role="group" aria-label={ariaLabel}>{inner}</div>;
+        return <div className={cls} role="group" aria-label={ariaLabel}>{inner}</div>;
     }
 }

package/calendar/monthCalendar.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import React, { ReactInstance } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
@@ -180,16 +181,16 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         const { markWeekend, displayValue } = this.props;
         this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
         return (
-            <div className={`${prefixCls}-header`}>
-                <div role="gridcell" className={`${prefixCls}-grid`}>
-                    <ul className={`${prefixCls}-grid-row`}>
+            <div className={`${prefixCls}-header`} role="presentation">
+                <div role="presentation" className={`${prefixCls}-grid`}>
+                    <ul role="row" className={`${prefixCls}-grid-row`}>
                         {this.monthlyData[0].map(day => {
                             const { weekday } = day;
                             const listCls = cls({
                                 [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend,
                             });
                             return (
-                                <li key={`${weekday}-monthheader`} className={listCls}>
+                                <li role="columnheader" aria-label={weekday} key={`${weekday}-monthheader`} className={listCls}>
                                     <span>{weekday}</span>
                                 </li>
                             );
@@ -268,7 +269,7 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
         const text = (
             <LocaleConsumer componentName="Calendar">
-                {(locale: Locale['Calendar']) => (
+                {(locale: Locale['Calendar']) => (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
                     <div
                         className={`${cardCls}-wrapper`}
                         style={{ bottom: 0 }}
@@ -330,8 +331,8 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         const { itemLimit } = this.state;
         const { display, day } = events;
         return (
-            <div role="gridcell" className={`${prefixCls}-weekrow`} ref={this.cellDom} key={`${index}-weekrow`}>
-                <ul className={`${prefixCls}-skeleton`}>
+            <div role="presentation" className={`${prefixCls}-weekrow`} ref={this.cellDom} key={`${index}-weekrow`}>
+                <ul role="row" className={`${prefixCls}-skeleton`}>
                     {weekDay.map(each => {
                         const { date, dayString, isToday, isSameMonth, isWeekend, month, ind } = each;
                         const listCls = cls({
@@ -341,7 +342,7 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
                         });
                         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
                         const inner = (
-                            <li key={`${date}-weeksk`} className={listCls} onClick={e => this.handleClick(e, [date])}>
+                            <li role="gridcell" aria-label={date.toLocaleDateString()} aria-current={isToday ? "date" : false} key={`${date}-weeksk`} className={listCls} onClick={e => this.handleClick(e, [date])}>
                                 {this.formatDayString(month, dayString)}
                                 {this.renderCusDateGrid(date)}
                             </li>
@@ -362,8 +363,8 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
     renderMonthGrid = () => {
         const { parsedEvents } = this.state;
         return (
-            <div role="gridcell" className={`${prefixCls}-week`}>
-                <ul className={`${prefixCls}-grid-col`}>
+            <div role="presentation" className={`${prefixCls}-week`}>
+                <ul role="presentation" className={`${prefixCls}-grid-col`}>
                     {Object.keys(this.monthlyData).map(weekInd =>
                         this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd])
                     )}
@@ -383,12 +384,12 @@ export default class monthCalendar extends BaseComponent<MonthCalendarProps, Mon
         return (
             <LocaleConsumer componentName="Calendar">
                 {(locale: Locale['Calendar'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => (
-                    <div className={monthCls} key={this.state.itemLimit} style={monthStyle}>
-                        <div className={`${prefixCls}-sticky-top`}>
+                    <div role="grid" className={monthCls} key={this.state.itemLimit} style={monthStyle}>
+                        <div role="presentation" className={`${prefixCls}-sticky-top`}>
                             {header}
                             {this.renderHeader(dateFnsLocale)}
                         </div>
-                        <div className={`${prefixCls}-grid-wrapper`}>
+                        <div role="presentation" className={`${prefixCls}-grid-wrapper`}>
                             {this.renderMonthGrid()}
                         </div>
                     </div>