treebohotels / leaf-ui Goto Github PK

Describe the bug
Remove arrow from dropdown.

Performance issue in Select component
Facing delay while rendering a huge list (with more then 200 items) in Select component.

Library

• leaf-ui: v0.38.10

Is your feature request related to a problem? Please describe.
If I need to adjust position of any of the leaf-ui components I can't do it since we don't have a position component like Spacer.

Describe the solution you'd like
A Position component which takes the child and add the position props to it as per the standard css semantics.

Describe the bug
Change greyLight to #dbdbdb

Describe the bug
TextInput Error message font-size should be 12px.

Is your feature request related to a problem? Please describe.
Currently there's a MoreOrLess component built which is purely implemented using CSS and was designed for AMP and web, but it has shortcoming when it comes to solve WEB interactions and visual appearance like trimming the text based on characters and showing Show More inline with the text.

Describe the solution you'd like
Implement a MoreOrLess Component which will have the same API as of existing MoreOrLess for AMP with few extra things to handle like how many characters to show initially after which the Show More will be displayed and on click of it the whole text should be displayed.

Describe the bug
Select Placeholder color - greyLight

Describe the bug
TextArea Error message font-size should be 12px

Multi select auto closes on every select event.

Is this intentionally left out ?

I have a PR ready for this.

Describe the bug
Text Input Label Colour - greyDark

DateRangePickerInput error reset issue
DateRangePickerInput component validation error message is not getting reset.

Is your feature request related to a problem? Please describe.
Currently we don't have TextArea Input for Web

Describe the solution you'd like
The idea is to implement TextArea input with the same API as Text Input.

Describe the bug
After spending 2+ hours troubleshooting, I still cannot get yarn native to work. For starters, expo v32 is no longer supported by expo-cli. I tried upgrading to v33 and v34 using expo upgrade 33, but then encountered error,

I then tried creating a Basestyles.native.js, and then got "Unexpected token" on

I'm unsure how to fix this.

To Reproduce
Steps to reproduce the behavior:

1. Clone repo
2. yarn & yarn native

Expected behavior
The app to work on RNative

Smartphone

• Device: iPhone X 12.4 simulator

Library

• leaf-ui: d479ca6
• node: 10
• npm: 6.9.0

Additional Context
Add any other context about the problem here.

Resolution:
Select.js line 118 shoudl be
return selectedOptions[0].label;

At present <Notification/> has "type" prop validator as string.

Notification.propTypes = {
    type: string
}

It would be good use oneOf validator with predefined types.

Notification.propTypes = {
    type: oneOf(['info', 'success', ...whatever])
}

Shall I raise the PR for this issue?

Option to select multiple dates
Ability to select multiple dates using the DatePickerInput by passing multiple attribute as true.

Describe the bug
Select Label Colour - greyDark

added in styled component

Do you want to request a feature or report a bug?

A nicety

What is the current behavior?

Currently the package.json doesn't have the keywords field that helps in the discoverability leaf-ui through keyword searches.

What can be the possible solution?

Add a keywords field array with terms that help the discoverability of leaf-ui. I've also gone ahead and opened a small PR #68 for the same.

Describe the bug
Secondary button should have white fill.

Move to using automatic releases using semantic-release and travisCI.

Feature

What is the current behavior?

Stories in Storybook are rendered starting from the default position (top left corner of the screen).

What is the expected behavior?

It would be more visually appealing experience as well as give more context for components with drop shadows for example, if stories were centred and had some spacing on all sides.

What can be the possible solution?

Add a Storybook decorator! I've already done this. Here's some screenshots of what the Storybook looks like this added:

Pretty nice right? I've opened a PR for this here. This is only for web and amp for now. I tried to get React Native working as well, but I ended up getting this error even on the unmodified master branch.

I'd be happy to make any changes you'd like!

All Inputs(TextInput, TextArea, Select, Checkbox, RadioButton, DateRangePickerInput, DatePickerInput)

Describe the bug
Text Input Area Colour - greyDark.

All Inputs(TextInput, TextArea, Select, Checkbox, RadioButton, DateRangePickerInput, DatePickerInput)

Describe the bug
All Tag should have medium font weight & small should have ALL CAPS text.

Describe the bug
Starting the project on an iOS sim gives an error.

To Reproduce
Steps to reproduce the behavior:

1. Follow instructions in SETUP.md for native
2. Press i on the expo prompt to start an iOS sim (iPhone6, iOS 11.4)
3. App starts with an error

Expected behavior
App should start without an error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop

• OS: N/A
• Browser: N/A
• Browser Version: N/A

Smartphone

• Device: iPhone6 simulator
• OS: iOS 11.4 (simulator)
• Browser: N/A
• Browser Version: N/A

Library

• leaf-ui: latest github master
• node: 8.9.0
• npm: 5.8.0

Additional Context
I see the following warnings when I first run npm install in the app directory

npm WARN @storybook/[email protected] requires a peer of react-native@>=0.51.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

Describe the bug
Shadow Missing DatePickerInput

There is the mdn link about this.

There are couple of places where clip is used like this.

clip: rect(0,0,0)

Same can be achieved with this.

visibility: hidden

Shall I raise a PR for this?

<Tag>
   outlined
</Tag>

Should be

<Tag kind="outlined">
   outlined
</Tag>

Button

• web
• native
• amp

Card

• native
• web
• amp

Checkbox

• web
• native
• amp

Divider

• web
• native
• amp

DatePickerInput

• web
• native
• [] amp

DateRangePickerInput

• web
• native
• amp

Dropdown

• web
• native
• amp

Flex

• web
• native
• amp

Form

• web
• native
• amp

Gallery

• web
• native
• amp

Icon

• web
• native
• amp

Image

• web
• native
• amp

Link

• web
• native
• amp

List

• web
• native
• amp

Modal

• web
• native
• amp

MoreOrLess

• web
• native
• amp

Banner

• web
• native
• amp

Position

• web
• native
• amp

Price

• web
• native
• amp

RadioButton

• web
• native
• amp

Select

• web
• native
• amp

Size

• web
• native
• amp

Space

• web
• native
• amp

Tabs

• web
• native
• amp

Tag

• web
• native
• amp

Text

• web
• native
• amp

TextInput

• web
• native
• amp

Toggle

• web
• native
• amp

Tooltip

• web
• native
• amp

View

• web
• native
• amp

Describe the bug

• Multiple Select field is not working properly inside Form component (by default all the checkboxes are checked)

Library

• leaf-ui: 0.38.8
• node: v8.11.3
• npm: 6.2.0

It would be good to see some unit tests for this project. Would be sending a PR ! The PR would include the following changes -

• Jest & Enzyme config setup
• Code coverage setup
• Unit tests(with snapshots) for few components to get started with.
• npm scripts for jest commands.

Is your feature request related to a problem? Please describe.
Consider a use-case where one needs to search for an item within a date-range, with the current implementation of the DatePicker, disabled days is hardcoded to present and future dates, what if we need to search for a booking made in the past?

Describe the solution you'd like
Expose disabledDays API of DayPicker through DatePickerInput

• only downsides of this being that one needs to know the DayPicker disabledDays API too.

Change greyLight to #dbdbdb

Current Behaviour:

Currently for every platform we are maintaining storybook file per component.

Expected Behaviour:

Create one storybook file and import components based on the platform on which it is running. But currently we can't auto import based on platform in node so the possible solution can be to have a common file say makeStories in the root of every component's directory and export a function which accepts the storiesOf instance and the object of components. This function can be called from every components story file along with the platform specific components. By doing this we will have all the stories consistent across platforms and at a single place. So less overhead and easy to maintain.

Currently Card just has 2 props color and elevation. But the card should also have provision to apply border. Need to discuss about adding them to our design guidelines before even starting on this.

Form - amount validation
In form validations, min / max / lesserThan / moreThan validations not working properly while using amount schema.

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Currently the Icon component has a named export for I and in the /Icon/web/index.js we have

export default from '../web';
export * from '../web';

There would be more scenarios like this in the coming releases. Logically we should re-export all the named export as well. Also the named exports shouldn't be re-exported individually, that's where export * from './component' comes to the rescue. Everything works smooth if we build for es module system, the problem arises when we build for cjs module system. It throws exports is not defined.

What is the expected behavior?

This should work on cjs as well that's the whole point of transpiling it through babel for cjs module system.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Here is the .babelrc for cjs module system.

"cjs": {
  "plugins": [
    "transform-export-extensions",
    "transform-class-properties",
    "transform-object-rest-spread",
    "syntax-trailing-function-commas",
    "styled-components"
  ],
  "presets": [
    ["env", {
      "loose": true,
      "modules": "commonjs"
    }],
    "react"
  ]
}

The transform-runtime plugin is causing this issue. It's an ongoing issue in babel. Link

What can be the possible solution?

There are 2 possible solutions/workarounf till this bug is resolved in babel

1. Don't use transform-runtime.
2. Use it but set the polyfill to false i.e ["transform-runtime",{ "polyfill": false }].
   PS: Both the above workarounds are just for cjs build, as es works absolutely fine.

Context

The issue got surfaced when I tried to run storybook with cjs build.

Environment

• leaf-ui version: 0.31.0
• npm/yarn version: npm v3.10.10
• node version: 6.11.0
• browser name and version: Chrome 65
• operating system and version: macOS High Sierra v10.13.4

• Form
• Link
• List
• Modal
• Notification
• Price
• Tag

Can I pick some of them?

Is your feature request related to a problem? Please describe.
To improve UX, while page is loading show loader animation.

Describe the bug
Error message font-size should be 12px Select

The Select component is implemented using the downshift npm library, however, the keyboard events don't seem to be working. Need to look into this.

Describe the bug
Tooltip is written using React version 16.
Changed React.Fragment to div.

Describe the bug
Shadow Missing Date Range Picker Input

Do you want to request a feature or report a bug?

Feature

Context

Since AMP pages blocks JavaScript the Accordion component needs to be implemented using radio and the state of the accordion's content can be controlled via css selectors.