Skip to content

Commit 891fd5a

Browse files
GomezIvannGomezIvann
GomezIvann
authored and
GomezIvann
committed
Fix Checkbox tick sticky positioning
1 parent 47ce41d commit 891fd5a

File tree

2 files changed

+88
-80
lines changed

2 files changed

+88
-80
lines changed

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

Lines changed: 75 additions & 67 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>
3329
<Title title="Disabled and checked" theme="light" level={4} />
3430
<DxcCheckbox label="Checkbox" disabled defaultChecked />
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,26 +57,6 @@ 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>
60-
<ExampleContainer>
61-
<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 />
75-
</ExampleContainer>
7660
<BackgroundColorProvider color="#333333">
7761
<DarkContainer>
7862
<ExampleContainer>
@@ -84,44 +68,16 @@ const Checkbox = () => (
8468
<DxcCheckbox label="Checkbox" defaultChecked />
8569
</ExampleContainer>
8670
<ExampleContainer>
87-
<Title title="Optional" theme="dark" level={4} />
88-
<DxcCheckbox label="Checkbox" optional />
71+
<Title title="Disabled" theme="dark" level={4} />
72+
<DxcCheckbox label="Checkbox" disabled />
8973
</ExampleContainer>
9074
<ExampleContainer>
9175
<Title title="Disabled and checked" theme="dark" level={4} />
9276
<DxcCheckbox label="Checkbox" disabled defaultChecked />
9377
</ExampleContainer>
94-
<ExampleContainer>
95-
<Title title="Disabled and optional" theme="dark" level={4} />
96-
<DxcCheckbox label="Checkbox" disabled optional />
97-
</ExampleContainer>
98-
<ExampleContainer>
99-
<Title title="Disabled, optional and checked" theme="dark" level={4} />
100-
<DxcCheckbox label="Checkbox" disabled optional defaultChecked />
101-
</ExampleContainer>
102-
<ExampleContainer>
103-
<Title title="Label after" theme="dark" level={4} />
104-
<DxcCheckbox label="Checkbox" labelPosition="after" />
105-
</ExampleContainer>
106-
<ExampleContainer>
107-
<Title title="Checked with label after" theme="dark" level={4} />
108-
<DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
109-
</ExampleContainer>
110-
<ExampleContainer>
111-
<Title title="Optional with label after" theme="dark" level={4} />
112-
<DxcCheckbox label="Checkbox" optional labelPosition="after" />
113-
</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>
118-
<ExampleContainer>
119-
<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" />
78+
<ExampleContainer pseudoState="pseudo-focus">
79+
<Title title="Focused" theme="dark" level={4} />
80+
<DxcCheckbox label="Focused" />
12581
</ExampleContainer>
12682
<ExampleContainer pseudoState="pseudo-hover">
12783
<Title title="Hovered" theme="dark" level={4} />
@@ -131,6 +87,18 @@ const Checkbox = () => (
13187
<Title title="Hovered and checked" theme="dark" level={4} />
13288
<DxcCheckbox label="Hovered" defaultChecked />
13389
</ExampleContainer>
90+
<ExampleContainer>
91+
<Title title="Optional" theme="dark" level={4} />
92+
<DxcCheckbox label="Checkbox" optional />
93+
</ExampleContainer>
94+
<ExampleContainer>
95+
<Title title="Label after" theme="dark" level={4} />
96+
<DxcCheckbox label="Checkbox" labelPosition="after" />
97+
</ExampleContainer>
98+
<ExampleContainer>
99+
<Title title="Optional checked with label after" theme="dark" level={4} />
100+
<DxcCheckbox label="Checkbox" defaultChecked optional labelPosition="after" />
101+
</ExampleContainer>
134102
</DarkContainer>
135103
</BackgroundColorProvider>
136104
<Title title="Sizes" theme="light" level={2} />
@@ -178,11 +146,51 @@ const Checkbox = () => (
178146
<Title title="Xxlarge" theme="light" level={4} />
179147
<DxcCheckbox label="Xxlarge" margin="xxlarge" />
180148
</ExampleContainer>
149+
<ExampleContainer>
150+
<Title title="Overflow container" theme="light" level={4} />
151+
<ScrollableContainer id="scroll-container">
152+
<DxcCheckbox label="Checkbox" defaultChecked />
153+
<DxcCheckbox label="Checkbox" defaultChecked />
154+
<DxcCheckbox label="Checkbox" />
155+
<DxcCheckbox label="Checkbox" defaultChecked />
156+
<DxcCheckbox label="Checkbox" />
157+
<DxcCheckbox label="Checkbox" />
158+
<DxcCheckbox label="Checkbox" />
159+
<DxcCheckbox label="Checkbox" defaultChecked />
160+
</ScrollableContainer>
161+
</ExampleContainer>
162+
<ExampleContainer>
163+
<Title title="Label overflow" theme="light" level={4} />
164+
<SmallContainer>
165+
<DxcCheckbox label="Very long label to check its overflowing" defaultChecked />
166+
<DxcCheckbox label="Very long label to check its overflowing" labelPosition="after" />
167+
</SmallContainer>
168+
</ExampleContainer>
181169
</>
182170
);
183171

184172
export const Chromatic = Checkbox.bind({});
173+
185174
Chromatic.play = async () => {
186-
await userEvent.tab();
187-
await userEvent.tab();
175+
const listEl = document.getElementById("scroll-container");
176+
listEl?.scrollTo?.({ top: 50 });
188177
};
178+
179+
const ScrollableContainer = styled.div`
180+
display: flex;
181+
flex-direction: column;
182+
gap: 14px;
183+
width: 200px;
184+
height: 200px;
185+
border: 1px solid #000;
186+
padding: 14px;
187+
overflow: auto;
188+
`;
189+
190+
const SmallContainer = styled.div`
191+
display: flex;
192+
flex-direction: column;
193+
gap: 14px;
194+
width: 150px;
195+
height: 150px;
196+
`;

‎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)