Skip to content

Commit b36679d

Browse files
chaitanyadeorukhkarchaitanyadeorukhkar
committed
make requested changes
1 parent 277e403 commit b36679d

File tree

15 files changed

+115
-89
lines changed

15 files changed

+115
-89
lines changed

‎packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -684,7 +684,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
684684
height: auto;
685685
border: none;
686686
border-width: 0px;
687-
box-shadow: hsla(211,27%,76%,1) 0px 0px 0px 1px;
687+
box-shadow: hsla(227,100%,59%,1) 0px 0px 0px 1.5px;
688688
-webkit-transition-property: background-color;
689689
transition-property: background-color;
690690
-webkit-transition-duration: 150ms;

‎packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -682,7 +682,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
682682
height: auto;
683683
border: none;
684684
border-width: 0px;
685-
box-shadow: hsla(211,27%,76%,1) 0px 0px 0px 1px;
685+
box-shadow: hsla(227,100%,59%,1) 0px 0px 0px 1.5px;
686686
-webkit-transition-property: background-color;
687687
transition-property: background-color;
688688
-webkit-transition-duration: 150ms;

‎packages/blade/src/components/Form/FormLabel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const FormLabel = ({
140140

141141
const Component = as;
142142
// only set 120px label when device is desktop
143-
const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto'; // TODO: use size token
143+
const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';
144144

145145
return (
146146
<Component

‎packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Animated, {
77
} from 'react-native-reanimated';
88
import styled from 'styled-components';
99
import type { BaseInputWrapperProps } from './types';
10-
import { getInputBackgroundAndBorderStyles } from './baseInputStyles';
10+
import { getBaseInputState, getInputBackgroundAndBorderStyles } from './baseInputStyles';
1111
import {
1212
BASEINPUT_WRAPPER_MAX_HEIGHT,
1313
BASEINPUT_WRAPPER_MIN_HEIGHT,
@@ -19,6 +19,7 @@ import { castNativeType, makeMotionTime } from '~utils';
1919
import { useTheme } from '~components/BladeProvider';
2020
import getIn from '~utils/lodashButBetter/get';
2121
import type { EasingFactoryFn } from '~tokens/global';
22+
import type { ActionStates } from '~utils/useInteraction';
2223

2324
const StyledBaseInputWrapper = styled(Animated.View)<BaseInputWrapperProps>((props) => ({
2425
...getInputBackgroundAndBorderStyles({
@@ -94,14 +95,11 @@ const _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<
9495
}),
9596
};
9697

97-
const baseInputState =
98-
rest.currentInteraction === 'focus'
99-
? 'focused'
100-
: rest.currentInteraction === 'hover'
101-
? 'hovered'
102-
: rest.isDisabled
103-
? 'disabled'
104-
: 'default';
98+
const baseInputState = getBaseInputState({
99+
isFocused: rest.currentInteraction === 'focus',
100+
isHovered: rest.currentInteraction === 'hover',
101+
isDisabled: Boolean(rest.isDisabled),
102+
});
105103

106104
let borderColor = getIn(theme.colors, baseInputBorderColor[baseInputState]);
107105
const backgroundColor = getIn(theme.colors, baseInputBackgroundColor[baseInputState]);

‎packages/blade/src/components/Input/BaseInput/BaseInput.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ const BaseInputSizesTemplate: StoryFn<typeof BaseInputComponent> = ({
442442
leadingIcon={LeadingIcon}
443443
trailingIcon={TrailingIcon}
444444
size="medium"
445-
trailingActionButton={<Link onClick={() => console.log('Clicked Apply')}>Apply</Link>}
445+
trailingButton={<Link onClick={() => console.log('Clicked Apply')}>Apply</Link>}
446446
/>
447447
<Text size="large" marginBottom="spacing.1">
448448
Large Size:
@@ -452,7 +452,7 @@ const BaseInputSizesTemplate: StoryFn<typeof BaseInputComponent> = ({
452452
leadingIcon={iconMap[(leadingIcon as unknown) as string]}
453453
trailingIcon={iconMap[(trailingIcon as unknown) as string]}
454454
size="large"
455-
trailingActionButton={<Link onClick={() => console.log('Clicked Apply')}>Apply</Link>}
455+
trailingButton={<Link onClick={() => console.log('Clicked Apply')}>Apply</Link>}
456456
/>
457457
</Box>
458458
);

‎packages/blade/src/components/Input/BaseInput/BaseInput.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import { BaseInputVisuals } from './BaseInputVisuals';
77
import { BaseInputWrapper } from './BaseInputWrapper';
88
import { BaseInputTagSlot } from './BaseInputTagSlot';
99
import type { InputWrapperRef } from './types';
10-
import { baseInputBorderBackgroundMotion } from './baseInputTokens';
10+
import {
11+
FORM_HINT_LEFT_LABEL_MARGIN_LEFT,
12+
baseInputBorderBackgroundMotion,
13+
} from './baseInputTokens';
1114
import type {
1215
FormInputLabelProps,
1316
FormInputValidationProps,
@@ -305,10 +308,10 @@ type BaseInputCommonProps = FormInputLabelProps &
305308
* **Note:** `size` of the Link will be set to the same size as the input field, `isDisabled` will follow Input's `isDisabled`, & `variant` will be set to `button`.
306309
* Example:
307310
* ```tsx
308-
* trailingActionButton={<Link onClick={handleClick}>Apply</Link>}
311+
* trailingButton={<Link onClick={handleClick}>Apply</Link>}
309312
* ```
310313
*/
311-
trailingActionButton?: React.ReactElement<LinkProps>;
314+
trailingButton?: React.ReactElement<LinkProps>;
312315
} & TestID &
313316
Platform.Select<{
314317
native: {
@@ -792,7 +795,7 @@ const _BaseInput: React.ForwardRefRenderFunction<BladeElementRef, BaseInputProps
792795
isDropdownTrigger,
793796
isLabelInsideInput,
794797
size = 'medium',
795-
trailingActionButton,
798+
trailingButton,
796799
...styledProps
797800
},
798801
ref,
@@ -1005,15 +1008,19 @@ const _BaseInput: React.ForwardRefRenderFunction<BladeElementRef, BaseInputProps
10051008
trailingIcon={trailingIcon}
10061009
isDisabled={isDisabled}
10071010
validationState={validationState}
1008-
trailingActionButton={trailingActionButton}
1011+
trailingButton={trailingButton}
10091012
size={size}
10101013
/>
10111014
</BaseInputWrapper>
10121015
</FocusRingWrapper>
10131016
</BaseBox>
1014-
{/* the magic number 192 is basically max-width of label i.e 176 and then right margin i.e 16 which is the spacing between label and input field */}
1017+
10151018
{!hideFormHint && (
1016-
<BaseBox marginLeft={makeSize(isLabelLeftPositioned && !hideLabelText ? 192 : 0)}>
1019+
<BaseBox
1020+
marginLeft={makeSize(
1021+
isLabelLeftPositioned && !hideLabelText ? FORM_HINT_LEFT_LABEL_MARGIN_LEFT : 0,
1022+
)}
1023+
>
10171024
<BaseBox
10181025
display="flex"
10191026
flexDirection="row"

‎packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type InputVisuals = Pick<
1919
| 'isDisabled'
2020
| 'validationState'
2121
| 'size'
22-
| 'trailingActionButton'
22+
| 'trailingButton'
2323
> & {
2424
size: NonNullable<BaseInputProps['size']>;
2525
};
@@ -78,20 +78,20 @@ const getInteractionElementStyles = ({
7878
hasTrailingIcon,
7979
hasInteractionElement,
8080
hasSuffix,
81-
hasTrailingActionButton,
81+
hasTrailingButton,
8282
}: {
8383
hasTrailingIcon: boolean;
8484
hasInteractionElement: boolean;
8585
hasSuffix: boolean;
86-
hasTrailingActionButton: boolean;
86+
hasTrailingButton: boolean;
8787
}): Pick<BaseBoxProps, 'paddingRight'> => {
88-
if (hasInteractionElement && (hasSuffix || hasTrailingIcon || hasTrailingActionButton)) {
88+
if (hasInteractionElement && (hasSuffix || hasTrailingIcon || hasTrailingButton)) {
8989
return {
9090
paddingRight: 'spacing.2',
9191
};
9292
}
9393

94-
if (hasInteractionElement && !hasSuffix && !hasTrailingIcon && !hasTrailingActionButton) {
94+
if (hasInteractionElement && !hasSuffix && !hasTrailingIcon && !hasTrailingButton) {
9595
return {
9696
paddingRight: 'spacing.4',
9797
};
@@ -105,19 +105,19 @@ const getInteractionElementStyles = ({
105105
const getSuffixStyles = ({
106106
hasTrailingIcon,
107107
hasSuffix,
108-
hasTrailingActionButton,
108+
hasTrailingButton,
109109
}: {
110110
hasTrailingIcon: boolean;
111111
hasSuffix: boolean;
112-
hasTrailingActionButton: boolean;
112+
hasTrailingButton: boolean;
113113
}): Pick<BaseBoxProps, 'paddingRight'> => {
114-
if (hasSuffix && (hasTrailingIcon || hasTrailingActionButton)) {
114+
if (hasSuffix && (hasTrailingIcon || hasTrailingButton)) {
115115
return {
116116
paddingRight: 'spacing.3',
117117
};
118118
}
119119

120-
if (hasSuffix && !hasTrailingIcon && !hasTrailingActionButton) {
120+
if (hasSuffix && !hasTrailingIcon && !hasTrailingButton) {
121121
return {
122122
paddingRight: 'spacing.4',
123123
};
@@ -130,18 +130,18 @@ const getSuffixStyles = ({
130130

131131
const getTrailingIconStyles = ({
132132
hasTrailingIcon,
133-
hasTrailingActionButton,
133+
hasTrailingButton,
134134
}: {
135135
hasTrailingIcon: boolean;
136-
hasTrailingActionButton: boolean;
136+
hasTrailingButton: boolean;
137137
}): Pick<BaseBoxProps, 'paddingRight'> => {
138-
if (hasTrailingIcon && hasTrailingActionButton) {
138+
if (hasTrailingIcon && hasTrailingButton) {
139139
return {
140140
paddingRight: 'spacing.3',
141141
};
142142
}
143143

144-
if (hasTrailingIcon && !hasTrailingActionButton) {
144+
if (hasTrailingIcon && !hasTrailingButton) {
145145
return {
146146
paddingRight: 'spacing.4',
147147
};
@@ -158,14 +158,14 @@ export const getInputVisualsToBeRendered = ({
158158
interactionElement,
159159
suffix,
160160
trailingIcon,
161-
trailingActionButton,
161+
trailingButton,
162162
}: InputVisuals) => ({
163163
hasLeadingIcon: Boolean(leadingIcon),
164164
hasPrefix: Boolean(prefix),
165165
hasInteractionElement: Boolean(interactionElement),
166166
hasSuffix: Boolean(suffix),
167167
hasTrailingIcon: Boolean(trailingIcon),
168-
hasTrailingActionButton: Boolean(trailingActionButton),
168+
hasTrailingButton: Boolean(trailingButton),
169169
});
170170

171171
export const BaseInputVisuals = ({
@@ -177,33 +177,33 @@ export const BaseInputVisuals = ({
177177
isDisabled,
178178
validationState = 'none',
179179
size,
180-
trailingActionButton: TrailingActionButton,
180+
trailingButton: TrailingButton,
181181
}: InputVisuals): ReactElement | null => {
182182
const {
183183
hasLeadingIcon,
184184
hasPrefix,
185185
hasInteractionElement,
186186
hasSuffix,
187187
hasTrailingIcon,
188-
hasTrailingActionButton,
188+
hasTrailingButton,
189189
} = getInputVisualsToBeRendered({
190190
leadingIcon: LeadingIcon,
191191
prefix,
192192
interactionElement,
193193
suffix,
194194
trailingIcon: TrailingIcon,
195-
trailingActionButton: TrailingActionButton,
195+
trailingButton: TrailingButton,
196196
size,
197197
});
198198

199199
const hasLeadingVisuals = hasLeadingIcon || hasPrefix;
200200
const hasTrailingVisuals =
201-
hasInteractionElement || hasSuffix || hasTrailingIcon || hasTrailingActionButton;
201+
hasInteractionElement || hasSuffix || hasTrailingIcon || hasTrailingButton;
202202

203203
if (__DEV__) {
204-
if (hasTrailingActionButton && !isValidAllowedChildren(TrailingActionButton, 'Link')) {
204+
if (hasTrailingButton && !isValidAllowedChildren(TrailingButton, 'Link')) {
205205
throwBladeError({
206-
message: 'trailingActionButton must be a valid Blade Link component',
206+
message: 'trailingButton must be a valid Blade Link component',
207207
moduleName: 'BaseInput',
208208
});
209209
}
@@ -245,7 +245,7 @@ export const BaseInputVisuals = ({
245245
hasTrailingIcon,
246246
hasInteractionElement,
247247
hasSuffix,
248-
hasTrailingActionButton,
248+
hasTrailingButton,
249249
})}
250250
display="flex"
251251
alignItems="stretch"
@@ -255,7 +255,7 @@ export const BaseInputVisuals = ({
255255
</BaseBox>
256256
) : null}
257257
{hasSuffix ? (
258-
<BaseBox {...getSuffixStyles({ hasTrailingIcon, hasSuffix, hasTrailingActionButton })}>
258+
<BaseBox {...getSuffixStyles({ hasTrailingIcon, hasSuffix, hasTrailingButton })}>
259259
<Text
260260
size={textSize[size]}
261261
variant="body"
@@ -269,7 +269,7 @@ export const BaseInputVisuals = ({
269269
{TrailingIcon ? (
270270
<BaseBox
271271
display="flex"
272-
{...getTrailingIconStyles({ hasTrailingIcon, hasTrailingActionButton })}
272+
{...getTrailingIconStyles({ hasTrailingIcon, hasTrailingButton })}
273273
>
274274
{
275275
<TrailingIcon
@@ -281,9 +281,9 @@ export const BaseInputVisuals = ({
281281
}
282282
</BaseBox>
283283
) : null}
284-
{TrailingActionButton ? (
284+
{TrailingButton ? (
285285
<BaseBox paddingRight="spacing.4" display="flex">
286-
{React.cloneElement(TrailingActionButton, {
286+
{React.cloneElement(TrailingButton, {
287287
size,
288288
variant: 'button',
289289
isDisabled,

‎packages/blade/src/components/Input/BaseInput/__tests__/BaseInput.native.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@ describe('<BaseInput />', () => {
9595
expect(toJSON()).toMatchSnapshot();
9696
});
9797

98-
it('should render with trailingActionButton', () => {
98+
it('should render with trailingButton', () => {
9999
const { toJSON } = renderWithTheme(
100-
<BaseInput id="coupon" label="Coupon" trailingActionButton={<Link>Apply</Link>} />,
100+
<BaseInput id="coupon" label="Coupon" trailingButton={<Link>Apply</Link>} />,
101101
);
102102

103103
expect(toJSON()).toMatchSnapshot();

‎packages/blade/src/components/Input/BaseInput/__tests__/BaseInput.web.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@ describe('<BaseInput />', () => {
102102
expect(container).toMatchSnapshot();
103103
});
104104

105-
it('should render with trailingActionButton', () => {
105+
it('should render with trailingButton', () => {
106106
const { container } = renderWithTheme(
107-
<BaseInput id="coupon" label="Coupon" trailingActionButton={<Link>Apply</Link>} />,
107+
<BaseInput id="coupon" label="Coupon" trailingButton={<Link>Apply</Link>} />,
108108
);
109109

110110
expect(container).toMatchSnapshot();

‎packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1434,7 +1434,7 @@ exports[`<BaseInput /> should render with large size input 1`] = `
14341434
</View>
14351435
`;
14361436

1437-
exports[`<BaseInput /> should render with trailingActionButton 1`] = `
1437+
exports[`<BaseInput /> should render with trailingButton 1`] = `
14381438
<View
14391439
style={
14401440
{

‎packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1465,7 +1465,7 @@ exports[`<BaseInput /> should render with large size input 1`] = `
14651465
</div>
14661466
`;
14671467

1468-
exports[`<BaseInput /> should render with trailingActionButton 1`] = `
1468+
exports[`<BaseInput /> should render with trailingButton 1`] = `
14691469
.c0.c0.c0.c0.c0 {
14701470
display: -webkit-box;
14711471
display: -webkit-flex;

0 commit comments

Comments
 (0)