Merge pull request #48 from spicy-ui/next

0.1.0-alpha.6

.github/workflows/pull_request.yaml

@@ -13,7 +13,7 @@ jobs:
     if: github.event_name == 'pull_request' && github.ref != 'refs/heads/master'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci

.github/workflows/push.yaml

@@ -9,7 +9,7 @@ jobs:
     if: github.event_name == 'push'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@master
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci
@@ -23,7 +23,7 @@ jobs:
     if: github.event_name == 'push'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@master
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci
@@ -39,7 +39,7 @@ jobs:
     if: github.event_name == 'push'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@master
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci
@@ -53,7 +53,7 @@ jobs:
     if: github.event_name == 'push' && github.ref == 'refs/heads/master'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@master
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci

.github/workflows/release.yaml

@@ -12,7 +12,7 @@ jobs:
     if: github.event_name == 'release' && github.event.action == 'created'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci
@@ -36,7 +36,7 @@ jobs:
     if: github.event_name == 'release' && github.event.action == 'created'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Install dependencies
         run: npm ci

CHANGELOG.md

@@ -16,6 +16,19 @@
 
 -->
 
+## 0.1.0-alpha.6 (8 June, 2021)
+
+### Changes
+
+- Added `HTMLAttributes` props interface to components
+- Added `inherit` variant to Text and Heading
+- Added `openOnHover` prop to Menu component
+- Exposed internal Menu disclosure state functions ([#47](https://github.com/spicy-ui/core/issues/47))
+
+### Bug Fixes
+
+- Fixed missing `noscroll` class ([#46](https://github.com/spicy-ui/core/issues/46))
+
 ## 0.1.0-alpha.5 (28 February, 2021)
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicy-ui/core",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.6",
   "description": "A themable and extensible React UI library, ready to use out of the box",
   "keywords": [
     "react",
@@ -43,24 +43,24 @@
     "test": "tsdx test --passWithNoTests"
   },
   "dependencies": {
-    "@popperjs/core": "^2.8.6",
+    "@popperjs/core": "^2.9.2",
     "@spicy-ui/styled-system": "0.0.1-alpha.3",
-    "@types/styled-components": "^5.1.7",
+    "@types/styled-components": "^5.1.9",
     "deepmerge": "^4.2.2",
-    "downshift": "^6.1.0",
-    "framer-motion": "^3.7.0",
-    "polished": "^4.1.1",
+    "downshift": "^6.1.3",
+    "framer-motion": "^4.1.17",
+    "polished": "^4.1.3",
     "react-fast-compare": "^3.2.0",
-    "react-focus-lock": "^2.5.0",
+    "react-focus-lock": "^2.5.1",
     "react-icons": "^4.2.0",
-    "react-popper": "^2.2.4",
+    "react-popper": "^2.2.5",
     "styled-normalize": "^8.0.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.1.20",
-    "@storybook/react": "^6.1.20",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@types/react": "^17.0.9",
+    "@types/react-dom": "^17.0.6",
     "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
@@ -69,17 +69,17 @@
     "eslint-plugin-jest": "^24.1.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-json-view": "^1.21.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-json-view": "^1.21.3",
     "react-lorem-ipsum": "^1.4.9",
     "react-router-dom": "^5.2.0",
     "react-uid": "^2.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.0",
     "tsdx": "^0.14.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.2"
+    "tslib": "^2.2.0",
+    "typescript": "4.2.2"
   },
   "peerDependencies": {
     "react": ">=17.0.0",

src/components/Alert/Alert.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { SxProp, useComponentStyles } from '../../system';
 import { ColorScales } from '../../theme';
-import { ChildrenProp, LiteralUnion } from '../../types';
+import { ChildrenProp, HTMLAttributes, LiteralUnion } from '../../types';
 import { Box } from '../Box';
 
 export type AlertColors = ColorScales;
 
-export interface AlertProps extends ChildrenProp, SxProp {
+export interface AlertProps extends HTMLAttributes, ChildrenProp, SxProp {
   /** Color of the alert. */
   color?: LiteralUnion<AlertColors>;
 }

src/components/Avatar/Avatar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HiOutlineUser } from 'react-icons/hi';
 import { useImage } from '../../hooks';
 import { SxProp, useComponentStyles } from '../../system';
-import { ChildrenProp, LiteralUnion } from '../../types';
+import { ChildrenProp, HTMLAttributes, LiteralUnion } from '../../types';
 import { Box } from '../Box';
 import { Text } from '../Text';
 
@@ -38,7 +38,7 @@ export type AvatarSizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export type AvatarVariants = 'circle' | 'rounded' | 'square';
 
-export interface AvatarProps extends ChildrenProp, SxProp {
+export interface AvatarProps extends HTMLAttributes, ChildrenProp, SxProp {
   /** Function to overwrite getting avatar initials. */
   getInitials?: (name: string) => string;
   /** The avatars fallback icon when the src is not loaded or specified. */

src/components/Avatar/AvatarGroup.tsx

@@ -1,11 +1,11 @@
 import { SpaceProps } from '@spicy-ui/styled-system';
 import * as React from 'react';
 import { SxProp, useComponentStyles } from '../../system';
-import { AsProp, ChildrenProp } from '../../types';
+import { AsProp, ChildrenProp, HTMLAttributes } from '../../types';
 import { Box } from '../Box';
 import { AvatarProps } from './Avatar';
 
-export interface AvatarGroupProps extends AsProp, ChildrenProp, SxProp {
+export interface AvatarGroupProps extends HTMLAttributes, AsProp, ChildrenProp, SxProp {
   /** Border color of all avatars. */
   borderColor?: string;
   /** Maximum number of avatars to show. */

src/components/Badge/Badge.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { SxProp, useComponentStyles } from '../../system';
 import { ColorScales } from '../../theme';
-import { AsProp, ChildrenProp, LiteralUnion } from '../../types';
+import { AsProp, ChildrenProp, HTMLAttributes, LiteralUnion } from '../../types';
 import { Box } from '../Box';
 
 export type BadgeColors = ColorScales;
 
 export type BadgeVariants = 'outline' | 'solid' | 'subtle';
 
-export interface BadgeProps extends AsProp, ChildrenProp, SxProp {
+export interface BadgeProps extends HTMLAttributes, AsProp, ChildrenProp, SxProp {
   /** Color of the badge. */
   color?: LiteralUnion<BadgeColors>;
   /** Variant of the badge. */

src/components/Box/Box.tsx

@@ -1,9 +1,9 @@
 import { shouldForwardProp } from '@spicy-ui/styled-system';
 import styled from 'styled-components';
 import { allSystem, AllSystemProps, sxMixin, SxProp } from '../../system';
-import { AsProp, ChildrenProp } from '../../types';
+import { AsProp, ChildrenProp, HTMLAttributes } from '../../types';
 
-export interface BoxProps extends AsProp, ChildrenProp, AllSystemProps, SxProp {
+export interface BoxProps extends HTMLAttributes, AsProp, ChildrenProp, AllSystemProps, SxProp {
   color?: any;
 }
 

src/components/Code/Code.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { SxProp, useComponentStyles } from '../../system';
 import { ColorScales } from '../../theme';
-import { AsProp, ChildrenProp, LiteralUnion } from '../../types';
+import { AsProp, ChildrenProp, HTMLAttributes, LiteralUnion } from '../../types';
 import { Box } from '../Box';
 
 export type CodeColors = ColorScales;
 
 export type CodeVariants = 'outline' | 'solid' | 'subtle';
 
-export interface CodeProps extends AsProp, ChildrenProp, SxProp {
+export interface CodeProps extends HTMLAttributes, AsProp, ChildrenProp, SxProp {
   /** Color of the code element. */
   color?: LiteralUnion<CodeColors>;
   /** Variant of the code element. */

src/components/Divider/Divider.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { SxProp, useComponentStyles } from '../../system';
-import { AsProp, LiteralUnion } from '../../types';
+import { AsProp, HTMLAttributes, LiteralUnion } from '../../types';
 import { Box } from '../Box';
 
 export type DividerOrientation = 'horizontal' | 'vertical';
 
-export interface DividerProps extends AsProp, SxProp {
+export interface DividerProps extends HTMLAttributes, AsProp, SxProp {
   /** Orientation of the divider. */
   orientation?: LiteralUnion<DividerOrientation>;
 }

src/components/Flex/Flex.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { allSystem, sxMixin } from '../../system';
 import { BoxProps } from '../Box';
 
-export interface FlexProps extends BoxProps, ExtendedFlexboxProps {}
+export interface FlexProps extends Omit<BoxProps, 'wrap'>, ExtendedFlexboxProps {}
 
 export const Flex = styled.div.withConfig<FlexProps>({ shouldForwardProp })(sxMixin, allSystem, extendedFlexbox);
 

src/components/Heading/Heading.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, Story } from '@storybook/react';
 import * as React from 'react';
 import { uid } from 'react-uid';
-import { Stack, Heading, HeadingProps } from '..';
+import { Heading, HeadingProps, Stack } from '..';
 
-const headingVariants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const headingVariants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit'];
 
 export default {
   title: 'Heading',

src/components/Heading/Heading.tsx

@@ -1,11 +1,11 @@
 import { shouldForwardProp } from '@spicy-ui/styled-system';
 import styled from 'styled-components';
 import { allSystem, AllSystemProps, componentStylesMixin, sxMixin, SxProp } from '../../system';
-import { AsProp, ChildrenProp, LiteralUnion } from '../../types';
+import { AsProp, ChildrenProp, HTMLAttributes, LiteralUnion } from '../../types';
 
-export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit';
 
-export interface HeadingProps extends AsProp, ChildrenProp, AllSystemProps, SxProp {
+export interface HeadingProps extends HTMLAttributes, AsProp, ChildrenProp, AllSystemProps, SxProp {
   color?: string;
   /** Variant of the heading. */
   variant?: LiteralUnion<HeadingVariant>;

src/components/Kbd/Kbd.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProp, useComponentStyles } from '../../system';
-import { AsProp, ChildrenProp } from '../../types';
+import { AsProp, ChildrenProp, HTMLAttributes } from '../../types';
 import { Box } from '../Box';
 
-export interface KbdProps extends AsProp, ChildrenProp, SxProp {}
+export interface KbdProps extends HTMLAttributes, AsProp, ChildrenProp, SxProp {}
 
 export const Kbd = React.forwardRef<HTMLElement, KbdProps>((props, ref) => {
   const { as, children, sx, ...rest } = props;

src/components/Menu/Menu.stories.tsx

@@ -22,6 +22,17 @@ export const Usage: Story<MenuProps> = (props) => (
   </Box>
 );
 
+export const OpenOnHover: Story<MenuProps> = (props) => (
+  <Box h={56}>
+    <Menu {...props} openOnHover trigger={<Button iconAfter={<HiChevronDown />}>Open</Button>}>
+      <MenuItem onClick={action('view')}>View</MenuItem>
+      <MenuItem onClick={action('share')}>Share</MenuItem>
+      <MenuItem onClick={action('download')}>Download</MenuItem>
+      <MenuItem onClick={action('delete')}>Delete</MenuItem>
+    </Menu>
+  </Box>
+);
+
 export const Dividers: Story<MenuProps> = (props) => (
   <Menu {...props} trigger={<Button iconAfter={<HiChevronDown />}>Actions</Button>}>
     <MenuItem onClick={action('cut')}>Cut</MenuItem>
@@ -50,7 +61,7 @@ export const Headers: Story<MenuProps> = (props) => (
 
 export const InternalState: Story<MenuProps> = (props) => (
   <Menu {...props} trigger={({ isOpen }) => <Button iconAfter={<HiChevronDown />}>{isOpen ? 'Close' : 'Open'}</Button>}>
-    {(p) => <pre>{JSON.stringify(p)}</pre>}
+    {({ isOpen }) => <pre>{JSON.stringify({ isOpen })}</pre>}
   </Menu>
 );