The fannypack from jxom

Upgrade to reakit 1.x?

Is there a plan (i.e. document or discussion someplace) in place to upgrade to reakit 1.x?

I did a bit of searching in the issues, but didn't see anything. I realize things are still a bit volatile, as they just released a beta version.

Since they pulled styled-components, (https://reakit.io/docs/styling/), and are using an experimental system feature, this seems like a significant change.

Here is the migration guide.

Webpack build fails due to error in ToastContainer

Hello,

Does this ring a bell to anyone please ?

WARNING in ./node_modules/fannypack/es/Toast/ToastContainer.js 84:23-32
"export 'Container' was not found in 'reakit'
  @ ./node_modules/fannypack/es/ThemeProvider/index.js
  @ ./node_modules/fannypack/es/index.js
  @ ./src/index.tsx

https://github.com/fannypackui/fannypack/blob/master/src/Toast/ToastContainer.tsx#L3

(great project, by the way!)

Allow title prop of `Menu.Group` to be `PropTypes.element`.

Would be useful when Menu.Group#title would be also allow element in addition to string. So it's easier to combine <Hidden.Container> and <Menu.Group>.

<Menu.Group
  title={<Box onClick={hidden.toggle}>Group A</Box>}>
  <Hidden isVisible={hidden.isVisible}>
    <Menu.Item>Item 1</Menu.Item>
  </Hidden>
</Menu.Group>

Warning message in browser console:

Warning: Failed prop type: Invalid prop title of type object supplied to MenuGroup$$1, expected string

Current propTypes:

MenuGroup.propTypes = {
  children: PropTypes.node.isRequired,
  title: PropTypes.string
};

Proposed propTypes:

  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])

Example Menu.jsx:

import React from "react"
import {
  Set,
  Box,
  Flex,
  Menu,
  Hidden,
  Text,
  ThemeProvider,
  css,
} from "fannypack"
export const theme = () => ({
  Menu: {
    Group: {
      base: css`
        cursor: pointer;
        user-select: none;
      `,
    },
    Item: {
      base: css``,
    },
  },
})
export default ({ ...otherProps }) => {
  return (
    <ThemeProvider theme={theme()}>
      <Box {...otherProps}>
        <Menu a11yTitle="Main menu">
          <Hidden.Container defaultVisible={true}>
            {hidden => (
              <Menu.Group
                title={
                  <Flex onClick={hidden.toggle}>
                    <Text flex="1">Group A</Text>
                    <Text>{hidden.isVisible ? "opened" : "closed"}</Text>
                  </Flex>
                }
              >
                <Hidden isVisible={hidden.isVisible}>
                  <Menu.Item>Item 1</Menu.Item>
                  <Menu.Item>Item 2</Menu.Item>
                  <Menu.Item isActive>Item 3</Menu.Item>
                  <Menu.Item>Item 4</Menu.Item>
                </Hidden>
              </Menu.Group>
            )}
          </Hidden.Container>
        </Menu>
      </Box>
    </ThemeProvider>
  )
}

Example Menu.mdx:

import { Playground } from "docz"
import Menu from "./Menu"

<Playground>
  <Menu />
</Playground>

Add ability to choose a theme in the Fannypack docs

Close a toast programmatically

I currently am using the Toast Container with the Close button disabled. I would like to be able to programmatically close the Toast. There doesn't appear to be a way to do this.

<Set isVertical> should remove flex-start and flex-wrap.

Makes no sense to wrap Set's children when isVertical is set.

Also makes sense to fill the width by removing align-items: flex-start. But it might not the case if you, e.g. don't want to fill the width of Buttons.

What it is:

<Set isVertical>
  <Input />
  <Input placeholder="Jake Moxey" marginTop="major-1" />
</Set>

What it should be:

<Set isVertical style={{ alignItems: "unset" }}>
  <Input />
  <Input placeholder="Jake Moxey" marginTop="major-1" />
</Set>

[v5] Modal isn't returning focus to disclosure

Visit https://v5.fannypack.style/utilities/modal/
Click on any "Open modal" button
Close the modal by any means

Focus should return to the disclosure button, but it's not happening. The same happens with Dialog.

Tried to look into the code to find something, but couldn't figure it out. Other components such as DropdownMenu and Popover seem to work fine.

InputField.Formik typescript -> it's not exported in the types, I can see it on the const

Property 'Formik' does not exist on type 'FunctionComponent'.ts(2339)

Add Alert Component

<Alert palette="primary">Alert Message</Alert>

Migration to Reakit v1

Reakit v1 was released a few weeks ago now, so I think it would be nice to start to think about migrating from v0 to v1.

See the Reakit v1 migration guide here

I anticipate that this migration will be an incremental migration, starting with the Fannypack foundation, then moving to a per-component basis.

Here is the Reakit v1 branch

Below are the high-level steps to achieving the migration:

Foundation

Install Reakit v1 on an aliased package (reakit-next@npm:reakit@beta)
Add in the Reakit v1 Provider
Use styled-components independently
- NOTE: We will probably migrate to styled-components once v0 is fully out, and still depend on reakit/styled in the meantime.
Utility to wrap a Reakit component with reset styling, CSS props & spacing/color/font style overrides.

Primitives

Create a Box component
- Wraps around Reakit v1's Box
- The reason why we won't directly export Reakit v1's Box is because it now doesn't come with reset styles, inbuilt CSS props & Fannypacks spacing/color overrides.
Create Block, InlineBlock, Inline, Flex, InlineFlex, Grid components
- These primitives are now removed in Reakit v1
- It will use Fannypack's Box

Typography

TODO

Layout

TODO

Components

TODO

Form

TODO

Utilities

TODO

Templates

TODO

Add ability to pass in custom Icon SVG paths in the theme

Currently, Fannypack uses Blueprint Icons as the default icon set. However, it would be nice to add the ability to add any icon set (such as Font Awesome or something alike). I'd imagine that you will be able to pass an icon set (SVG paths) in the theme, which the Icon component will then reference.

button size type includes sizes bigger than large

I feel like xlarge, xxlarge, xxxlarge shouldn't exist as options since it just goes up to large right now.
looks like button uses a shared size prop type...maybe should have its own? or go up to those sizes.

Breadcrumbs Component

👷‍♀️ Work in progress 👷‍♀️

Add Avatar

Access to props?

Hi,
Quick question I can't figure out. Is there a way to get access to the props of the components?

For instance,

import { Switch, SwitchProps }from 'fannypack';

reakit allows you to do so.

import { LabelProps as ReakitLabelProps } from 'reakit/ts';

Thanks for the excellent work!

Responsive typography

Hi! Does exist a way to manage the responsiveness of the font-size?

Example:

Desktop: font-size: 18px;
Mobile: font-size: 14px;

Thanks for your time and attention!

Page templates

It would be nice to have some simple "out-of-the-box" template components which users can use to easily layout their website.

Some simple templates we could start off with could be:

Page content
Page with a sidebar
Page with a sidebar & header
Page with a navbar

Setting text color when overriding palette for Button

I'm using a Button like this:

<Button palette="primary">test</Button>

I'm overrriding the primary palette color successfully with this code:

theme = {
  palette: {
    primary: '#4182c3'
  }
};

The text color gets converted though to #000000 at the same time, from being #ffffff before my override.

What's the mechanism changing the text color here?

Is the text color for a specific palette color possible to define?

Scroll lock on display modal

I was just wondering if it's possible to lock the scroll on display modal?

Missing code property in elementProps for Markdown Component

I can't style the code or pre tag that was created using the markdown component,

code property doesn't exist in the tags list.

https://github.com/fannypackui/fannypack/blob/5272fec8812413b3f38597891be206df2f30e833/packages/fannypack/src/Markdown/Markdown.tsx

Add contribution guidelines

Let's put in some guidelines to help guide some poor souls (e.g. me) out of the dark.

FYI things:

using styled-tools

Things we easily forget...

adding your config to types
editing themes.mdx to include your component config

Typescript types missing -> can't use in typescript ?

Just wondering I see this is wrriten in typescript but I install it and:

  Try `npm install @types/fannypack` if it exists or add a new declaration (.d.ts) file containing `declare module 'fannypack';`ts(7016)```

Add a loading indicator to Input and Select

Currently, Input and Select don't have loading indicators even though isLoading is specified as a prop. Need to add it in.

Fannypack v5 Roadmap

Fannypack v5 is now underway - a complete rewrite of the underlying internals of Fannypack. This issue aims to be an umbrella issue to track work in progress of the rewrite. The new Fannypack will use Emotion for it's CSS-in-JS solution & use Reakit v1 to leverage accessibility, customisability & composibility in it's components.

The main motivation to rewrite Fannypack is to support Reakit v1, hooks, smaller bundle size, as well as better composability, themeability and accessibility. Whilst a major refactor of v4 could have been quite possible, I felt a rewrite was more appropriate as I wanted to start off fresh & incorporate learnings from v4.

Fannypack v5's API will be very similar to v4, however there are a few breaking changes as noted below.

I'm planning to incrementally migrate every component from v4 onto v5. Component styling will remain the same as v4.

Check out the v5 branch

Here is the current TODO list for v5. Feel free to build any uncompleted component below. If you would like to take on a component, please comment which component you would like to take (make sure nobody has mentioned it in the comments too!). Once you have commented, please raise an issue with the title 'Add <{Component}>', and I will label this as 'in-progress'.

Here is a contributing guide to get you started

Foundation

Provider
GlobalStyles

Primitives

Typography

Layout

Components

Form

Form Adaptors

Formik
React Final Form
React Hook Form
Redux Form

Utilities

Shells

Page.Content
Page.WithSidebar
Page.WithHeader

Addons

PaymentCardInput
PhotoUpload
HighlightedCode
Markdown

Copy Blocks

Fannypack v5 will also introduce a few breaking changes.

Breaking changes to date

Removed absolute, fixed, static, sticky props from <Box>.
- They could introduce an "impossible" state. E.g. <Box fixed absolute>
- Migration Steps:
  - Use the position prop. <Box fixed> -> <Box position="fixed">
Removed row, column, rowReverse, columnReverse from <Flex>.
- They could introduce an "impossible" state. E.g. <Flex row column>
- Migration Steps:
  - Use the flexDirection prop. <Flex row> -> <Box flexDirection="row">
Added a fresh palette colour scheme. See more
Added a subtle animation to the hover & active event on Button.
Converted Fannypack's breakpoints into it's own theme field. See more
- theme.layout.mobileBreakpoint -> theme.breakpoints.mobile
- theme.layout.tabletBreakpoint -> theme.breakpoints.tablet
- theme.layout.desktopBreakpoint -> theme.breakpoints.desktop
- theme.layout.widescreenBreakpoint -> theme.breakpoints.widescreen
- theme.layout.fullHDBreakpoint -> theme.breakpoints.fullHD
Moved HighlightedCode to a separate package (fannypack-addon-highlighted-code) as a Fannypack "addon".
Renamed layout.gapFactor to layout.gapUnit
Renamed verticalAt to verticalBreakpoint on <Group>

Typescript type issues, for input fields

Switch can be bool as well??

index.js:1375 Warning: Failed prop type: Invalid prop `value` of type `boolean` supplied to `Switch`, expected `string`.

Input type number ?!

eg:
<Field component={InputField.Formik} name="number" type="number" label="Number" />

index.js:1375 Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `Input`, expected `string`.

Full logs:

index.js:1375 Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `InputField`, expected `string`.
    in InputField
    in Unknown (created by FieldInner)
    in FieldInner (created by Context.Consumer)
    in FormikConnect(FieldInner) (at EditVenue.tsx:193)
    in form
    in Unknown (created by Context.Consumer)
    in Form (at EditVenue.tsx:189)
    in Formik (at EditVenue.tsx:188)
    in div (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by styled__Container)
    in styled__Container (created by Container)
    in Container (at EditVenue.tsx:184)
    in div (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by HiddenComponent)
    in HiddenComponent (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by TabsPanelComponent)
    in TabsPanelComponent (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by styled__TabPanel)
    in styled__TabPanel (created by TabPanel)
    in TabPanel (at EditVenue.tsx:182)
    in InnerContainer (created by Container)
    in Container (created by StepContainer)
    in StepContainer (created by TabsContainer)
    in TabsContainer (at EditVenue.tsx:90)
    in div (at AuthenticatedLayout.tsx:14)
    in AuthenticatedLayout (at EditVenue.tsx:89)
    in EditVenue (at ProtectedRoute.tsx:25)
    in ProtectedRoute (at App.tsx:55)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at App.tsx:49)
    in IdProvider (created by Provider)
    in Provider (created by Provider)
    in ThemeProvider (created by Provider$$1)
    in Provider (created by Provider$$1)
    in Provider$$1 (created by Provider)
    in Provider (at App.tsx:48)
    in HelmetProvider (at App.tsx:47)
    in ApolloProvider (at App.tsx:46)
    in ApolloProvider (at App.tsx:45)
    in AppProvider (at App.tsx:44)
    in ErrorBoundary (at App.tsx:43)
    in App (at src/index.tsx:6)

Using `FieldWrapper` gives a TypeError.

Error at least in versions: 4.11.2 and 4.11.3.

Example for docz in MDX:

import { FieldWrapper } from "fannypack"

<FieldWrapper />

Error message.

TypeError: Cannot read property 'type' of undefined

I get the same error when I add attributes and children to the FieldWrapper.

Font awesome icons don't work when ThemeProvider isStandalone is set

Adding fontawesome icon sets when using fannypack with isStandalone prop in ThemeProvider breaks the app.

Fannypack Roadmap

Feel free to build any uncompleted component below. If you would like to take on a component, please comment which component you would like to take (make sure nobody has mentioned it in the comments too!). Once you have commented, please raise an issue with the title 'Add <{Component}>', and I will label this as 'in-progress'.

Primitives

These will just be an export of Reakit's primitive components (we are including them for ease of development):

Layout

<Columns>
<Column>
<Container>
<Pane>

Typography

Components

Form

Utilities

Extras

<Timeline>
<Rating>

Misc

Ability to import on a per-component basis for consumers who don't support tree shaking (e.g. import Button from 'fannypack/Button'

Formik Adapter does not work with FieldArray

When I attempt to use a FieldArray from Formik

    <Formik initialValues={{ criteria: ["whatevs"] }} onSubmit={console.log}>
      {props => {
        return (
          <Form>
            <FieldArray name="criteria">
              {arrayHelpers => (
                <div>
                  {props.values.criteria.map((criterium, index) => (
                    <FormikInputField
                      key={index}
                      name={`criteria.${index}`}
                      label="Name"
                    />
                  ))}
                  <Button type="button" onClick={() => arrayHelpers.push("")}>
                    Add Criteria
                  </Button>
                </div>
              )}
            </FieldArray>
            <Set>
              <Button>Done</Button>
            </Set>
          </Form>
        );
      }}
    </Formik>

I get the following error:

Formik Version: 1.5.1
Fannypack Version: 4.12.4

Timeline component

Work in progress!!

TypeError: cannot read property 'viewBoxWidth' of undefined related to Icons

I keep getting the following error when trying to use anything with an Icon property:

TypeError: Cannot read property 'viewBoxWidth' of undefined

I've installed both solid and regular fontawesome libraries as described in the documentation. I'm new to react so I could be doing something really dumb but I've tried just copy and pasting the code in the docs into the playroom provided by yourselves and it throws up the same error.

Any help is greatly appreciated.

Accordion component

👷‍♀️ Work in progress 👷‍♀️

Dev tasks:

Some of the keyboard nav implementation is in src/Menu/Menu.tsx to reference
a11y good practices at https://www.w3.org/TR/wai-aria-practices/#accordion
reuse built-in fannypack components if possible e.g. https://fannypack.style/utils/hidden may also be useful.

Switches changing colour?

The colours on the switch seem to change to the default theme when clicked.

You can see it in the docs

IE11 Support

I'm not entirely sure if IE support has ever been on the map for Fannypack, but I couldn't find any information about your browser support strategy, so here I am :)
Most of the major issues, polyfills aside, are fundamentally "cosmetics" and mostly revolving around the use of IE unsupported unset and initial keyword in CSS.
Fannypack main site being unusable on the infamous browser seemed to me like a strong signal towards its NON-support, but since Reakit is IE11 compatible I was wondering if that was accidental or planned.

Override Border on Input

I cannot find a way to remove or override the border style using the Input component. Since under the covers it looks like is an wrapped in a

anytime I style
the border for it just styles the

that is wrapped in.

I have tried overriding styles using CSS props, styled-components, and emotion (css, styled) but they all just style the div that input in wrapped in.

jxom / fannypack Goto Github PK

fannypack's Introduction

fannypack's People

Contributors

Stargazers

Watchers

Forkers

fannypack's Issues

Foundation

Primitives

Typography

Layout

Components

Form

Utilities

Templates

Foundation

Primitives

Typography

Layout

Components

Form

Form Adaptors

Utilities

Shells

Addons

Copy Blocks

Breaking changes to date

Primitives

Layout

Typography

Components

Form

Utilities

Extras

Misc

Recommend Projects

Recommend Topics

Recommend Org