Merge pull request #190 from gluestack/release/@gluestack-ui/[email protected]

release: @gluestack-ui/radio version 0.1.3
gluestack · Mar 30, 2023 · c9cee5f · c9cee5f
2 parents 3135078 + 2aa3cba
commit c9cee5f
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 51 deletions.
diff --git a/example/storybook/src/components/Forms/Link/index.stories.mdx b/example/storybook/src/components/Forms/Link/index.stories.mdx
@@ -36,7 +36,7 @@ import Wrapper from '../../Wrapper';
     metaData={{
       code: `
 <Link href="https://gluestack.io/">
-  <Text>Gluestack</Text>
+  <Text>gluestack</Text>
 </Link>
 `,
       transformCode: (code) => {

diff --git a/example/storybook/src/components/Others/Fab/index.stories.mdx b/example/storybook/src/components/Others/Fab/index.stories.mdx
@@ -241,7 +241,7 @@ It inherits all the properties of React Native's [Text](https://reactnative.dev/
     showArgsController={false}
     metaData={{
       code: `
-<View style={{height:60}}>
+<View style={{height:60}} bg="$red400" width="$full">
   <Fab>
     <HamburgerIcon mr="$2" color="$white" />
     <Fab.Label>LeftIcon</Fab.Label>

diff --git a/example/storybook/src/components/Overlay/Popover/index.stories.mdx b/example/storybook/src/components/Overlay/Popover/index.stories.mdx
@@ -120,6 +120,7 @@ import { Popover } from './components';
 ```jsx
 export default () => (
   <Popover>
+    <Popover.Backdrop />
     <Popover.Content>
       <Popover.Header>
         <Popover.CloseButton />
@@ -284,7 +285,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
         </Table.TR>
-        <Table.TR>
+        {/* <Table.TR>
           <Table.TD>
             <Table.TText>
               <InlineCode>closeOnOverlayClick</InlineCode>
@@ -301,7 +302,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
               If true, the popover will close when the overlay is clicked.
             </Table.TText>
           </Table.TD>
-        </Table.TR>
+        </Table.TR> */}
         <Table.TR>
           <Table.TD>
             <Table.TText>
@@ -320,25 +321,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
         </Table.TR>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>animationPreset</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>{`'slide' | 'fade'`}</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>{`'slide'`}</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>
-              Specifies the animation preset for the popover.
-            </Table.TText>
-          </Table.TD>
-        </Table.TR>
-        <Table.TR>
+        {/* <Table.TR>
           <Table.TD>
             <Table.TText>
               <InlineCode>contentSize</InlineCode>
@@ -355,7 +338,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
               Specifies the content size for the popover.
             </Table.TText>
           </Table.TD>
-        </Table.TR>
+        </Table.TR> */}
         <Table.TR>
           <Table.TD>
             <Table.TText>
@@ -381,7 +364,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 #### Popover.Content
 
-Contains all backdrop related layout style props and actions.
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
 #### Popover.Header

diff --git a/example/storybook/src/ui-components/Button/styled-components/Root.tsx b/example/storybook/src/ui-components/Button/styled-components/Root.tsx
@@ -339,14 +339,14 @@ export default styled(
           ':hover': {
             bg: 'transparent',
             _text: {
-              textDecoration: 'underline',
+              textDecorationLine: 'underline',
             },
           },
 
           ':active': {
             bg: 'transparent',
             _text: {
-              textDecoration: 'underline',
+              textDecorationLine: 'underline',
             },
           },
         },

diff --git a/example/storybook/src/ui-components/Button/styled-components/Text.tsx b/example/storybook/src/ui-components/Button/styled-components/Text.tsx
@@ -6,6 +6,7 @@ export default styled(
   {
     color: '$text800',
     fontFamily: '$body',
+    userSelect: 'none',
   },
   { ancestorStyle: ['_text'], DEBUG: 'STYLEDBUTTONTEXT' }
 );
diff --git a/example/storybook/src/ui-components/Link/styled-components/Root.tsx b/example/storybook/src/ui-components/Link/styled-components/Root.tsx
@@ -11,21 +11,21 @@ export default styled(
       'fontWeight': '$normal',
       'color': '$info600',
       ':hover': {
-        textDecoration: 'underline',
+        textDecorationLine: 'underline',
         color: '$info600',
       },
       ':active': {
-        textDecoration: 'underline',
+        textDecorationLine: 'underline',
         color: '$info700',
       },
       '_dark': {
         'color': '$info300',
         ':hover': {
-          textDecoration: 'underline',
+          textDecorationLine: 'underline',
           color: '$info300',
         },
         ':active': {
-          textDecoration: 'underline',
+          textDecorationLine: 'underline',
           color: '$info200',
         },
       },

diff --git a/example/storybook/src/ui-components/Link/styled-components/Root.web.tsx b/example/storybook/src/ui-components/Link/styled-components/Root.web.tsx
@@ -12,25 +12,25 @@ export default styled(
       'fontWeight': '$normal',
       'color': '$info600',
       ':hover': {
-        textDecoration: 'underline',
+        textDecorationLine: 'underline',
         color: '$info600',
       },
       ':active': {
-        textDecoration: 'underline',
+        textDecorationLine: 'underline',
         color: '$info700',
       },
       ':pressed': {
-        textDecoration: 'underline',
+        textDecorationLine: 'underline',
         color: '$info700',
       },
       '_dark': {
         'color': '$info300',
         ':hover': {
-          textDecoration: 'underline',
+          textDecorationLine: 'underline',
           color: '$info300',
         },
         ':active': {
-          textDecoration: 'underline',
+          textDecorationLine: 'underline',
           color: '$info200',
         },
       },

diff --git a/example/storybook/src/ui-components/Radio/styled-components/Root.web.tsx b/example/storybook/src/ui-components/Radio/styled-components/Root.web.tsx
@@ -65,6 +65,7 @@ export default styled(
       size: 'md',
     },
     _web: {
+      'cursor': 'pointer',
       ':disabled': {
         cursor: 'not-allowed',
       },

diff --git a/packages/radio/CHANGELOG.md b/packages/radio/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @gluestack-ui/radio
+
+## 0.1.3
+
+### Patch Changes
+
+- states and styled fixes
diff --git a/packages/radio/package.json b/packages/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/radio",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/radio/src/Radio.tsx b/packages/radio/src/Radio.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, memo } from 'react';
+import { useFocusRing } from '@react-native-aria/focus';
 import { RadioProvider } from './RadioProvider';
 import { useRadio } from '@react-native-aria/radio';
 import { useRadioGroup } from './RadioGroupContext';
@@ -44,7 +45,8 @@ const RadioComponent = memo(
       const { pressableProps, isPressed } = useIsPressed();
       const { focusProps, isFocused } = useFocus();
       const { disabled: isDisabled, checked: isChecked } = inputProps;
-
+      const { focusProps: focusRingProps, isFocusVisible }: any =
+        useFocusRing();
       return (
         <StyledRadio
           disabled={isDisabled || isDisabledProp}
@@ -65,14 +67,25 @@ const RadioComponent = memo(
           onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
           // @ts-ignore - web only
           onFocus={composeEventHandlers(
-            composeEventHandlers(onFocus, focusProps.onFocus)
-            // focusRingProps.onFocus
+            composeEventHandlers(onFocus, focusProps.onFocus),
+            focusRingProps.onFocus
           )}
           // @ts-ignore - web only
           onBlur={composeEventHandlers(
-            composeEventHandlers(onBlur, focusProps.onBlur)
-            // focusRingProps.onBlur
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur
           )}
+          states={{
+            readonly: isReadOnly || isReadOnlyProp,
+            intermediate: isIndeterminate || isIndeterminateProp,
+            checked: isChecked || isCheckedProp,
+            focusVisible: isFocusVisible || isFocusVisibleProp,
+            disabled: isDisabled || isDisabledProp,
+            invalid: isInvalid || isInvalidProp,
+            hover: isHovered || isHoveredProp,
+            focus: isFocused || isFocusedProp,
+            active: isPressed || isPressedProp,
+          }}
         >
           <RadioProvider
             isChecked={isChecked || isCheckedProp}

diff --git a/packages/radio/src/Radio.web.tsx b/packages/radio/src/Radio.web.tsx
@@ -6,11 +6,7 @@ import { useFocusRing } from '@react-native-aria/focus';
 import { useHover } from '@react-native-aria/interactions';
 import { useRadio } from '@react-native-aria/radio';
 import { useRadioGroup } from './RadioGroupContext';
-import {
-  combineContextAndProps,
-  mergeRefs,
-  stableHash,
-} from '@gluestack-ui/utils';
+import { stableHash, composeEventHandlers } from '@gluestack-ui/utils';
 import { useFormControlContext } from '@gluestack-ui/form-control';
 
 const RadioComponent = memo(
@@ -40,9 +36,10 @@ const RadioComponent = memo(
       const { disabled: isDisabled, checked: isChecked } = inputProps;
       const _ref = React.useRef(null);
       const { isHovered } = useHover({}, _ref);
-      const { focusProps, isFocusVisible } = useFocusRing();
+      const { focusProps, isFocusVisible }: any = useFocusRing();
       const [isFocused, setFocused] = React.useState(isFocusedProp);
       const [isPressed, setPressed] = React.useState(isPressedProp);
+
       const handleFocus = () => {
         setFocused(true);
       };
@@ -65,11 +62,20 @@ const RadioComponent = memo(
           ref={_ref}
           onMouseDown={handlePressIn}
           onMouseUp={handlePressOut}
+          states={{
+            readonly: isReadOnly,
+            intermediate: isIndeterminate,
+            checked: isChecked,
+            focusVisible: isFocusVisible,
+            disabled: isDisabled,
+            invalid: isInvalid,
+            hover: isHovered,
+          }}
         >
           <RadioProvider
             isChecked={isChecked || isCheckedProp}
             isDisabled={isDisabled || isDisabledProp}
-            isFocusVisible={isFocusVisible || isFocused || isFocusVisibleProp}
+            isFocusVisible={isFocusVisible || isFocusVisibleProp}
             isHovered={isHovered || isHoveredProp}
             isInvalid={isInvalid || isInvalidProp}
             isReadOnly={isReadOnly || isReadOnlyProp}
@@ -82,8 +88,8 @@ const RadioComponent = memo(
                 {...inputProps}
                 {...focusProps}
                 ref={ref}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
+                onFocus={composeEventHandlers(handleFocus, focusProps.onFocus)}
+                onBlur={composeEventHandlers(handleBlur, focusProps.onBlur)}
               />
             </VisuallyHidden>
             {children}