From b32f9be5baa68e3fa07aeea63dd0f16df85c431a Mon Sep 17 00:00:00 2001 From: Farhan-emgage Date: Fri, 20 Aug 2021 12:39:06 +0530 Subject: [PATCH 1/8] fix: id:54606,54607 add accessibility label to button for empty button issue --- src/components/Button/Button.tsx | 6 +++++- src/components/Chip/Chip.tsx | 2 +- src/components/Pagination/Pagination.tsx | 2 ++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 8d1ce90ad..6bb2a67e9 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -8,6 +8,7 @@ import Icon, { Props as IconProps } from '../Icon'; import { BUTTON } from '../ThemeIdentifiers'; import * as baseTheme from './Button.scss'; +import VisuallyHidden from '../VisuallyHidden'; export type Size = 'slim' | 'large'; @@ -106,7 +107,10 @@ const button = ({ : null; const iconMarkup = icon - ? + ? + + {accessibilityLabel && {accessibilityLabel} || title && {title}} + : null; const childMarkup = children ? {children} : null; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index d38d98a16..0aed5ff1d 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -85,7 +85,7 @@ class Chip extends React.PureComponent { ); const isRemovable = removable && - ( ); diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index ca275ec27..f1b137491 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -204,6 +204,7 @@ class Pagination extends React.PureComponent { icon="chevronLeft" componentClass={theme.button} disabled={disableProp} + accessibilityLabel="Previous" /> ); } else if (iconType === 'next') { @@ -212,6 +213,7 @@ class Pagination extends React.PureComponent { icon="chevronRight" componentClass={theme.button} disabled={disableProp} + accessibilityLabel="Next" /> ); } From 3a72ec01628a4ac52ba85f584ed83f34641588ca Mon Sep 17 00:00:00 2001 From: Farhan-emgage Date: Fri, 20 Aug 2021 13:01:20 +0530 Subject: [PATCH 2/8] add accssesibility props to pagination --- src/components/Pagination/Pagination.tsx | 6 +++++- src/components/VisuallyHidden/VisuallyHidden.tsx | 5 +++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index f1b137491..3e33034d6 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -15,7 +15,7 @@ import * as baseTheme from './Pagination.scss'; import Label from '../Label'; import Icon from '../Icon'; import Select from '../Select'; - +import VisuallyHidden from '../VisuallyHidden'; const MAX_PAGER_BUTTONS = 7; interface IProps { @@ -1037,12 +1037,15 @@ class Pagination extends React.PureComponent { ); return ( + <> + Pagination
    {!isHideOnSinglePage && !simplePagination && ( <> @@ -1100,6 +1103,7 @@ class Pagination extends React.PureComponent { {this.renderSimplePagination()}
+ ); } } diff --git a/src/components/VisuallyHidden/VisuallyHidden.tsx b/src/components/VisuallyHidden/VisuallyHidden.tsx index 0010fe3fb..08cb51262 100755 --- a/src/components/VisuallyHidden/VisuallyHidden.tsx +++ b/src/components/VisuallyHidden/VisuallyHidden.tsx @@ -8,11 +8,12 @@ export interface Props { children?: React.ReactNode; // Theme to be injected via css-themr. theme?: any; + componentId?:any; } -const visuallyHidden = ({ children, theme }: Props) => { +const visuallyHidden = ({ children, theme, componentId }: Props) => { return ( - {children} + {children} ); }; From e7cd6a8805c723d8d299912c52c6da302c552862 Mon Sep 17 00:00:00 2001 From: Farhan-emgage Date: Mon, 23 Aug 2021 08:35:25 +0530 Subject: [PATCH 3/8] fix: id:54700 color changes to lable for read and edit format --- themes/Delicious/Select.scss | 2 +- themes/Delicious/TextField.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/Delicious/Select.scss b/themes/Delicious/Select.scss index e5394b313..ddbd9a30d 100755 --- a/themes/Delicious/Select.scss +++ b/themes/Delicious/Select.scss @@ -134,5 +134,5 @@ $input-horizontal-padding: spacing(tighter) * 1.5; } .labelDisabled { - color: theme-color(m-grey, 500); + color: theme-color(m-grey, 700); } diff --git a/themes/Delicious/TextField.scss b/themes/Delicious/TextField.scss index 600daa561..e765a08d0 100644 --- a/themes/Delicious/TextField.scss +++ b/themes/Delicious/TextField.scss @@ -158,7 +158,7 @@ $spinner-size: rem(20px); } .labelDisabled { - color: theme-color(m-grey, 500); + color: theme-color(m-grey, 700); } .labelHidden { From 26d5c39229e7fcaae2fad324f67f057494844da7 Mon Sep 17 00:00:00 2001 From: Farhan-emgage Date: Mon, 23 Aug 2021 11:58:22 +0530 Subject: [PATCH 4/8] changes in button component --- src/components/Button/Button.tsx | 3 ++- src/components/Chip/Chip.tsx | 4 ++-- src/components/Pagination/Pagination.tsx | 2 ++ 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 6bb2a67e9..857467312 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -106,10 +106,11 @@ const button = ({ ? : null; + const titleOrAccesibility = title || accessibilityLabel; const iconMarkup = icon ? - {accessibilityLabel && {accessibilityLabel} || title && {title}} + {titleOrAccesibility && {titleOrAccesibility}} : null; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0aed5ff1d..1868d8a37 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -73,7 +73,7 @@ class Chip extends React.PureComponent { const chipTextComponent = ( {(firstIconComponent || label) && - @@ -85,7 +85,7 @@ class Chip extends React.PureComponent { ); const isRemovable = removable && - ( ); diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 3e33034d6..beaf05f49 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -205,6 +205,7 @@ class Pagination extends React.PureComponent { componentClass={theme.button} disabled={disableProp} accessibilityLabel="Previous" + title="Previous" /> ); } else if (iconType === 'next') { @@ -214,6 +215,7 @@ class Pagination extends React.PureComponent { componentClass={theme.button} disabled={disableProp} accessibilityLabel="Next" + title="Next" /> ); } From 7b73c630d85a085f54492609cda6edfe26726329 Mon Sep 17 00:00:00 2001 From: Automated VSTS Build Server Date: Mon, 23 Aug 2021 15:56:20 +0000 Subject: [PATCH 5/8] chore: Release --- types/src/components/VisuallyHidden/VisuallyHidden.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/src/components/VisuallyHidden/VisuallyHidden.d.ts b/types/src/components/VisuallyHidden/VisuallyHidden.d.ts index a24b0eacc..57d6b5752 100644 --- a/types/src/components/VisuallyHidden/VisuallyHidden.d.ts +++ b/types/src/components/VisuallyHidden/VisuallyHidden.d.ts @@ -3,6 +3,7 @@ import { ThemedComponentClass } from '@friendsofreactjs/react-css-themr'; export interface Props { children?: React.ReactNode; theme?: any; + componentId?: any; } declare const _default: ThemedComponentClass; export default _default; From 4c2f64562978841d89e4f377522790cb13c5de1a Mon Sep 17 00:00:00 2001 From: Farhan-emgage Date: Wed, 25 Aug 2021 07:26:49 +0530 Subject: [PATCH 6/8] fix: id:54606 remove visuallyhidden and add title in login component --- src/components/Login/Login.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx index eba2b22a4..caa267111 100644 --- a/src/components/Login/Login.tsx +++ b/src/components/Login/Login.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import Button from '../Button'; import Dropdown from '../Dropdown'; import Image from '../Image'; -import VisuallyHidden from '../VisuallyHidden'; import * as baseTheme from './Login.scss'; import { Props as DropdownItemProps } from '../Dropdown/DropdownItem'; @@ -79,7 +78,7 @@ export default (props: Props) => { return ( props.isLoggedIn ?
- {!props.profilePic ? + {!props.profilePic ? : toggle(e)} className={baseTheme.profilePic} alt="User profile pic" source={props.profilePic} />} { preferredAlignment="right" preferredPosition="below" /> -
: + : ); }; From e4fcfc2821b3e42331ac359b0ee3890b4dc1fd29 Mon Sep 17 00:00:00 2001 From: Farhan-emgage Date: Wed, 25 Aug 2021 08:52:11 +0530 Subject: [PATCH 7/8] fix: id:54617 content item button popover alignment in small screen --- src/components/Table/RowAction.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Table/RowAction.tsx b/src/components/Table/RowAction.tsx index fa8f5b6f1..6d8a2c2b0 100644 --- a/src/components/Table/RowAction.tsx +++ b/src/components/Table/RowAction.tsx @@ -10,7 +10,6 @@ import Dropdown from '../Dropdown'; import * as baseTheme from './Table.scss'; import * as Expression from './expression'; -import VisuallyHidden from '../VisuallyHidden'; interface ExpressionFunction { (data: any, config: any): boolean; @@ -83,9 +82,8 @@ class RowAction extends React.PureComponent { return ( validActionConfigs && validActionConfigs.length > 0 ? -
- Date: Wed, 25 Aug 2021 14:04:51 +0530 Subject: [PATCH 8/8] fix: id:54614 Add hidden text in more action colum header in table --- src/components/Button/Button.tsx | 2 +- src/components/NoData/NoData.tsx | 2 +- src/components/Table/Table.tsx | 17 +++++++++-------- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 857467312..0d8e4879a 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -106,7 +106,7 @@ const button = ({ ? : null; - const titleOrAccesibility = title || accessibilityLabel; + const titleOrAccesibility = title || accessibilityLabel; const iconMarkup = icon ? diff --git a/src/components/NoData/NoData.tsx b/src/components/NoData/NoData.tsx index 06d91c781..b7f0f9671 100644 --- a/src/components/NoData/NoData.tsx +++ b/src/components/NoData/NoData.tsx @@ -51,7 +51,7 @@ const NoData = ({ }
- ); + ); }; export default themr(NODATA, baseTheme)(NoData) as ThemedComponentClass; diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 72aabaad0..f369a1be7 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -18,6 +18,7 @@ import NoData from '../NoData'; import { ColumnConfig, FilterConfig, NestedChild, SortState, ServerSort } from './interface'; import * as baseTheme from './Table.scss'; import Spinner from '../Spinner'; +import VisuallyHidden from '../VisuallyHidden'; export type RowSelection = 'checkbox' | 'radio'; export type SortOrder = 'asc' | 'desc'; @@ -301,7 +302,7 @@ class Table extends React.PureComponent { ); }) } - { rowAction && !rowActionLeft && } + { rowAction && !rowActionLeft && More Options} ); @@ -314,19 +315,19 @@ class Table extends React.PureComponent { noDataInSearchLabel = 'No matches found' } = this.props; if (isSearching) { - return ( + return ( - ) - } else { + ); + } return ( - ) - } + ); + } // Function to render tbody & td with specifc data & if user passed any custom component that can also get rendered renderBody = () => { - const { children, + const { children, column, expandingRowId = [], hideRow, rowAction, @@ -342,7 +343,7 @@ class Table extends React.PureComponent { // : { - + data.map((item: any, index: number) => { if (!this.props.hideRow || !this.hideRow(item)) { return this.renderTbodyRows(item, index);