mashmatrix / react-lightning-design-system Goto Github PK

Hi there!

I work in the Salesforce UX team, and I am the creator the the Lightning Design System Starter Kit and one of our designers has just started a react branch in which he put some boilerplate code to prototype using JSX.

I was wondering if that was something that'd be of interest to you. If so, feel free to contribute to that branch or to fork the starter kit and make your own version of it!

PS: thanks for your work on react-lightning-design-system, it's great to see such good stuff emerging from the community.

I did some development and its very slow
because after every change babel compile all lib and it takes much time
So I think we should try webpack with hot reloading or gulp browserify with partial load

There's no concrete policy for react-lds to follow the official SLDS update. My suggestion is:

• Follow the latest SLDS major version update as much as possible, but should place some reasonable regression check period.
• Features/fixes are only applied to the latest supporting SLDS version. Hotfix for the older version will be applied only when it is strongly required.
• The update of react-lds which includes a support of new SLDS major version should be a major update. That is, react-lds in the same major will target only one SLDS major version. (The major version number of react-lds might not sync with the SLDS, though).

If you have any opinion please give comments below.

Lookup (controlled) example is not working correctly from ver 1.3.0.
When an item is selected, the selection search box is not rendered even clicking the pill's close button.

Expected behavior (screencast taken in 1.2.1)

When rendering a

Example:

<Form>
    <span></span>
    {null}
</Form>

Error:

Uncaught TypeError: Cannot read property 'type' of null
renderFormElement @ Form.js:64
mapSingleChildIntoContext @ ReactChildren.js:108
traverseAllChildrenImpl @ traverseAllChildren.js:67
traverseAllChildrenImpl @ traverseAllChildren.js:83
traverseAllChildren @ traverseAllChildren.js:155
mapIntoWithKeyPrefixInternal @ ReactChildren.js:128
mapChildren @ ReactChildren.js:150
render @ Form.js:99

This looks to be due to a missing null check on element in renderFormElement.

In FormElement, the control is built dynamically based on the props set; which includes adding a label and dropdown specific elements (if needed). This is then passed into renderFormElement as the "children" as an array, and rendered in place.

In React 15, this throws the following warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using

. See https://fb.me/react-warning-keys for more information.

I have a temporary fix on my fork which simply relies on passing the "top" and "bottom" pieces individually and then rendering them individually. If you would like me to offer a PR of the change, please notify me and I will patch out those specific changes (along with some additional tests) into their own branch and offer a PR.

@stomita what would you say to a suggestion to add @ButuzGOL or maybe another trusted active contributor to the team so they could perform merges while you're away?
(not me I'm still a JS/React newbie)

Steps to reproduce:

1. Create a without passing a value property; or by passing an undefined value.
2. Render the page.

Expected result:
An uncontrolled, empty DateInput is rendered without warnings or errors

Actual result:
An uncontrolled, empty DateInput is rendered, but the following error is shown in the console:

warning.js:44 Warning: value prop on input should not be null. Consider using the empty string to clear the component or undefined for uncontrolled components.

I haven't checked if this is a React 15 specific issue but when I get a chance I will verify.

In Salesforce, a picklist field can contain a value which is not defined in its option values. The former Picklist before the latest merge can contain a value and show its value in the picklist label. Unfortunately the #136 has reset the value and not showing the intial value in the picklist label.

<Picklist value="Z">
   <PicklistItem value="A">A</PicklistItem>
   <PicklistItem value="B">B</PicklistItem>
   <PicklistItem value="C">C</PicklistItem>
</Picklist>

The above picklist component should render "Z" in the button, not "Select an Option".

Suggestion:
To make some nice home page
And changes inside components pages

HI

I have added the option to provide custom icon/object as LookupCandidateList for Lookup component.
Can you please review and add it,
pull request
Thank you,
Alex

DatePicker show calendar when component is disabled, the calendar button is not disabled

I am currently using onFocus but obviously there are issues and ugly hacking which needs to be done because of that...

From ver 1.4 the Input / Textarea / Select component shows duplicate error messages.

In RadioGroup / CheckboxGroup / Picklist / DateInput / Lookup it shows only one error message.

It was not clear when installing this package that it also requires @salesforce-ux/design-system, but was not listed as a peer dependency.

I suppose it's not an absolute dependency, since it's only stylesheets. In that case, the README could convey that info.

How can I create a Navigation Bar component?
https://www.lightningdesignsystem.com/components/global-navigation/#flavor-navigation-bar

Currently, you need to install it separately if you want styling.

I'm trying to upgrade from version 0.1.22 to 0.2.2, but I'm running into issues when trying to build with webpack.

When I install v0.1.22, the following dependencies installed:

[email protected] node_modules/react-lightning-design-system
├── [email protected]
├── [email protected]
└── [email protected] ([email protected])

However, when I install v0.2.2, I am missing the babel-runtime dependency:

[email protected] node_modules/react-lightning-design-system
├── [email protected]
└── [email protected]

I believe the fix for v0.2 would be to move babel-runtime from devDependencies to dependencies.

Wondering if there are any plans to do this, or if you'd like some help? I'm using a lot of these components for a project right now and am getting warning all over the place.

In Safari 10 in DateInput Component when try to change month or year DatePicker closes unexpectedly
http://screencast.com/t/ds50n4cc2Y8

If you interested in this, please write down a issue/comment when you surface any UI rendering corruption in SLDS 1.0 (I understand some markups are now become obsolete but not examined fully).

HI

I have added the option to set the icon alignment for input field inside the lookup component.
Can you please review and add it,
You can see it in action ( LookupExamples.js ) pull request

Thank you,
Alex

When I am setting a ref for Input, I am getting the Input object but I can't get it's value.

What do you think if we do default airbnb code style ?
Remove
'jsx-quotes': [2, 'prefer-single'], -> So will be double quote
'react/jsx-curly-spacing': 0, -> So wont do space after {
Its based on that in own project I do default airbnb style so it makes some inconvenience of switching
I think it relates to all other projects so its better to support default

I have a question. Was the only way you were able to remove the selected pill and then re-focus to the <input> via the setTimeout() function? https://github.com/stomita/react-lightning-design-system/blob/master/src/scripts/Lookup.js#L329-333

Hi,
When I'm trying to use the DropdownButton in the SF env, I am getting the following error:

Unsafe attempt to load URL https://MYDOMAIN-dev-ed.my.salesforce.com/assets/icons/utility-sprite/svg/symbols.svg#down from frame with URL https://MYDOMAIN-dev-ed.lightning.force.com/c/main.app. Domains, protocols and ports must match.

Obviously this is a CORS issue. The question is how I fix it in this case?

Thanks.

What do you think ?
salesforce-ux/design-system#147

@snownoop The feature you added in previous PR #95 - adding property to set minDate / maxDate to date picker - is not working as anticipated. In the datepicker example "Datepicker min date", disabled and enabled days are not shown what we expected. Following is the calendar of Aug 2016 where minDate is set to "2016-07-10".

In form examples, the includeTime dateinput prop is not working.

In 1.3.4, it works with time information.

So I am facing 2 issues:

1. I am trying to run the examples project and when I do npm install I am hit with:

  Invalid name: "@salesforce-ux/design-tokens"

1. I've written my component to match exactly your example of Modal #3 and I am getting different results. The HTML structure itself is different. Has the code changed since the examples were made?

Thanks.

In IE11, the DateInput component with onBlur/onComplete event handler will receive the event even when the calendar icon in the component is clicked.

Here is the screen capture when first focused the input field then clicked the calendar icon (in react-storybook)

For contributors to understand the components' expected behavior, need to create stories for components.
The unit test is useless for describing stories, e2e test is heavy to maintain.
Examples can show only a few aspects of component.
I think React Storybook is the suitable for both describing stories and giving a first playground.
(For usual developers, we need more sophisticated example web site or component references)

React 15 had competently removed the use of "ref".

This completely breaks the CheckboxGroup component. I have a change in my fork that fixes this but requires that the user pass down the list of values to the CheckboxGroup.

Is this a PR this project would be interested in? Or would you prefer another approach

To clarify that react-lightning-design-system is actually from the project of my company Mashmatrix development, I would like to transfer this personal repository to the organization's control.

I think this will not have effect almost all of you - except the repository URL becomes different. The license will not change, still provided in MIT. We may put a contributor's agreement to be legally clear.

Currently examples are used for assuring changes will not bring regression visually. For this usage the storybook will be used and storybook hub is easiest way to provide the reviewing PR. Moving these code to storybook is the immediate issue in order to off-load the accepting the incoming PR without bringing regressions.

Currently, the LDS version is at 0.10.1:

https://github.com/stomita/react-lightning-design-system/blob/master/examples/bower.json#L4

I started working on this briefly, and, for the most part, the changes are fairly simple. However, there are some slight markup changes with several components that need to be addressed.

I think encountered a problem when using the DropdownButton element in a FieldSet (and FieldSet.Row)

It looks like the label you specify in the DropdownButton gets misplaced as soon as it is used in a FieldSet.Row.

Here is the full code to replicate that problem:

import React from 'react';

import { DropdownButton, MenuItem, ButtonGroup, FieldSet } from 'react-lightning-design-system';

export default class DropdownButtonBugExamples extends React.Component {
  render() {
    const styles = { padding: '12px' };
    const click = () => alert('Clicked');
    return (
      <div>
        <h2 className='slds-m-vertical--medium'>Dropdown Button Correct</h2>
        <div style={ styles }>
          <FieldSet>
            <DropdownButton type='neutral' label='Neutral' menuAlign='left' onMenuItemClick={ click }>
              <MenuItem icon='check' iconRight='attach'>Menu Item #1</MenuItem>
              <MenuItem icon='none' iconRight='apps'>Menu Item #2</MenuItem>
              <MenuItem icon='none' iconRight='bookmark' disabled>Menu Item #3</MenuItem>
            </DropdownButton>
          </FieldSet>
        </div>
        <h2 className='slds-m-vertical--medium'>Dropdown Button Bug</h2>
        <div style={ styles }>
          <FieldSet>
            <FieldSet.Row>
              <DropdownButton type='neutral' label='Neutral' menuAlign='left' onMenuItemClick={ click }>
                <MenuItem icon='check' iconRight='attach'>Menu Item #1</MenuItem>
                <MenuItem icon='none' iconRight='apps'>Menu Item #2</MenuItem>
                <MenuItem icon='none' iconRight='bookmark' disabled>Menu Item #3</MenuItem>
              </DropdownButton>
            </FieldSet.Row>
          </FieldSet>
        </div>
      </div>
    );
  }
}

Hi , First of all thanks for this great package and sorry for my bad English,

can you tell me how i can implement closing modal on backdrop click ? i think modals must have this feature, thanks again.

@gkoychev The PR #136 is a support of multiselect picklist, which is neat and has successfully been merged. Unfortunately after the merge I noticed that the default selectedText property was set , and the default message is rendered in every not-selected picklists even in Japanese environment. We happened to add i18n text for these components.
So it comes to a question about the need of defaulting this message text. IMO developers want them to be empty or customize by themselves when it is surely required. It can also be said that setting a english text as default may against to language neutrality. How do you think about this ?

I think releases should be done with tags I am always use
https://github.com/tj/git-extras/blob/master/Commands.md#git-changelog
https://github.com/tj/git-extras/blob/master/Commands.md#git-release

@stomita I will create Lookup with multi select could i merge it to this repo?

Firstly, thanks for this excellent library!

Is there a way to set the assetRoot folder to be used for Icons in case it differs from the default of /assets?

When a DateInput component has error property, the input will be rounded by red line border. However the year-picker also has red-line border in the dropdown.

Here's a big ticket. Would you like me to work on this?

Firefox: v50
Screenshot: https://i.imgur.com/Lw1RBqB.png

In Firefox years in a Datepicker module are not shown, works in Chrome & IE. This is most probably because Select is wrongly rendered - the value should be provided inside , not as an argument

Current:
Should be: 2011

Having calls to setState(...) inside of timeouts in the Pickselect component would trigger the typical error:

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

I've submitted PR #127 to fix this issue

The DateInput component's date picker dropdown is shown in separate when it is put in horizontal type form.

Add http://gitter.im to discuss
Add http://travis-ci.org for build checking

I need to be able to hard-code a variable path to the Icon's symbols paths. As it stands right now, there is a semi-defined route "<ASSET_ROOT>/icons/-sprite/svg/symbols.svg".

I will be issuing a PR that adds the ability to hard-code paths based on the category of the symbols. If the category has not been set, then it would default to the above path.

If this is something you'd prefer to not support, please feel free to reject the PR. If there are changes you need me to make, let me know and I'll update the code ASAP.

If you interested in this, please write down a issue/comment when you surface any UI rendering corruption in SLDS 2.0.

SLDS release note (some breaking change information is included)
http://www.lightningdesignsystem.com/release-notes/