Skip to content
This repository was archived by the owner on Feb 23, 2022. It is now read-only.

CEM-2507_Chair Highlight #373

Open
Yurii-Zhuk wants to merge 13 commits into
base: master
Choose a base branch
from
Open

CEM-2507_Chair Highlight #373

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5808cd3
Add CSS boarder when chair is in focus. Add new atributes isFocusActi…
Yurii-Zhuk Oct 16, 2021
e820143
Fix bag and add comment
Yurii-Zhuk Oct 16, 2021
653914d
Since new parameter tabIndex was added to the IChair interface, modif…
Yurii-Zhuk Oct 16, 2021
f26beeb
Move CSS :focus from BaseChair to the Props passed to Modify the CSS
Yurii-Zhuk Oct 16, 2021
9f65e21
In IChair interface rename tabIndex variable to ChairTabIndexAtribute
Yurii-Zhuk Oct 16, 2021
daddd93
Make ChairTabIndexAtribute lowercase
Yurii-Zhuk Oct 16, 2021
82a4238
Set chairTabIndexAtribute=0 instead 1
Yurii-Zhuk Oct 16, 2021
eecaf5a
Change the name tabIndex to chairTabIndexAtribute while creating chai…
Yurii-Zhuk Oct 16, 2021
8fa0b37
Remove isFocusActive and parameter and chairTabIndexAtribute as redun…
Yurii-Zhuk Oct 20, 2021
df51d38
Remove setting chairTabIndexAtribute for each chair, since such param…
Yurii-Zhuk Oct 20, 2021
e4ff32d
Use useState instead of CSS property focus to highlight the chair
Yurii-Zhuk Oct 23, 2021
7c47d60
delete chairTabIndexAtribute from Chair parameters
Yurii-Zhuk Oct 23, 2021
39b65eb
Delete comented (unused) code
Yurii-Zhuk Oct 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion src/Containers/Chair/Chair.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,11 @@ export interface IChair {
chairIndex: number,
selectedIndex: number,
) => void;

/**
* Number for Chair global atribute which indicates that its element can be focused
*/
chairTabIndexAtribute: number;
}

/**
Expand All @@ -86,6 +91,7 @@ export const Chair: React.FC<IChair> = ({
tableIndex = -1,
chairIndex = -1,
selectedIndex = -1,
chairTabIndexAtribute= 0,
onChairClick,
...props
}) => {
Expand All @@ -101,6 +107,8 @@ export const Chair: React.FC<IChair> = ({
isSeated={isSeated}
tableUse={tableUse}
isVisible={isVisible}
isFocusActive={true}
tabIndex={chairTabIndexAtribute}
>
{getChairText()}
</RoundChair>
Expand All @@ -120,6 +128,8 @@ export const Chair: React.FC<IChair> = ({
position={position}
tableUse={tableUse}
isVisible={isVisible}
isFocusActive={true}
tabIndex={chairTabIndexAtribute}
>
{getChairText()}
</RectangleChair>
Expand Down Expand Up @@ -189,7 +199,7 @@ export const Chair: React.FC<IChair> = ({
onClick={onHandleClick}
onKeyPress={onHandleClick}
role="button"
tabIndex={0}
tabIndex={chairTabIndexAtribute}
>
{isRound ? getRoundChair() : getPositionChair()}
</ChairWrapperForClick>
Expand Down Expand Up @@ -399,6 +409,7 @@ interface IBaseChair {
isSeated: boolean;
tableUse: tableUseTypes;
isVisible: boolean;
isFocusActive: boolean;
}

const BaseChair = styled.div<IBaseChair>`
Expand All @@ -422,6 +433,9 @@ const RoundChair = styled(BaseChair)<Pick<IChair, 'relativeSize'>>`
relativeSize * BASE_BORDER_WIDTH_FOR_ROUND_CHAIR
}px solid black;`;
}}
&:focus {
box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')};
}
`;

const RectangleChair = styled(BaseChair)<
Expand All @@ -434,6 +448,9 @@ const RectangleChair = styled(BaseChair)<
left: VerticalChairStyle,
right: VerticalChairStyle,
}[position])};
&:focus {
box-shadow: ${({ isFocusActive }) => (isFocusActive ? '0 0 0 2px' : '')};
}
`;

const RectangleChairText = styled.div<
Expand Down
15 changes: 15 additions & 0 deletions src/Containers/CircleTable/CircleTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -68,6 +69,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -81,6 +83,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -94,6 +97,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -107,6 +111,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -120,6 +125,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -133,6 +139,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -146,6 +153,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -159,6 +167,7 @@ FourTopTable.args = {
chairIndex: 0,
tableIndex: 0,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
],
Expand Down Expand Up @@ -188,6 +197,7 @@ TableForEditDraggableCanvas.args = {
chairIndex: 1,
tableIndex: 2,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -201,6 +211,7 @@ TableForEditDraggableCanvas.args = {
chairIndex: 1,
tableIndex: 2,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -214,6 +225,7 @@ TableForEditDraggableCanvas.args = {
chairIndex: 2,
tableIndex: 2,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -227,6 +239,7 @@ TableForEditDraggableCanvas.args = {
chairIndex: 3,
tableIndex: 2,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -240,6 +253,7 @@ TableForEditDraggableCanvas.args = {
chairIndex: 4,
tableIndex: 2,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
{
Expand All @@ -253,6 +267,7 @@ TableForEditDraggableCanvas.args = {
chairIndex: 5,
tableIndex: 2,
selectedIndex: 3,
tabIndex: 1,
onChairClick: handleOnChairClick,
},
],
Expand Down
1 change: 1 addition & 0 deletions src/Containers/CircleTable/CircleTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export const CircleTable: React.FC<ICircleTable> = ({
chairIndex={index}
selectedIndex={selectedIndex}
onChairClick={onChairClick}
chairTabIndexAtribute={item.chairTabIndexAtribute}
/>
</ChairWrapper>
));
Expand Down
Loading