Skip to content

Commit a5074e7

Browse files
JialeclJialecl
authored
Merge pull request #1366 from dxc-technology/gomezivann-checkbox-tickFix
Fix Checkbox tick with sticky positioning
2 parents 49081f0 + aa15042 commit a5074e7

File tree

2 files changed

+92
-72
lines changed

2 files changed

+92
-72
lines changed

‎lib/src/checkbox/Checkbox.stories.tsx‎

Lines changed: 79 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
44
import Title from "../../.storybook/components/Title";
55
import ExampleContainer from "../../.storybook/components/ExampleContainer";
66
import DarkContainer from "../../.storybook/components/DarkSection";
7-
import { userEvent } from "@storybook/testing-library";
7+
import styled from "styled-components";
88

99
export default {
1010
title: "Checkbox",
@@ -17,29 +17,33 @@ const Checkbox = () => (
1717
<Title title="Default" theme="light" level={4} />
1818
<DxcCheckbox label="Checkbox" />
1919
</ExampleContainer>
20-
<ExampleContainer>
21-
<Title title="Focused" theme="light" level={4} />
22-
<DxcCheckbox label="Focused" />
23-
</ExampleContainer>
2420
<ExampleContainer>
2521
<Title title="Checked" theme="light" level={4} />
2622
<DxcCheckbox label="Checkbox" defaultChecked />
2723
</ExampleContainer>
2824
<ExampleContainer>
29-
<Title title="Optional" theme="light" level={4} />
30-
<DxcCheckbox label="Checkbox" optional />
25+
<Title title="Disabled" theme="light" level={4} />
26+
<DxcCheckbox label="Checkbox" disabled />
3127
</ExampleContainer>
3228
<ExampleContainer>
33-
<Title title="Disabled and checked" theme="light" level={4} />
34-
<DxcCheckbox label="Checkbox" disabled defaultChecked />
29+
<Title title="Disabled, checked and optional" theme="light" level={4} />
30+
<DxcCheckbox label="Checkbox" disabled defaultChecked optional />
3531
</ExampleContainer>
36-
<ExampleContainer>
37-
<Title title="Disabled and optional" theme="light" level={4} />
38-
<DxcCheckbox label="Checkbox" disabled optional />
32+
<ExampleContainer pseudoState="pseudo-focus">
33+
<Title title="Focused" theme="light" level={4} />
34+
<DxcCheckbox label="Focused" />
35+
</ExampleContainer>
36+
<ExampleContainer pseudoState="pseudo-hover">
37+
<Title title="Hovered" theme="light" level={4} />
38+
<DxcCheckbox label="Hovered" />
39+
</ExampleContainer>
40+
<ExampleContainer pseudoState="pseudo-hover">
41+
<Title title="Hovered and checked" theme="light" level={4} />
42+
<DxcCheckbox label="Hovered" defaultChecked />
3943
</ExampleContainer>
4044
<ExampleContainer>
41-
<Title title="Disabled, optional and checked" theme="light" level={4} />
42-
<DxcCheckbox label="Checkbox" disabled optional defaultChecked />
45+
<Title title="Optional" theme="light" level={4} />
46+
<DxcCheckbox label="Checkbox" optional />
4347
</ExampleContainer>
4448
<ExampleContainer>
4549
<Title title="Label after" theme="light" level={4} />
@@ -53,25 +57,9 @@ const Checkbox = () => (
5357
<Title title="Optional with label after" theme="light" level={4} />
5458
<DxcCheckbox label="Checkbox" optional labelPosition="after" />
5559
</ExampleContainer>
56-
<ExampleContainer>
57-
<Title title="Disabled and checked with label after" theme="light" level={4} />
58-
<DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
59-
</ExampleContainer>
6060
<ExampleContainer>
6161
<Title title="Disabled and optional with label after" theme="light" level={4} />
62-
<DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
63-
</ExampleContainer>
64-
<ExampleContainer>
65-
<Title title="Disabled, optional and checked with label after" theme="light" level={4} />
66-
<DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
67-
</ExampleContainer>
68-
<ExampleContainer pseudoState="pseudo-hover">
69-
<Title title="Hovered" theme="light" level={4} />
70-
<DxcCheckbox label="Hovered" />
71-
</ExampleContainer>
72-
<ExampleContainer pseudoState="pseudo-hover">
73-
<Title title="Hovered and checked" theme="light" level={4} />
74-
<DxcCheckbox label="Hovered" defaultChecked />
62+
<DxcCheckbox label="Checkbox" disabled labelPosition="after" optional />
7563
</ExampleContainer>
7664
<BackgroundColorProvider color="#333333">
7765
<DarkContainer>
@@ -84,20 +72,28 @@ const Checkbox = () => (
8472
<DxcCheckbox label="Checkbox" defaultChecked />
8573
</ExampleContainer>
8674
<ExampleContainer>
87-
<Title title="Optional" theme="dark" level={4} />
88-
<DxcCheckbox label="Checkbox" optional />
75+
<Title title="Disabled" theme="dark" level={4} />
76+
<DxcCheckbox label="Checkbox" disabled />
8977
</ExampleContainer>
9078
<ExampleContainer>
91-
<Title title="Disabled and checked" theme="dark" level={4} />
92-
<DxcCheckbox label="Checkbox" disabled defaultChecked />
79+
<Title title="Disabled, checked and optional" theme="dark" level={4} />
80+
<DxcCheckbox label="Checkbox" disabled defaultChecked optional />
9381
</ExampleContainer>
94-
<ExampleContainer>
95-
<Title title="Disabled and optional" theme="dark" level={4} />
96-
<DxcCheckbox label="Checkbox" disabled optional />
82+
<ExampleContainer pseudoState="pseudo-focus">
83+
<Title title="Focused" theme="dark" level={4} />
84+
<DxcCheckbox label="Focused" />
85+
</ExampleContainer>
86+
<ExampleContainer pseudoState="pseudo-hover">
87+
<Title title="Hovered" theme="dark" level={4} />
88+
<DxcCheckbox label="Hovered" />
89+
</ExampleContainer>
90+
<ExampleContainer pseudoState="pseudo-hover">
91+
<Title title="Hovered and checked" theme="dark" level={4} />
92+
<DxcCheckbox label="Hovered" defaultChecked />
9793
</ExampleContainer>
9894
<ExampleContainer>
99-
<Title title="Disabled, optional and checked" theme="dark" level={4} />
100-
<DxcCheckbox label="Checkbox" disabled optional defaultChecked />
95+
<Title title="Optional" theme="dark" level={4} />
96+
<DxcCheckbox label="Checkbox" optional />
10197
</ExampleContainer>
10298
<ExampleContainer>
10399
<Title title="Label after" theme="dark" level={4} />
@@ -111,25 +107,9 @@ const Checkbox = () => (
111107
<Title title="Optional with label after" theme="dark" level={4} />
112108
<DxcCheckbox label="Checkbox" optional labelPosition="after" />
113109
</ExampleContainer>
114-
<ExampleContainer>
115-
<Title title="Disabled and checked with label after" theme="dark" level={4} />
116-
<DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
117-
</ExampleContainer>
118110
<ExampleContainer>
119111
<Title title="Disabled and optional with label after" theme="dark" level={4} />
120-
<DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
121-
</ExampleContainer>
122-
<ExampleContainer>
123-
<Title title="Disabled, optional and checked with label after" theme="dark" level={4} />
124-
<DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
125-
</ExampleContainer>
126-
<ExampleContainer pseudoState="pseudo-hover">
127-
<Title title="Hovered" theme="dark" level={4} />
128-
<DxcCheckbox label="Hovered" />
129-
</ExampleContainer>
130-
<ExampleContainer pseudoState="pseudo-hover">
131-
<Title title="Hovered and checked" theme="dark" level={4} />
132-
<DxcCheckbox label="Hovered" defaultChecked />
112+
<DxcCheckbox label="Checkbox" disabled labelPosition="after" optional />
133113
</ExampleContainer>
134114
</DarkContainer>
135115
</BackgroundColorProvider>
@@ -178,11 +158,51 @@ const Checkbox = () => (
178158
<Title title="Xxlarge" theme="light" level={4} />
179159
<DxcCheckbox label="Xxlarge" margin="xxlarge" />
180160
</ExampleContainer>
161+
<ExampleContainer>
162+
<Title title="Overflow container" theme="light" level={4} />
163+
<ScrollableContainer id="scroll-container">
164+
<DxcCheckbox label="Checkbox" defaultChecked />
165+
<DxcCheckbox label="Checkbox" defaultChecked />
166+
<DxcCheckbox label="Checkbox" />
167+
<DxcCheckbox label="Checkbox" defaultChecked />
168+
<DxcCheckbox label="Checkbox" />
169+
<DxcCheckbox label="Checkbox" />
170+
<DxcCheckbox label="Checkbox" />
171+
<DxcCheckbox label="Checkbox" defaultChecked />
172+
</ScrollableContainer>
173+
</ExampleContainer>
174+
<ExampleContainer>
175+
<Title title="Label overflow" theme="light" level={4} />
176+
<SmallContainer>
177+
<DxcCheckbox label="Very long label to check its overflowing" defaultChecked />
178+
<DxcCheckbox label="Very long label to check its overflowing" labelPosition="after" />
179+
</SmallContainer>
180+
</ExampleContainer>
181181
</>
182182
);
183183

184184
export const Chromatic = Checkbox.bind({});
185+
185186
Chromatic.play = async () => {
186-
await userEvent.tab();
187-
await userEvent.tab();
187+
const listEl = document.getElementById("scroll-container");
188+
listEl?.scrollTo?.({ top: 50 });
188189
};
190+
191+
const ScrollableContainer = styled.div`
192+
display: flex;
193+
flex-direction: column;
194+
gap: 14px;
195+
width: 200px;
196+
height: 200px;
197+
border: 1px solid #000;
198+
padding: 14px;
199+
overflow: auto;
200+
`;
201+
202+
const SmallContainer = styled.div`
203+
display: flex;
204+
flex-direction: column;
205+
gap: 14px;
206+
width: 150px;
207+
height: 150px;
208+
`;

‎lib/src/checkbox/Checkbox.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const getDisabledColor = (props, element) => {
141141
}
142142
};
143143

144-
const getNotDisabledColor = (props, element) => {
144+
const getEnabledColor = (props, element) => {
145145
switch (element) {
146146
case "check":
147147
return props.backgroundType && props.backgroundType === "dark"
@@ -175,7 +175,7 @@ type LabelContainerPropsType = {
175175
backgroundType: "dark" | "light";
176176
};
177177
const LabelContainer = styled.span<LabelContainerPropsType>`
178-
color: ${(props) => (props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label"))};
178+
color: ${(props) => (props.disabled ? getDisabledColor(props, "label") : getEnabledColor(props, "label"))};
179179
font-family: ${(props) => props.theme.fontFamily};
180180
font-size: ${(props) => props.theme.fontSize};
181181
font-weight: ${(props) => props.theme.fontWeight};
@@ -199,23 +199,23 @@ type CheckboxInputPropsType = {
199199
disabled: boolean;
200200
};
201201
const Checkbox = styled.span<CheckboxInputPropsType>`
202+
position: relative;
202203
box-sizing: border-box;
203204
display: flex;
204205
align-items: center;
205206
justify-content: center;
206207
height: 18px;
207208
width: 18px;
208-
border: solid 2px
209-
${(props) => (props.disabled ? getDisabledColor(props, "border") : getNotDisabledColor(props, "border"))};
209+
border: 2px solid
210+
${(props) => (props.disabled ? getDisabledColor(props, "border") : getEnabledColor(props, "border"))};
210211
border-radius: 2px;
211212
background-color: ${(props) =>
212213
props.checked
213214
? props.disabled
214215
? getDisabledColor(props, "check")
215-
: getNotDisabledColor(props, "check")
216+
: getEnabledColor(props, "check")
216217
: "transparent"};
217-
color: ${(props) =>
218-
props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background")};
218+
color: ${(props) => (props.disabled ? getDisabledColor(props, "background") : getEnabledColor(props, "background"))};
219219
220220
&:focus {
221221
outline: 2px solid
@@ -238,6 +238,9 @@ type MainContainerPropsType = {
238238
backgroundType: "dark" | "light";
239239
};
240240
const MainContainer = styled.div<MainContainerPropsType>`
241+
display: inline-flex;
242+
align-items: center;
243+
gap: ${(props) => props.theme.checkLabelSpacing};
241244
width: ${(props) => calculateWidth(props.margin, props.size)};
242245
margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
243246
margin-top: ${(props) =>
@@ -249,22 +252,19 @@ const MainContainer = styled.div<MainContainerPropsType>`
249252
margin-left: ${(props) =>
250253
props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
251254
252-
display: inline-flex;
253-
align-items: center;
254255
cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
255-
gap: ${(props) => props.theme.checkLabelSpacing};
256256
257257
&:hover ${Checkbox} {
258258
border: 2px solid
259-
${(props) => (props.disabled ? getDisabledColor(props, "border") : getNotDisabledColor(props, "hoverBorder"))};
259+
${(props) => (props.disabled ? getDisabledColor(props, "border") : getEnabledColor(props, "hoverBorder"))};
260260
background-color: ${(props) =>
261261
props.checked
262262
? props.disabled
263263
? getDisabledColor(props, "check")
264-
: getNotDisabledColor(props, "check")
264+
: getEnabledColor(props, "check")
265265
: "transparent"};
266266
color: ${(props) =>
267-
props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "hoverBackground")};
267+
props.disabled ? getDisabledColor(props, "background") : getEnabledColor(props, "hoverBackground")};
268268
}
269269
`;
270270

0 commit comments

Comments
 (0)