Skip to content

Commit

Permalink
fix: added fix for focus/error shadowColor to Input, finished Input docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Rohit Agrawal committed Nov 8, 2021
1 parent dbcb3b3 commit 84f2453
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 103 deletions.
11 changes: 4 additions & 7 deletions App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,27 @@ const App = () => {
<ThemeProvider defaultColorMode="light" haveFontsLoaded={haveFontsLoaded}>
{/* <Storybook /> */}
<Screen>
{/* <Input
<Input
size="m"
isFullWidth
placeholder="This is the filled input"
leftIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
hasClearButton
value={text}
onChangeText={(val) => settext(val)}
/> */}
/>

<Input
size="m"
variant="outline"
m="l"
isFullWidth
placeholder="This is the outlines input"
leftIcon={<Icon iconFamily="Ionicons" iconName="md-lock-closed" />}
boxShadow="l"
focusShadowColor="success.500"
/>

{/* <Button isFullWidth onPress={() => console.log(2)}>
<Button isFullWidth onPress={() => console.log(2)}>
Test
</Button> */}
</Button>
</Screen>
</ThemeProvider>
);
Expand Down
149 changes: 78 additions & 71 deletions documentationwebsite/docs/components/forms/Input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ sidebar_position: 4
title: Input
---

`Input` is used to get user input in a text field.
The `Input` component is used to get user input in a text field.

## Import

Expand Down Expand Up @@ -193,37 +193,56 @@ Input also composes the [TextInput](https://reactnative.dev/docs/textinput) comp
| focusBorderRightColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border right color of the input field when it is in focus. |
| focusBorderBottomColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border bottom color of the input field when it is in focus. |
| focusShadowColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The shadow color of the input field when it is in focus. |

/\*\* The background color of the input field when it is in an error state \_/
errorBackgroundColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/** The border color of the input field when it is in an error state \*/
errorBorderColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/** The border start color of the input field when it is in an error state \_/
errorBorderStartColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/\*\* The border end color of the input field when it is in an error state \_/
errorBorderEndColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/\*\* The border top color of the input field when it is in an error state \*/
errorBorderTopColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/\*\* The border left color of the input field when it is in an error state \_/
errorBorderLeftColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/\*\* The border right color of the input field when it is in an error state \_/
errorBorderRightColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/\*\* The border bottom color of the input field when it is in an error state \*/
errorBorderBottomColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
/\*\* The shadow color of the input field when it is in an error state \*/
errorShadowColor?: keyof BasePearlTheme["palette"] | ColorModeColor;
| errorBackgroundColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The background color of the input field when it is in an error state. |
| errorBorderColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border color of the input field when it is in an error state. |
| errorBorderStartColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border start color of the input field when it is in an error state. |
| errorBorderEndColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border end color of the input field when it is in an error state. |
| errorBorderTopColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border top color of the input field when it is in an error state. |
| errorBorderLeftColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border left color of the input field when it is in an error state. |
| errorBorderRightColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border right color of the input field when it is in an error state. |
| errorBorderBottomColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The border bottom color of the input field when it is in an error state. |
| errorShadowColor | false | <t>PearlTheme.palette \| ColorModeColor</t> | | The shadow color of the input field when it is in an error state. |

## Default component Style

```js
export default {
parts: ["root", "text", "spinner", "icon"],
parts: ["root", "input", "text", "icon", "errorText"],
baseStyle: {
root: {
flexDirection: "row",
alignSelf: "flex-start",
margin: "xxs",
justifyContent: "center",
alignItems: "center",
activeOpacity: 0.9,
focusBorderColor: "primary.500",
errorBorderColor: "danger.500",
errorMessageColor: "danger.500",
},
text: {
color: {
light: "neutral.900",
dark: "neutral.50",
},
fontFamily: "Poppins-Regular",
fontWeight: "400",
},
icon: {
alignSelf: "center",
color: {
light: "neutral.400",
dark: "neutral.600",
},
},
input: {
placeholderTextColor: {
light: "neutral.500",
dark: "neutral.600",
},
},
errorText: {
variant: "caption",
color: "danger.500",
marginLeft: "s",
marginBottom: "xxs",
},
},
sizes: {
Expand All @@ -236,9 +255,8 @@ export default {
text: {
variant: "btn4",
},
spinner: {
my: "xxs",
size: "s",
input: {
mx: "xxs",
},
icon: {
size: "s",
Expand All @@ -250,12 +268,12 @@ export default {
px: "xs",
borderRadius: "s",
},
input: {
mx: "xxs",
},
text: {
variant: "btn3",
},
spinner: {
size: "m",
},
icon: {
size: "s",
},
Expand All @@ -266,28 +284,28 @@ export default {
px: "s",
borderRadius: "m",
},
input: {
mx: "xs",
},
text: {
variant: "btn2",
},
spinner: {
size: "m",
},
icon: {
size: "m",
},
},
l: {
root: {
py: "m",
px: "m",
px: "s",
borderRadius: "m",
},
input: {
mx: "xs",
},
text: {
variant: "btn1",
},
spinner: {
size: "l",
},
icon: {
size: "m",
},
Expand All @@ -296,55 +314,44 @@ export default {
variants: {
filled: {
root: {
activeBackgroundColor: "primary.400",
backgroundColor: "primary.500",
},
text: { color: "neutral.50" },
spinner: {
color: "neutral.50",
},
icon: {
color: "neutral.50",
},
},
outline: {
root: {
activeBackgroundColor: {
light: "primary.50",
dark: "primary.800",
},
backgroundColor: {
light: "neutral.200",
dark: "neutral.900",
},
focusBackgroundColor: {
light: "neutral.50",
dark: "neutral.800",
},
borderWidth: 1,
borderColor: "primary.500",
},
text: { color: "primary.500" },
spinner: {
color: "primary.500",
},
icon: {
color: "primary.500",
borderColor: {
light: "neutral.200",
dark: "neutral.900",
},
},
},
ghost: {
outline: {
root: {
activeBackgroundColor: {
light: "primary.50",
dark: "primary.800",
},
backgroundColor: {
light: "neutral.50",
dark: "neutral.800",
},
borderWidth: 1,
borderColor: {
light: "neutral.300",
dark: "neutral.500",
},
},
text: { color: "primary.500" },
spinner: {
color: "primary.500",
input: {
placeholderTextColor: {
light: "neutral.400",
dark: "neutral.500",
},
},
icon: {
color: "primary.500",
color: {
light: "neutral.400",
dark: "neutral.500",
},
},
},
},
Expand Down
16 changes: 8 additions & 8 deletions documentationwebsite/docs/theming/default-theme.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -587,7 +587,7 @@ We adopt a t-shirt size naming convention here as well.
export default {
elevation: {
xs: {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 2,
Expand All @@ -597,7 +597,7 @@ export default {
elevation: 2,
},
s: {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 4,
Expand All @@ -607,7 +607,7 @@ export default {
elevation: 4,
},
m: {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 8,
Expand All @@ -617,7 +617,7 @@ export default {
elevation: 8,
},
l: {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 12,
Expand All @@ -627,7 +627,7 @@ export default {
elevation: 12,
},
xl: {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 16,
Expand All @@ -637,7 +637,7 @@ export default {
elevation: 16,
},
"2xl": {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 20,
Expand All @@ -647,7 +647,7 @@ export default {
elevation: 20,
},
"3xl": {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 24,
Expand All @@ -657,7 +657,7 @@ export default {
elevation: 24,
},
"4xl": {
shadowColor: "neutral.900",
shadowColor: "#1A2138",
shadowOffset: {
width: 0,
height: 28,
Expand Down
Loading

0 comments on commit 84f2453

Please sign in to comment.