Starting a conversation:
Foundation 6.4 has been released with an all new grid and syntax so I guess the components need to be updated to support the new grid - probably with continued support for the existing - now legacy - float grid as people might still want to use it.
The new components shouldn't be too difficult to add and, without promising too much, I might be interested in helping out; I just don't want to encroach on any work someone else is already doing to that end.

Hello,
Thanks for this lib, awesome work !
I am starting to code the foundation off-canvas component, but I am bit confused on how to start.

As I understood while reading the Slider, Tooltip, Reveal, other JS Components issue's comments, the lib should re-code the JS Components without any JQuery dependency. My problem is that in the case off the off-canvas, the component make use of keyboard and media query javascript utilities. And sadly both of them use a JQuery dependency.

Even it can be fast to drop the jquery depencencies (use only $.find, $.on, $.off) to make a vanilla dependency, should'nt it easier to rely on some well-tested vanilla libraries for foundation.utils.* ?

Hello, I'm fairly new to React (and not an expert at JS in general). Do you have any suggestions on the best way to override the built in enums that get imported into each component?

I am using the scss version of foundation-sites, and I've made some modifications to the settings file. I've added new colors to the foundation-palette (what controls the colors for components...primary, secondary, warning, etc) is one change that comes to mind, but there are probably others as well.

How would I make these usable with react-foundation? In the colors example, I now have a class called hollow that I would need to be available in ButtonColors, and in LabelColors for sure.

I believe we need to have another version released, which supports new versions of React

Regards,

Is there a way to add custom breakpoints?

In my current SCSS version of foundation, I just have to add another line with the name of the breakpoint and size.

Surely there is a way to do this with this component?

I wrote an initial implementation of the Reveal component for a project I've been working on:
https://gist.github.com/crisu83/9f18311b4350de7a5a59b2192c5b09ee

Any comments?

What did you do?

Added 'full' property to GridContainer - e.g. <GridContainer full />

What did you expect to happen?

Container renders with full added to the div's class without console warnings.

What actually happened?

Container renders with full added to the div's class but browser console emits a warning and a stack trace:

Warning: Received `true` for a non-boolean attribute `full`.
If you want to write it to the DOM, pass a string instead: full="true" or full={value.toString()}.
    in div (created by GridContainer)

(This warning is also emitted by later versions of enzyme (I'm on 3.2.0), but not the one included in the project (2.1.0)).

What version of this module are you using?

0.9.2
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

<GridContainer full />

(or similar warning with fluid):

<GridContainer fluid />

I believe this is because it's not removing the custom props - in the call to removeProps in GridContainer, it's passing the wrong propTypes, it's using Grid.propTypes, it should be using GridContainer.propTypes. I have a fix with updated tests, I'll submit a pull request.

What did you do?

I want to make abide work on form validation

What did you expect to happen?

Form validation, How can i import other js library?

What actually happened?

I tried to import { Abide, Foundation } from 'react-foundation';

What version of this module are you using?

0.9.2
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

code goes here

In the current implementation Foundation classes (e.g. badge) are not added to a component when a custom class name is defined.

Here is how the Badge class names are currently built:

createClassName(props.className || 'badge', props.color, generalClassNames(props))

I propose that we add a boolean property that controls whether or not the Foundation class name is added, e.g. noDefaultClassName. With this change the implementation above would read:

createClassName('badge', props.className, props.color, generalClassNames(props))

I get the following error when trying to transpile with babel through webpacker. My guess is I'm missing a babel plugin, but I haven't been able to figure out which one. Has anyone else experienced this and found a fix?

Thanks!

What did you do?

Installed react foundation

What did you expect to happen?

It to work

What actually happened?

Objects would load without styles or functionally. CSS and js didn't look like it was loaded. Objects used were Link, Button, and Colors. No colors were added to any of the objects during render.

What version of this module are you using?

Latest as of today's date

Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

code goes here

I got the follow error:

Module not found: Error: Cannot resolve module 'classnames' in .../node_modules/react-foundation/lib
 @ ./~/react-foundation/lib/utils.js 16:18-39

which was solved by:
npm install classnames --save

Looking to use this awesome package in a TS project. My options are:

• forgo type checking for now (just tell TS not to check react-foundation)
• write type declarations standalone and submit to DefinitelyTyped. Future users in my situation will have to say npm install react-foundation @types/foundation and the declarations will have to be manually kept in sync with future changes to your API
• send you a PR to integrate the declarations. Future users will only have to say npm install react-foundation and TS will find them. Declarations need to be manually updated in line with API changes.
• send you a PR that ports all your components to TS :) a long shot, but I mention it because some projects where I've submitted a PR with standalone declarations, they tell me they're planning to port to TS anyway soon... Advantage is that there is no need to maintain type declarations separately from implementation code, so they're always correct.

Thoughts, or any plans in this direction?

What did you do?

Looked for examples of Accordion & XY-Grid on https://react.foundation/

What did you expect to happen?

I expected there to be examples for every component provided in react-foundation

What actually happened?

Those two components (and possibly others) were missing examples.

What did you do?

npm install

What version of this module are you using?

node v6.3.1
npm 3.10.3

Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated to-iso-string@0.0.2: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated jade@0.26.3: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN prefer global node-gyp@3.4.0 should be installed with -g

Is it possible to use the XY grid with this package?

What did you do?
Tried to create a simple ResponsiveNavigation component.

What did you expect to happen?
No warning. It looks like the isHidden prop is getting passed through to the div via the TitleBar component here: https://github.com/nordsoftware/react-foundation/blob/develop/src/components/responsive.js#L73

I would expect that either removeProps needs to be called before passing the props to the div in Titlebar or isHidden can not be passed down to TitleBar since the component does not appear to be using it: https://github.com/nordsoftware/react-foundation/blob/develop/src/components/responsive.js#L100-L110

There may be other places in the code this is happening. I happened to stumble across this one.

What actually happened?

What version of this module are you using?
0.7.0
Additionally: using latest React 15.3.2 (this warning was introduced in React 15.2.0)

Code

render (
  <ResponsiveNavigation>
    Test
  </ResponsiveNavigation>
);

What did you do?

Using react-16beta with react-foundation failed because react-foundation's Accordion components was using React.PropTypes, which is deprecated in React v15.x and removed in v16; instead of the recommended way of using the dedicated package: prop-types

What did you expect to happen?

Accordion to use prop-types package instead of React.PropTypes

What version of this module are you using?

0.8.0 - 0.8.2 since Accordion is introduced

Please refer to facebook/react#10294 (comment)

Thank you

I tried using this great repo in an isomorphic app. I found that the ResponsiveNavigation component has references to window:

  componentDidMount() {
    window.addEventListener('resize', this.update.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.update.bind(this));
  }

This causes an issue on the server side.

Can you please confirm that this is known behavior. Is there a way to work around this in the code already?

Thanks

Actually I was just about to install and use the react-foundation module when I realized the availability of the component which is identical to ... that I use regularly with react router v4, and I was wondering before amending any of my react code if this will be an issue...?
Has anyone tried using both in the same component?

What did you do?

npm install --save react-foundation

What did you expect to happen?

program would run

What actually happened?

console.warn node_modules/react/lib/lowPriorityWarning.js:40
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

What version of this module are you using?

"react-foundation": "^0.8.0",
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

import { Badge, Colors } from 'react-foundation';
...
...
          <div className="badge-colors-example">
            <Badge color={Colors.SECONDARY}>2</Badge>
            <Badge color={Colors.SUCCESS}>3</Badge>
            <Badge color={Colors.ALERT}>A</Badge>
            <Badge color={Colors.WARNING}>B</Badge>
          </div>

What did you do?

Triggered a build with no code changes.

What did you expect to happen?

Build passes.

What actually happened?

Build failed.

What version of this module are you using?

develop

I updated the react-foundation docs link 5791aa3

It's only a minor .md change, but an external dependency broke the build for Node.js 4.x (5.x passes):

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint@<2.3.0

https://travis-ci.org/nordsoftware/react-foundation/jobs/121088914#L183

eslint 2.7.0 was only released three days ago, so that looks like the trigger.

We have:

    "babel-eslint": "^5.0.0",
    "eslint": "^2.3.0",

https://github.com/nordsoftware/react-foundation/blob/develop/package.json#L57-L68

What did you do?

Tried to use XY-Grid

What did you expect to happen?

It to work.

What actually happened?

I'm having issues with the XY-Grid. Grid works fine though.

With XY-Grid (Grid & Cell) I get the following (my file stays the same though other than swapping out the react-foundation components:

What version of this module are you using?

0.9.0

Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

XY-Grid (this doesn't work):

import React from 'react';
import { GridContainer, Grid, Cell } from 'react-foundation';

export class ProductList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <GridContainer>
        <Grid>
          <Cell>
            Test1
          </Cell>

          <Cell>
            Test2
          </Cell>

          <Cell>
            Test3
          </Cell>
        </Grid>
      </GridContainer>
    );
  }
}

Grid (this works):

import React from 'react';
import { Row, Column } from 'react-foundation';

export class ProductList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <Row>
        <Column>
          Test1
        </Column>

        <Column>
          Test2
        </Column>

        <Column>
          Test3
        </Column>
      </Row>
    );
  }
}

Things needed:

• Update .github/CONTRIBUTING.md
• Update badge links in the README
• Switch default branch at https://github.com/digiaonline/react-foundation/settings/branches
• Delete develop branch

It feels wrong to use valid HTML attribute names for component properties (button color, etc.).

Maybe we should prefix the attributes with something like f or rf (as in react-foundation).

Then again, while fColor sounds ok, fOffsetOnLarge doesn't sound that nice.

HOWEVER, this would remove the need for lodash.omit and reduce the number of dependencies, so I would seriously consider this.

EDIT: I already removed the lodash depedencies so that point is not valid anymore.

[email protected]
[email protected] 

Hey all,

New installs of foundation-sites no longer have out of the box support for the float-grid system used by the Row and Column components. It has to be specifically enabled. This will no longer work for folks like myself making fresh codebases with the latest versions of foundation-sites and react-foundation:

<Row className="display">
   <Column small={2} large={4}>4 columns</Column>
   <Column small={4} large={4}>4 columns</Column>
   <Column small={6} large={4}>4 columns</Column>
</Row>

Digging through the commits for react-foundation, I saw that all the work to use the XY-grid system has already been done, and this works perfectly:

<Grid className="display">
     <Cell small={2} large={4}>4 columns</Cell>
     <Cell small={4} large={4}>4 columns</Cell>
     <Cell small={6} large={4}>4 columns</Cell>
</Grid>

Updating the docs to reflect this would save a lot of headaches for foundation newbies like myself.

Appreciate all the work you've put into this!

What did you do?

Installed react-foundation step-by-step;

1. npm install -g create-react-app
2. create-react-app test
3. cd test
4. npm install react-foundation
5. I replaced the code in App.js to the following;

import React, { Component } from 'react';
import { Column, Row } from 'react-foundation';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className="gridgrid">
          <Row>
            <Column small={3}>
              <div>1</div>
            </Column>
            <Column small={3}>
              <div>2</div>
            </Column>
            <Column small={3}>
              <div>3</div>
            </Column>
            <Column small={3}>
              <div>4</div>
            </Column>
          </Row>
        </div>
      </div>
    );
  }
}

export default App;

6. npm start

What did you expect to happen?

I expected to see a grid system with 1 row and 4 columns (as in the examle on https://react.foundation/).

What actually happened?

When I look at the Foundation component's CSS in the browser, no CSS is applied. It looks like there's no foundation.css available. Al elements (columns) are placed under each other.

What version of this module are you using?

0.7.0

Would it be possible to include in the Github repo the css used for each component in react.foundation?

I believe it would come very handy to many, to have some default styling rather than implementing each and every class manually.

Thank you

Cell accepts both GeneralPropTypes and FlexboxPropTypes but only calls generalClassNames(props). It does not call flexboxClassNames(props).

What did you do?

Pass alignX='center' or centerAlign to a Cell

What did you expect to happen?

Contents of cell to be centered

What actually happened?

Contents were not centered. Cell generated did not have any other classes.

What version of this module are you using?

0.9.3. Foundation-sites: 0.9.5.

Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

<Cell alignX='center'>alignX</Cell>
<Cell centerAlign>centerAlign</Cell>

Hi, I'd expect the isDisabled property to also have semantic functionality like it does on the normal <button> html component instead of purely cosmetic styling as currently is the case.

What did you do?

• added isDisabled={true} to a Button

What did you expect to happen?

I expected the button to not call its onClick method when clicked

What actually happened?

The method was called

What version of this module are you using?

^0.9.6

Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

<Button
          id="next-button"
          onClick={() => {console.log('hi!') }}
          isDisabled={true}
        >
          Next step
</Button>

What did you do?

Createt a column with pushOnSmall={4} and pushOnMedium={0}

What did you expect to happen?

Rendered HTML:

<div class="small-push-4 medium-push-0" ></div>

What actually happened?

Rendered HTML:

 <div class="small-push-4" ></div>

What version of this module are you using?

0.6.8

This is the offending line (line 92 in grid.js):

    props.pushOnMedium ? `medium-push-${props.pushOnMedium}` : null,

0 evaluates to false and class is not added. This also applies to a bunch of other classes.

I currently add className={"medium-push-0"} to my column as a workaround, but I would prefer a more uniform option.

Do you have plans to include Slider, Tooltip, Reveal, and the other components that require JS to create them?

Is there a way to use one or two components only? Without bringing whole library into the app?

This looks scary when you only need a Switch for example.

npm install react-foundation --save

import Foundation from 'react-foundation';
// Use components ...

What did you do?

I installed react-foundation using npm.
Then in my component I imported the necessary react-foundation components.
import { Accordion, AccordionItem, AccordionContent, AccordionTitle} from 'react-foundation'

Then I set up my component as shown below (there's an axios get being called in componentDidMount to set the donors state).

<Accordion>
	{this.state.donors.map(function(donor, i) {
		return(
			<AccordionItem key={donor.title}>
				<AccordionTitle>{donor.title}</AccordionTitle>
				<AccordionContent>
					<div dangerouslySetInnerHTML={{__html: donor.markup}} />
				</AccordionContent>
			</AccordionItem>
		);
 	})}
</Accordion>

What did you expect to happen?

I expected the accordion to open and collapse when clicking the titles

What actually happened?

Nothing happens when you click the titles. The content is never shown.

What version of this module are you using?

Latest version

Foundation is undefined.

import Foundation from 'react-foundation'
console.log(Foundation)
=> undefined

What did you do?

I installed react-foundation using npm install react-foundation --save and confirmed it is added to package json. And node_modules.

"dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-foundation": "^0.9.6",
    "react-scripts": "2.1.3"
  },

Logging react in the same way returns a function.

What did you expect to happen?

I expected that would be able to add a something like this and have it work.

<div className="button-basics-example"> 
  <Button color={Colors.SUCCESS}>Save</Button>
</div>

If I am using it wrong I apologize but as I perceive it, the docs suggest this this how it should be used.

What actually happened?

The above component renders without any styles.

What version of this module are you using?

0.9.6

I am using create-react-app and react 16.7. Please advise what I could be doing incorrectly.

What did you do?\

use Column and Row properties with properties such as isColumn, offsetOnMedium, etc...

What did you expect to happen?

react 15.2.0 not to throw warnings

What actually happened?

spams Unknown Prop Warnings

What version of this module are you using?

^0.6.8

I imagine this might be an issue throughout the library, but Row and Column were the only components in use right now.

facebook/react#6800

What did you do?

Add a Column component with the prop isColumn.

What did you expect to happen?

A div with the class column instead of columns.

What actually happened?

The expected result is correct, but a warning regarding the prop isColumn show in the console.

What version of this module are you using?

0.9.4
Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

import React from 'react';
import ReactDOM from 'react-dom'
import { Row, Column } from 'react-foundation';

const Grid = () => (
  <Row>
    <Column isColumn>column</Column>
  </Row>
);

ReactDOM.render(<Grid />, document.getElementById('root'));

So far npm i throws an error as it calls yarn which is not mentioned as a requirement and also many do not (yet) use yarn.

The accordion component is currently missing, and is one of the more useful components and having it would be a good thing.

Some of the badges are broken, probably due to the organization rename almost a year ago

• test coverage
• maintainability
• Scrutinizer
• npm version
• npm downloads

What did you do?

Tried to use ResponsiveNavigation

What did you expect to happen?

Rendering of titleBarTitle is unknown

What actually happened?

Rendering of titleBarTitle is unknown

What version of this module are you using?

latest

Please include code that reproduces the issue. The best reproductions are self-contained scripts with minimal dependencies.

<ResponsiveNavigation titleBarTitle="Test">
                <TopBarLeft>
                    <Menu>
                        <MenuText>Test</MenuText>
                        <MenuItem isActive>
                            <a href="/">Home</a>
                        </MenuItem>
                    </Menu>
                </TopBarLeft>
                <TopBarRight>
                    <Menu alignment="right">
                        <MenuItem>Logoutt</MenuItem>
                    </Menu>
                </TopBarRight>
            </ResponsiveNavigation>

I'm not too familiar with styling frameworks so was wondering if this would work with React Native. If not, are there any alternatives as far as Foundation goes that would work with mobile?
Thank you!

What did you do?

tried to use Tabs, TabItem, TabsContent, and TabPanel

What did you expect to happen?

display respective tabs' panel

What actually happened?

Tabs appear but no content appears

What version of this module are you using?

latest

var Panel = React.createClass({
  componentDidMount: function(){
    $(document).foundation();

    var control_dropdown = new Foundation.DropdownMenu($('.control-dropdown'));
  },

  render: function(){
    return(
      <Column large={this.props.size} className="panel">
        <Row className="panel-heading">
          <Column>
            <h4 className="heading-title">Title</h4>
          </Column>
          <Column large={2} className="heading-controls" middleOnLarge>
            <Menu className="control-dropdown dropdown control-menu" alignment={Alignments.RIGHT}>
              <MenuItem><span className="fa fa-bar-chart" /></MenuItem>
              <MenuItem>
                <span className="fa fa-ellipsis-v" />
                <Menu isVertical>
                  <MenuItem><a href={"#"}>Option1</a></MenuItem>
                  <MenuItem><a href={"#"}>Option2</a></MenuItem>
                  <MenuItem><a href={"#"}>Option3</a></MenuItem>
                  <MenuItem><a href={"#"}>Option4</a></MenuItem>
                </Menu>
              </MenuItem>
            </Menu>
          </Column>
        </Row>
        <Row className="content" centerOnLarge>
        {this.props.children}
        </Row>
      </Column>
    );
  }
});

var DashPanel1 = React.createClass({
  render: function(){
    return (
      <Panel size={5}>
        <Column large={12}>
          <Tabs>
            <TabItem><a href={"#tab1"}>Table1</a></TabItem>
            <TabItem><a href={"#tab2"}>Table2</a></TabItem>
          </Tabs>
          <TabsContent>
            <TabPanel id={"tab1"}>
              <div id={"table1"} />
            </TabPanel>
            <TabPanel id={"tab2"}>
              <div id={"table2"} />
            </TabPanel>
          </TabsContent>
        </Column>
      </Panel>
    );
  }
});

Hey Guys,

I'm looking to see what you might want help with. I think I could flesh out some examples, look into making some of your components stateless, maybe connect the examples to redux to show a prototype for the more complex "dumb" components. I'd also like to add certain syntactic/structural changes according to the linters I've been used to but I don't want to make any PRs before getting a blessing. My team is currently using a lot of this so I'd like to flesh some things out as we do.

Currently the react.foundation website seem down. Is there another source for the documentation ?

What did you do?

Visited react.foundation

What did you expect to happen?

Load the page

What actually happened?

SSL Certificate error