Conformance Tests

[levithomason]

The below document is linked in the README.md. I included it here for ease of access.

---

Stardust Component Guidelines

Every component in Stardust must conform to these guidelines. They ensure consistency and optimal development experience for Stardust users.

This document will be minimally maintained. See \test for the current conformance tests.

Extends React.Component

Valid

import React, {Component} from 'react';

export default class MyComponent extends Component {...}

Invalid

import React, {Component} from 'react';

export default class MyComponent {...}

This is a new class, does not extend React.Component.

Constructor name matches component name

Give MyComponent.js is a component attached to stardust.MyComponent:

Valid

export default class MyComponent extends Component {...}

Invalid

export default class extends Component {...}

This is an anonymous class, actually named _deafult.

export default class YourComponent extends Component {...}

This class has the wrong name, it should be .

Has the sd-<component> element as its first child (no wrapper elements)

Valid

export default class Input extends Component {
  render() {
    return (
      <Input />
    );
  }
}

Invalid

export default class Input extends Component {
  render() {
    return (
      <Field
        <Input />
      </Field>
    );
  }
}

Never wrap the component with other components, whether DOM or Composite.

Has props.className after sd-<component>

Valid

<Field className='inherit-this' />
// => <div className='sd-field inherit-this field>...

Invalid

<Field className='inherit-this' />
// => <div className='sd-field field>...

className was not inherited

<Field className='inherit-this' />
// => <div className='inherit-this sd-field field>...

className was inherited before sd-field

<Field className='inherit-this' />
// => <div className='inherit-this sd-field field>...

className was not inherited before sd-field

Has sd-<component> as the first class

Valid

<Divider />
// => <div className='sd-divider ui divider' /> 

Invalid

<Divider />
// => <div className='ui divider' /> 

Missing sd-divider className.

<Divider />
// => <div className='ui sd-divider divider' /> 

sd-divider className does not come first.

Has ui class immediately after sd-<component>

Only for components that utilize the ui class (i.e ui grid but not column).

Valid

<Grid />
// => <div className='sd-grid ui grid' /> 

Invalid

<Grid />
// => <div className='sd-grid grid ui' /> 

grid is immediately after sd-grid.

Has props.className immediately after ui

Only for components that utilize the ui class (i.e ui form but not field).

Valid

<Form />
// => <div className='sd-form ui form' /> 

Invalid

<Form className='loading' />
// => <div className='sd-form loading ui form' /> 

Inherited loading className comes before ui.

<Form className='loading' />
// => <div className='sd-form ui form loading' /> 

Inherited loading className comes after form.

Spreads props

Allows access to the underlying element of concern.

Valid

<Input onFocus={this.handleFocus} />
// => <input type='text' className='sd-input ui input' onFocus={this.handleFocus} /> 

<Input data-my-plugin='do-magic' />
// => <input type='text' className='sd-input ui input' data-my-plugin='do-magic' /> 

Invalid

<Input onFocus={this.handleFocus} />
// => <input type='text' className='sd-input ui input' /> 

onFocus prop was lost.

<Input data-my-plugin='do-magic' />
// => <input type='text' className='sd-input ui input' /> 

data-my-plugin prop was lost.

---

[athurman]

Nice explanation!! Reads super easy!!

[athurman]

were these unnecessary default props, and that is why they were removed?

[levithomason]

Yep, none of these are required now since we inherit props and classes. We don't need to define every prop and it's type, since any prop and type you add will be passed down. We just need to define the ones we need to use. Like className and label.

Same for defaultProps, this library will be generic and assume no defaults. If you'd like 3 rows, simply add rows={3} to the component. 👍

[athurman]

ah, makes total sense! sounds good.

[athurman]

Just a few general questions, but everything looks good!! 🐙

[levithomason]

Cool! I think I covered them all now. Let me know if there are any other questions/comments/doubts.

[levithomason]

Added a link to the guideline doc in the readme.

[levithomason]

We use the classnames module to add the sd-* class, inherit this.props.className and add Semantic UI classes.

[kyleturco]

Everything here looks great to me 🌞