Skip to content

Commit 6ef40a5

Browse files
makkarMeenumakkarMeenu
authored
Merge pull request #180 from gluestack/release/@gluestack-ui/[email protected]
release: @gluestack-ui/textarea version 0.1.1
2 parents ef32a67 + 14e7179 commit 6ef40a5

File tree

17 files changed

+115
-102
lines changed

17 files changed

+115
-102
lines changed

‎example/storybook/.gluestack/react-native-aria

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 3e697abc5ddb958af92bcb4ad7c1d20ed84a3dd4

‎example/storybook/.ondevice/storybook.requires.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const getStories = () => {
5858
require('../src/components/DataDisplay/Badge/Badge.stories.tsx'),
5959
require('../src/components/Forms/Button/ButtonGroup.stories.tsx'),
6060
require('../src/components/Forms/Checkbox/Checkbox.stories.tsx'),
61-
require('../src/components/Layout/Divider/Divider.stories.tsx'),
61+
require('../src/components/DataDisplay/Divider/Divider.stories.tsx'),
6262
require('../src/components/Others/Fab/Fab.stories.tsx'),
6363
require('../src/components/Forms/FormControl/FormControl.stories.tsx'),
6464
require('../src/components/Typography/Heading/Heading.stories.tsx'),

‎example/storybook/src/components/Layout/Divider/Divider.stories.tsx renamed to ‎example/storybook/src/components/DataDisplay/Divider/Divider.stories.tsx

File renamed without changes.

‎example/storybook/src/components/Layout/Divider/Divider.tsx renamed to ‎example/storybook/src/components/DataDisplay/Divider/Divider.tsx

+3-33
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,9 @@ export const DividerStory = () => {
1717
}}
1818
>
1919
<Text>Simple</Text>
20-
<Divider
21-
variant="vertical"
22-
// orientation="vertical"
23-
sx={{
24-
mx: 10,
25-
bg: '$emerald500',
26-
h: 30,
27-
_dark: {
28-
bg: '$emerald400',
29-
},
30-
}}
31-
/>
20+
<Divider orientation="vertical" sx={{ mx: '$3' }} />
3221
<Text>Easy</Text>
33-
<Divider
34-
sx={{
35-
mx: 10,
36-
bg: '$indigo500',
37-
h: 30,
38-
_dark: {
39-
bg: '$indigo400',
40-
},
41-
}}
42-
variant="vertical"
43-
/>
22+
<Divider sx={{ mx: '$3' }} orientation="vertical" />
4423
<Text>Beautiful</Text>
4524
</HStack>
4625

@@ -52,16 +31,7 @@ export const DividerStory = () => {
5231
}}
5332
>
5433
<Text>Firefox</Text>
55-
<Divider
56-
variant="horizontal"
57-
sx={{
58-
bg: '$red500',
59-
h: 1,
60-
_dark: {
61-
bg: '$red400',
62-
},
63-
}}
64-
/>
34+
<Divider orientation="horizontal" sx={{ my: '$2' }} />
6535
<Text>Chrome</Text>
6636
</VStack>
6737
</VStack>

‎example/storybook/src/components/Layout/Divider/index.stories.mdx renamed to ‎example/storybook/src/components/DataDisplay/Divider/index.stories.mdx

File renamed without changes.

‎example/storybook/src/components/Forms/TextArea/TextArea.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,7 @@ export const TextAreaStory = ({ ...props }: any) => {
66
return (
77
<Wrapper>
88
<TextArea {...props}>
9-
<TextArea.Input
10-
placeholder="Your text goes here..."
11-
placeholderTextColor="$textDark400"
12-
// sx={{
13-
// _dark: {
14-
// placeholderTextColor: 'black',
15-
// },
16-
// }}
17-
/>
9+
<TextArea.Input placeholder="Your text goes here..." />
1810
</TextArea>
1911
</Wrapper>
2012
);

‎example/storybook/src/components/Forms/TextArea/index.stories.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import Wrapper from '../../Wrapper';
3838
<TextArea placeholder="Enter text here...">
3939
<TextArea.Input
4040
placeholder="Your text goes here..."
41-
placeholderTextColor="$textDark400"
4241
/>
4342
</TextArea>
4443
`,

‎example/storybook/src/ui-components/Divider/styled-components/Root.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,21 @@ export default styled(
55
View,
66
{
77
bg: '$borderLight200',
8-
98
variants: {
10-
variant: {
9+
orientation: {
1110
vertical: {
12-
width: 1,
11+
width: '$px',
1312
height: '100%',
1413
},
15-
1614
horizontal: {
17-
height: 1,
15+
height: '$px',
1816
width: '100%',
1917
},
2018
},
2119
},
22-
2320
defaultProps: {
24-
variant: 'horizontal',
21+
orientation: 'horizontal',
2522
},
26-
2723
_dark: {
2824
bg: '$borderDark700',
2925
},

‎example/storybook/src/ui-components/Input/styled-components/Root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default styled(
77
'borderWidth': 1,
88
'borderColor': '$backgroundLight300',
99
'borderRadius': '$sm',
10-
'minWidth': '50%',
10+
'minWidth': 200,
1111
'maxWidth': 500,
1212
'flexDirection': 'row',
1313
'px': '$3',

‎example/storybook/src/ui-components/Text/styled-components/Root.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
//@ts-nocheck
2-
31
import { Text } from 'react-native';
42
import { styled } from '../../styled';
53

‎example/storybook/src/ui-components/TextArea/styled-components/Input.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ export default styled(
88
// @ts-ignore
99
multiline: true,
1010
textAlignVertical: 'top',
11-
h: 100,
12-
w: 300,
13-
placeholderTextColor: '$red800',
14-
outlineColor: '$primary600',
11+
h: '100%',
1512
},
16-
{ ancestorStyle: ['_input'] }
13+
{ ancestorStyle: ['_input'], resolveProps: ['placeholderTextColor'] },
14+
{
15+
propertyTokenMap: {
16+
placeholderTextColor: 'colors',
17+
},
18+
// aliases: {},
19+
}
1720
);

‎example/storybook/src/ui-components/TextArea/styled-components/Root.tsx

+74-29
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,68 @@ import { styled } from '../../styled';
44
export default styled(
55
View,
66
{
7+
'w': '$full',
78
'bg': 'transparent',
8-
'minWidth': '50%',
9-
'maxWidth': 500,
109
'borderWidth': 1,
1110
'borderColor': '$backgroundLight300',
1211
'borderRadius': '$sm',
1312
'h': 100,
14-
'w': 300,
15-
':hover': {
16-
bg: '$transparent',
17-
borderColor: '$primary700',
18-
},
19-
':focus': {
20-
bg: 'transparent',
21-
borderWidth: '$2',
22-
borderColor: '$primary500',
13+
':focusVisible': {
14+
// @ts-ignore
15+
'boxShadow': 'offset 0 0 0 2px $primary500',
16+
':invalid': {
17+
bg: 'transparent',
18+
borderWidth: '$2',
19+
borderColor: '$red600',
20+
},
21+
':disabled': {
22+
borderColor: '$backgroundLight300',
23+
opacity: 0.4,
24+
},
2325
},
24-
25-
':invalid': {
26-
':focus': {
26+
':hover': {
27+
'bg': '$transparent',
28+
'borderColor': '$primary700',
29+
':invalid': {
2730
bg: 'transparent',
2831
borderWidth: '$2',
29-
borderColor: '$primary700',
32+
borderColor: '$red600',
33+
},
34+
':disabled': {
35+
borderColor: '$backgroundLight300',
36+
opacity: 0.4,
3037
},
38+
},
39+
':focus': {
3140
'bg': 'transparent',
3241
'borderWidth': '$2',
33-
'borderColor': '$red600',
42+
'borderColor': '$primary500',
43+
':invalid': {
44+
bg: 'transparent',
45+
borderWidth: '$2',
46+
borderColor: '$red600',
47+
},
48+
':disabled': {
49+
borderColor: '$backgroundLight300',
50+
opacity: 0.4,
51+
},
52+
},
53+
':invalid': {
54+
bg: 'transparent',
55+
borderWidth: '$2',
56+
borderColor: '$red600',
3457
},
3558

36-
// ':focusVisible': {
37-
// boxShadow: 'offset 0 0 0 2px $primary700',
38-
// },
3959
':disabled': {
4060
opacity: 0.4,
4161
},
4262
'_input': {
43-
placeholderTextColor: '$textLight900',
4463
color: '$textLight900',
64+
props: {
65+
placeholderTextColor: '$textLight400',
66+
},
4567
},
68+
4669
'variants': {
4770
size: {
4871
xl: {
@@ -94,29 +117,51 @@ export default styled(
94117
},
95118
'_dark': {
96119
'borderColor': '$borderDark700',
97-
'placeholderTextColor': '$textDark600',
98-
':hover': {
99-
borderColor: '$primary400',
100-
},
101-
':focus': {
102-
borderColor: '$primary400',
103-
},
104120

121+
':disabled': {
122+
borderColor: '$borderDark700',
123+
opacity: 0.4,
124+
},
105125
':focusVisible': {
126+
// @ts-ignore
106127
boxShadow: 'offset 0 0 0 2px $primary400',
107128
},
108129
':invalid': {
109130
borderColor: '$error400',
110131
},
132+
':hover': {
133+
'borderColor': '$primary400',
134+
':invalid': {
135+
borderColor: '$error400',
136+
},
137+
':disabled': {
138+
borderColor: '$borderDark700',
139+
opacity: 0.4,
140+
},
141+
},
142+
':focus': {
143+
'borderColor': '$primary400',
144+
':invalid': {
145+
borderColor: '$error400',
146+
},
147+
':disabled': {
148+
borderColor: '$borderDark700',
149+
opacity: 0.4,
150+
},
151+
},
152+
111153
'_input': {
154+
props: {
155+
placeholderTextColor: '$textLight400',
156+
},
112157
color: '$textDark50',
113158
},
114159
},
115160
'defaultProps': {
116161
variant: 'default',
117162
size: 'md',
118163
},
119-
'placeholderTextColor': '$textLight400',
120164
},
121-
{ descendantStyle: ['_input'] }
165+
{ descendantStyle: ['_input'] },
166+
{}
122167
);

‎packages/divider/src/Divider.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ export function Divider<StyledDividerProps>(
77
) {
88
return forwardRef(
99
({ children, ...props }: StyledDividerProps & IDividerProps, ref: any) => {
10-
const { orientation, variant } = props;
10+
const { orientation } = props;
11+
1112
return (
1213
<StyledDivider
1314
ref={ref}
1415
{...(props as StyledDividerProps)}
15-
aria-orientation={variant ?? orientation}
16+
aria-orientation={orientation}
1617
//@ts-ignore web only role
1718
accessibilityRole={Platform.OS === 'web' ? 'separator' : undefined}
1819
>

‎packages/textarea/CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# @gluestack-ui/textarea
2+
3+
## 0.1.1
4+
5+
### Patch Changes
6+
7+
- Fixed styles for dark and light mode and scroll issues on native

‎packages/textarea/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gluestack-ui/textarea",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"main": "lib/commonjs/index",
55
"module": "lib/module/index",
66
"types": "lib/typescript/index.d.ts",

‎packages/textarea/src/TextArea.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const TextArea = (StyledTextArea: any) =>
99
isDisabled,
1010
// isReadOnly,
1111
handleFocus,
12-
isFocused,
1312
} = useTextArea('TextAreaContext');
1413

1514
const inputProps = useFormControl({
@@ -19,17 +18,18 @@ export const TextArea = (StyledTextArea: any) =>
1918
isRequired: props.isRequired,
2019
nativeID: props.nativeID,
2120
});
22-
21+
// console.log(props, 'PROPSS');
2322
// console.log(ancestorStyle, 'ancestorStyle');
2423
// console.log(styledObject, 'styledObject');
2524

2625
return (
2726
<StyledTextArea
28-
states={{
29-
focus: isFocused,
30-
}}
27+
// states={{
28+
// focus: isFocused,
29+
// }}
3130
ref={ref}
3231
{...props}
32+
// isFocused={isFocused}
3333
multiline={multiline}
3434
disabled={isDisabled || inputProps.disabled}
3535
onKeyPress={(e: any) => {

0 commit comments

Comments
 (0)