Skip to content

Commit 1cddcb8

Browse files
aum-derivaum-deriv
committed
Merge branch 'main' of github.com:deriv-com/ui into aum/FEQ-1654/pagelayout-improvements-remove-right-content-flex
2 parents 052882b + ab4c127 commit 1cddcb8

21 files changed

+970
-252
lines changed

‎CHANGELOG.md

+68
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,71 @@
1+
## [1.1.7](https://github.com/deriv-com/ui/compare/v1.1.6...v1.1.7) (2024-02-02)
2+
3+
4+
### ♻️ Chores
5+
6+
* adding storybook to input component ([11b0228](https://github.com/deriv-com/ui/commit/11b0228571db1e1d8f447fd61f0a51e618396f7d))
7+
8+
9+
### 🐛 Bug Fixes
10+
11+
* added style type back inside of input component ([fd763aa](https://github.com/deriv-com/ui/commit/fd763aa85acf958a9ae76e699d791398eda016bf))
12+
* stylings for helper message and input variants ([dd8f65e](https://github.com/deriv-com/ui/commit/dd8f65eb1a145a74030db72df10e7a822492786c))
13+
14+
## [1.1.6](https://github.com/deriv-com/ui/compare/v1.1.5...v1.1.6) (2024-02-02)
15+
16+
17+
### ♻️ Chores
18+
19+
* made improvements to Tooltip and Text component ([6ecb236](https://github.com/deriv-com/ui/commit/6ecb23648445be2bec1459d7c32361a8d4e39c58))
20+
21+
## [1.1.5](https://github.com/deriv-com/ui/compare/v1.1.4...v1.1.5) (2024-02-01)
22+
23+
24+
### ♻️ Chores
25+
26+
* improve storybook for passwordinput ([3a35240](https://github.com/deriv-com/ui/commit/3a35240bdbfee869c16f3196c6d7f00b0d84ba7a))
27+
28+
29+
### 🐛 Bug Fixes
30+
31+
* change some of the types inside of PasswordInput ([c3726d9](https://github.com/deriv-com/ui/commit/c3726d958956fa31c00c4dd86d4f8198a026b966))
32+
33+
## [1.1.4](https://github.com/deriv-com/ui/compare/v1.1.3...v1.1.4) (2024-02-01)
34+
35+
36+
### ♻️ Chores
37+
38+
* added TitleFontSize to Tabs component ([d587cd1](https://github.com/deriv-com/ui/commit/d587cd17d977c0a2ddbdebe8ec8d36692726b488))
39+
* added TitleFontSize to Tabs component ([27ecfbb](https://github.com/deriv-com/ui/commit/27ecfbb229e35e5f11003b38ae3166dbe72a33cd))
40+
41+
## [1.1.3](https://github.com/deriv-com/ui/compare/v1.1.2...v1.1.3) (2024-02-01)
42+
43+
44+
### ♻️ Chores
45+
46+
* added Password Input field ([ae6ef49](https://github.com/deriv-com/ui/commit/ae6ef49eb83b838576a9d44b211080d6c3131afd))
47+
* added password meter colors, width and colors ([13b9d33](https://github.com/deriv-com/ui/commit/13b9d337e9922acc5ea4ca70a76cdb35be7df5de))
48+
* added Storybook for password input component ([5025c17](https://github.com/deriv-com/ui/commit/5025c17f6898186c4b1a0bfbac3ef184d82405ba))
49+
* import PasswordInput inside of main.ts ([af8378b](https://github.com/deriv-com/ui/commit/af8378bb8e49cf98bc07bf5991f020fbf2ab089e))
50+
* refactor PasswordMeter as a child component ([d6c382d](https://github.com/deriv-com/ui/commit/d6c382d3b85b0bb32bec747a505bdecbcd3a897d))
51+
52+
53+
### 🐛 Bug Fixes
54+
55+
* added helperMessage based on score ([8f43383](https://github.com/deriv-com/ui/commit/8f433839daa08431e531e9f2a3c45b30a682aa45))
56+
* added variants according to production ([12458ce](https://github.com/deriv-com/ui/commit/12458ced635b2400640ea2c5f92146cfa7f20ce4))
57+
* added warning variant inside for helperMessage ([97da93d](https://github.com/deriv-com/ui/commit/97da93d93047c6de1e01ce33fd47474bac1470f2))
58+
* change css for input ([6fdaad7](https://github.com/deriv-com/ui/commit/6fdaad794b1717b83c8f9fe47f985e17faf60b5e))
59+
* change types and added stylings to Input and PasswordInput ([35fea18](https://github.com/deriv-com/ui/commit/35fea18ed934157083c5f48dd0c6710b8b423493))
60+
61+
## [1.1.2](https://github.com/deriv-com/ui/compare/v1.1.1...v1.1.2) (2024-02-01)
62+
63+
64+
### 🐛 Bug Fixes
65+
66+
* exported missing components and hooks ([7471d04](https://github.com/deriv-com/ui/commit/7471d04183804c1d73c19f8184fe9b8349d8414c))
67+
* exported missing components and hooks ([87c5c85](https://github.com/deriv-com/ui/commit/87c5c85ee7a24d2d1da1062872fe23c1b01445d6))
68+
169
## [1.1.1](https://github.com/deriv-com/ui/compare/v1.1.0...v1.1.1) (2024-01-31)
270

371

‎lib/components/Input/HelperMessage.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
$inactive_color: #999999;
2+
$success_color: #4bb4b3;
3+
$warning_color: #ffad3a;
4+
$error_field: #ec3f3f;
5+
6+
.deriv-helper-message {
7+
font-size: 12px;
8+
font-style: normal;
9+
font-weight: 400;
10+
line-height: 18px;
11+
color: $inactive_color;
12+
&--general {
13+
color: $inactive_color;
14+
}
15+
&--success {
16+
color: $success_color;
17+
}
18+
&--warning {
19+
color: $warning_color;
20+
}
21+
&--error {
22+
color: $error_field;
23+
}
24+
}

‎lib/components/Input/HelperMessage.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import React, { ReactNode } from "react";
22
import clsx from "clsx";
33
import { InputVariants } from ".";
4-
import "./Input.scss";
4+
import "./HelperMessage.scss";
55

66
export interface HelperMessageProps {
77
error?: boolean;
88
message?: ReactNode;
99
variant?: InputVariants;
1010
disabled?: boolean;
1111
}
12-
13-
const MessageVariant: Record<InputVariants, string> = {
14-
general: "deriv-helper-message__general",
15-
success: "deriv-helper-message__success",
16-
error: "deriv-helper-message__error",
12+
type TMessageVariant = Exclude<InputVariants, "disabled">;
13+
const MessageVariant: Record<TMessageVariant, string> = {
14+
general: "deriv-helper-message--general",
15+
success: "deriv-helper-message--success",
16+
warning: "deriv-helper-message--warning",
17+
error: "deriv-helper-message--error",
1718
};
1819

1920
const HelperMessage = ({
@@ -25,7 +26,8 @@ const HelperMessage = ({
2526
<p
2627
className={clsx("deriv-helper-message", {
2728
[MessageVariant["general"]]: disabled,
28-
[MessageVariant[error ? "error" : variant]]: !disabled,
29+
[MessageVariant[error ? "error" : (variant as TMessageVariant)]]:
30+
!disabled,
2931
})}
3032
>
3133
{message}

‎lib/components/Input/Input.scss

+53-65
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,44 @@ $disabled_color: #d6d6d6;
22
$inactive_color: #999999;
33
$active_color: #85acb0;
44
$success_color: #4bb4b3;
5+
$warning_color: #ffad3a;
56
$error_field: #ec3f3f;
6-
$inactive_color: #999999;
77
$border: 1px solid;
88

99
.deriv-input {
10-
display: inline-block;
10+
display: inline-flex;
1111
position: relative;
12+
border-radius: 4px;
13+
width: 328px;
14+
box-sizing: border-box;
15+
text-align: left;
16+
padding: 10px 16px;
17+
border: $border;
18+
19+
&--general {
20+
border-color: $inactive_color;
21+
&:focus-within {
22+
border-color: $active_color;
23+
}
24+
}
25+
&--error {
26+
border-color: $error_field;
27+
}
28+
&--success {
29+
border-color: $success_color;
30+
}
31+
32+
&--active {
33+
border-color: $active_color;
34+
}
35+
36+
&--disabled {
37+
border-color: $disabled_color;
38+
}
1239

13-
&--field {
40+
&__field {
1441
width: 100%;
15-
padding: 10px 16px;
16-
outline: none;
17-
border-radius: 4px;
18-
width: 328px;
19-
box-sizing: border-box;
2042
outline: none;
21-
text-align: left;
22-
&:disabled {
23-
border: $border $disabled_color;
24-
color: $inactive_color;
25-
}
2643
&::placeholder {
2744
visibility: hidden;
2845
}
@@ -36,27 +53,9 @@ $border: 1px solid;
3653
height: fit-content;
3754
}
3855
}
39-
&__general {
40-
border: $border $inactive_color;
41-
&:focus {
42-
border: $border $active_color;
43-
}
44-
}
45-
&__error {
46-
border: $border $error_field;
47-
&:focus {
48-
border: $border $error_field;
49-
}
50-
}
51-
&__success {
52-
border: $border $success_color;
53-
&:focus {
54-
border: $border $success_color;
55-
}
56-
}
5756
}
5857

59-
&--label {
58+
&__label {
6059
display: inline-block;
6160
position: absolute;
6261
top: 0;
@@ -68,61 +67,50 @@ $border: 1px solid;
6867
text-transform: capitalize;
6968
transition: all 0.15s ease-out;
7069
padding: 0;
71-
&__general {
70+
&--general {
7271
color: $inactive_color;
7372
}
74-
&__error {
73+
&--error {
7574
color: $error_field;
7675
}
77-
&__success {
76+
&--success {
7877
color: $success_color;
7978
}
79+
&--active {
80+
color: $active_color;
81+
}
82+
83+
&--disabled {
84+
color: $disabled_color;
85+
}
8086
}
8187

82-
&--helper-message {
88+
&__helper-message {
89+
top: calc(100% + 2px);
8390
position: absolute;
8491
left: 16px;
85-
margin-top: 2px;
92+
line-height: 1;
8693
}
8794

88-
&--right-content {
89-
position: absolute;
90-
right: 16px;
91-
bottom: 25%;
95+
&__right-content {
96+
margin-left: 16px;
9297
}
9398
}
9499

95-
.deriv-input--field__general:disabled + .deriv-input--label,
96-
.deriv-input--field__error:disabled + .deriv-input--label,
97-
.deriv-input--field__success:disabled + .deriv-input--label {
98-
color: $inactive_color;
99-
cursor: not-allowed;
100+
.deriv-input--general .deriv-input__field:disabled + .deriv-input__label,
101+
.deriv-input--error .deriv-input__field:disabled + .deriv-input__label,
102+
.deriv-input--success .deriv-input__field:disabled + .deriv-input__label {
103+
color: $disabled_color;
100104
}
101105

102-
.deriv-input--field:focus + .deriv-input--label {
106+
.deriv-input--general .deriv-input__field:focus + .deriv-input__label {
103107
color: $active_color;
104108
}
105109

106-
.deriv-input--field__error:focus + .deriv-input--label {
110+
.deriv-input--error .deriv-input__field:focus + .deriv-input__label {
107111
color: $error_field;
108112
}
109113

110-
.deriv-input--field__success:focus + .deriv-input--label {
114+
.deriv-input--success .deriv-input__field:focus + .deriv-input__label {
111115
color: $success_color;
112116
}
113-
114-
.deriv-helper-message {
115-
font-size: 12px;
116-
font-style: normal;
117-
font-weight: 400;
118-
line-height: 18px;
119-
&__general {
120-
color: $inactive_color;
121-
}
122-
&__success {
123-
color: $success_color;
124-
}
125-
&__error {
126-
color: $error_field;
127-
}
128-
}

0 commit comments

Comments
 (0)