zeiss / precise-ui

:triangular_ruler: React UI Component Library powered by ZEISS.

A complete opinionated React component library with minimal dependencies powered by ZEISS.

The UI component library contains both, very low-level design elements as well as combined high-level design elements. In general, the intention of the library is to simplify development by exposing components that satisfy design specifications and provide ease of programming. Repeatable UI designs should therefore only take minutes instead of hours.

See https://precise-ui.io for our kitchen sink (i.e., demo page illustrating all the components incl. their documentation).

Getting Started

Basically, common usage should be implicit while flexibility is provided by explicit statements. As such we aim for (opinionated) simplicity, while being able to customize as much as possible. Even though the standard design is pretty much set for our own primary target, we want to achieve full freedom in that area. For this reason we are constantly improving how we do theming and how to expose components to enable any sort of customization that may be desired.

Precise UI can be easily integrated in your frontend project by using npm or yarn. To start using it, please follow the instructions below:

Installation

1. Firstly, you have to install it:

npm i precise-ui

or alternatively, using yarn

yarn add precise-ui

2. Then, make sure that you have also all peer dependencies installed:

npm i react styled-components

Usage

Everything ready, now you can start importing precise-ui componenets.

import { TextField } from 'precise-ui';

<TextField label="Label" />

You can see a list of all available components on our website.

Contributing

Everyone is welcome to make any contribution on Precise UI. However, before you start, make sure you read our Contribution instructions.

If you feel uncertain whether you should contribute or not maybe our code of conduct can help you.

Issues & Support

If you have any usage and general questions, you are welcome to ask a question on Stack Overflow using the tag precise-ui, and you will receive help as soon as possible.

Also, when creating a new Issue here, please use one of the provided templates:

• Bug Report
• Feature Proposal

Development

The following sections guide you through the process of developing Precise UI.

Installation

For development you will need NPM and Node.js 8+. After cloning the repository install all dependencies via

npm install

Here is a quick example to get you started. All you need is to run:

npm start

As a result this will start the development server running the kitchen sink (our demo application), which runs locally and can be reached via localhost:6060. Note: this port can be changed. The available page contains all included components and some hopefully useful documentation for these.

Versioning

Incrementing the version can be done via npm as well.

npm version

This will show the current version and ask for a new version. As a result the information in the package.json is updated. Additionally, a git tag is created with the information (automatically prefixed using a "v"). The process could also be automated, e.g., by specifying the new version directly. So, for instance if our new version is "1.2.3" we just use the following command:

npm version --new-version 1.2.3

Conventions

We do not use default exports. Instead, every export should be named properly. For components, the name of the export equals the name of its file or folder.

Folders

Every exposed main component has to be placed in its own folder below components. Components placed in *.part.tsx files are considered internal components only created for providing some (necessary) internal structure.

Every exposed design helper component has to be placed in a file in the quarks folder. Design helpers do start with a Styled prefix, just like plain styled components should be.

Any higher-order component (HOC) should be located in the hoc folder. The naming convention is to expose the HOC with a with prefix.

The context related components are located in the contexts folder.

Plain functional utilities have to be placed in the utils folder. Even though for convenience all contents of utils are exported, their modules should be referenced directly from any components. The utilities have to be pretty much self-sustained, i.e., referencing back components is forbidden.

Namings

While stateless components should be created as a const, statefull components should be created as a class. In the former case only an interface with the component's name suffixed with Props should be created (to declare the typings of the props). In the latter case an additional interface with the component's name suffixed with State should be created, too. This interface carries the type information for the internal state of the component.

Input field components should always be suffixed with Field. Their props should extend the InputProps interface.

Event props should be prefixed with on and they should have a single argument only. This argument must be an object that follows an interface, which has an adequate name for the event, usually consisting of the component's name, the event type, and being suffixed with Event, e.g., for onChange of a TextField we have TextFieldChangeEvent.

We have a variety of different component classes. We should be able to easily distinguish between the different classes of components by looking at the suffix of a component. We have:

• *Control, stateful functional components
• *Panel, layout to be used
• *Field, an input field

Exceptions to this convention can occur due to various reasons (historical, aesthetic, ...), but should always be reasoned and discussed properly.

Code Formatting

There is not much to write. We use prettier and our build checks if the code has been properly prettified. Just run

npm run prettier

if you are in doubt that your code changes fits our desired formatting.

Unit Tests

Any change needs to be in company with its respective unit tests. In order to run the tests we use the following command:

npm run test

This will also run the linter. The standalone unit tests are available via test:unit. Likewise, we can also easily report the code coverage:

npm run test:unit --coverage

For unit tests we use Jest. We recommend using snapshot tests (which are done via enzyme and some JSON snapshot serializer).

Visual testing

Visual snapshots are located in /integration/__image_snapshots__.

When the testing runs it renders components from [componentName]/Example.md, makes screenshots and compares them to the previous version screenshots.

To run the testing locally Docker should be installed.

npm run test:visual

Once a component was changed, added or removed then snapshots should be updated. To update snapshots:

npm run test:visual -- -u

In some cases (i.e components with animations) it's needed to skip the test. It can be done in the next way: update Example.md file:

```js { "props": { "data-skip": true } }

<Component />

In some cases it's needed to tell visual test to wait before doing a snapshot. It can be done in the next way: update Example.md file:

```js { "props": { "data-wait": 500 } }

<Component />

Adding new icons

The list of all imported icons is in /tools/icongen.config. After modifying the list you should run npm run icongen or it will be run on prepush.

Making a Release

All releasable code is aggregated in the develop branch. To make a release simply create a GitHub release (usually copying over the current entries from the CHANGELOG.md file).

A standard workflow thus looks like:

1. Clone the repository
2. Make a branch
3. Do the work
4. Push your changes
5. Make a PR of your fork / branch to develop
6. Once "enough" features aggregated in develop make a GitHub release
7. For the next changes to develop make sure to change / increment the version number

To find out about the currently released version you have two options. Either you go to the NPM page or you use the GitHub releases. Both are linked on top of the README.md, too.

License

Precise UI is released using the MIT license. For more information see the license file.

We are using some icons from Material UI Icons. Their code and design is covered by the respective license of Material UI (MIT).

precise-ui's Issues

Accordion header strips spaces when html tags are used

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

Latest - 0.8.1
Next - 0.8.3-pre.694

Description

The accordion header strips spaces when having components with trailing spaces, provoking undesire behaviours

Steps to Reproduce

Use the following example:

const { Accordion, AccordionTab } = require('precise-ui');

<Accordion>
  <AccordionTab header={<><span>hello</span><span> world!</span></>}>
    {<><span>hello</span><span> world!</span></>}
  </AccordionTab>
</Accordion>

Expected behavior: You should read "hello world!"

Actual behavior: You read "helloworld!"

Possible Solution

The issue seems to be happening because of the display: flex on the header component.

Table component missing onDataClick handler in mobile view

Steps to reproduce:

1. Go to Table Component, use mobile view for the tables and add a onDataClick property.

expected result: Clicking on Data while in mobile view should trigger the onDataClick function

Actual result: onDataClick is never fired.

Browser: All browsers.

Autocomplete: info element pushes list down

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

Versions

You can get this information from executing npm version.
'precise-ui': '0.6.3'

Description

When opening the Autocomplete list on an Autocomplete component with the info property set, the list will be pushed down by the info element.

Steps to Reproduce

const { Autocomplete } = require('precise-ui');

<Autocomplete suggestions={['one', 'two', 'three']} defaultValue="five" info="numbers"/>

1. Click on the Autocomplete field

Expected behavior: The list will be rendered on top (on Z-axis) of the info element, directly below (on Y-axis) the input field

Actual behavior: The list is rendered directly below (on Y-axis) the info element

Environment details: Doesn't matter

Possible Solution

See PR

InteractiveList: Tick Behaviour in Flyouts

Bug Report

Description

It seems, that the InteractiveList Component with ticks wraps somehow wrong in a Flyout

Steps to Reproduce

1. Click on a ListFlyout Component
2. Select an item in the list
3. Reopen the Flyout and check which item is selected needs to scroll horizontal

Expected behavior:
The Interactive List with ticks should not be scrollable horizontal
The Flyout should have a min. width of 200px and the width of the Flyout should look for the longest word + margin for the tick and be as wide as this.

Actual behavior:
The ticks are not visible without scrolling for less character items and the Flyout jumps on different item-lengths.

Environment details:
Mac OS, Google Chrome Version 71.0.3578.98 (Offizieller Build) (64-Bit)

Possible Solution

Opening of 2 Modals and closing one results in scrollable background

Description: When opening a Modal, the background is set to be unscrollable and is set to scrollable upon closing the Modal. Opening two Modals at the same time and closing one of them results in scrollable background, even though one of the modals is still actively opened.

Steps to reproduce:
1. Have a page filled so, that the content is scrollable
2. Open two Modals at the same time
3. Close one of the Modals

Expected Behaviour: Background is still not scrollable after closing one of the Modals, because the other Modal is still opened

Actual Behaviour: Background becomes scrollable with one Modal still opened.

No error message displayed for mandatory fields on Form

Description:
No error message displayed for mandatory fields on the Forms.

Steps to reproduce:

1. On the Form , leave the mandatory Fields empty.
2. Try to Submit the Form

Expected behavior:
Error message should be displayed for the mandatory fields

Actual behavior:
No error message displayed for mandatory fields

Environment Details:
All browsers

https://precise-ui.io/#/Components/Form

Allow to disable items in DropdownField

New Feature Proposal

Description

In some use-cases it's desired to disable some options in a DropdownField so that users can't select invalid options.

ContentSwitch in IE: Object doesn't support property or method 'forEach'

Bug Report

Description

ContentSwitch doesn't work in IE.
Following error is logged in console of IE: "Object doesn't support property or method 'forEach'".

Steps to Reproduce

Open ContentSwitch in IE.

Expected behavior:
ContentSwitch works also in IE.

Actual behavior:
ContentSwitch doesn't work in IE.

Environment details:
Browser: IE11

Possible Solution

In "precise-ui" there is the component "ContentSwitchInt" (exported as ResponsiveSwitchPanel) with following code (58-62):

      if (!headerNodesWidth.length) {
        headers.childNodes.forEach((node: HTMLLIElement) => {
          headerNodesWidth.push(node.offsetWidth);
        });
      }

Possible solution could be:

      if (!headerNodesWidth.length) {
        const nodes = headers.childNodes;
        for (const node of nodes as any) {
          headerNodesWidth.push(node.offsetWidth);
        }
      }

Getting Started Button Not Working

I am currently using the kitchen sink and found that the "getting started" button is not working. This seems to be an issue due to the change of the router (from browser router to hash router).

Maybe other links are not working as well - can this be confirmed?

Selecting element from autosuggestion IE

Description:
Selecting an element from autosuggestion do not close the suggestions.

Steps to reproduce:

// todo

Expected behavior:
The autosuggestion should be closed once the user selects an element from autosuggestion

Actual behavior:
The selected element is still displayed as a suggestion to the user in IE

Environment Details:
IE11

DropdownMenu list has no width when expanded thus it's not possible to see the options on IE11

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

0.8.2-pre.593 and up

Description

When using DropdownMenu on IE11, after clicking on the menu to see the list of options the list appears with 0 width, which makes it impossible to visualize or select any option

Steps to Reproduce

1. Render a DropdownMenu component
2. Open the page with IE11
3. Expand the menu
4. See the result

Expected behavior: [What you expected to happen]

To see the list and be able to select any of the options

Actual behavior: [What actually happened]

Environment details: [OS, Browser, ...]

IE11

Possible Solution

The issue was introduced in commit e47590a particularly in ListItemContent change from

const ListItemContent = styled.div`
  flex-grow: 1;
`;

to

const ListItemContent = styled.div`
 flex-grow: 1;
 flex: 1 0 0px;
`;r

The change adding flex-basis to 0px broke the IE11 compatibility.

All tests are always executed if you store precise ui under $HOME/src/precise-ui

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

{ npm: '6.11.3',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  modules: '64',
  napi: '5',
  nghttp2: '1.39.2',
  node: '10.17.0',
  openssl: '1.1.1d',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '6.8.275.32-node.54',
  zlib: '1.2.11' }

Description

Some developers out there store all their code under $HOME/src. If you do so you run into problems with precise-ui for the following reason:

Unit tests are separated from integration tests by storing integration tests in a integration directory and unit tests are stored directly under src. The script to run unit tests (located in packages.json) is basically jest src.

But the parameter which is provided to jest only defines the regex to validate if a given file should be executed as unit test or not. If a parent directory contains the word src basically all tests will be executed no matter if they are in ./src or not. Especially tests under integration are then executed.

Steps to Reproduce

1. Move your precise repo to $HOME/src/precise-ui
2. Run npm run test

Expected behavior: Only tests in ./src are executed.

Actual behavior: Also tests in ./integration are executed.

Environment details: Shouldn't matter.

Possible Solution

Change jest src to jest --roots=src which will limit the search scope of jest to the src directory.

Will open a PR for this.

Date Field Component

New Feature Proposal: Date Field Component

Description

As the current "Date Field"

• doesn't include the display of the year,
• doesn't provide different states for the DayFields
• doesn't have an error state
• has no prop to set a date range with visual feedback,

here is a suggestion to build this as a new component.

Background

There are more and more scenarios where a accessable and user friendly Date Picker is needed - i.e. Academy or Filter Settings.

The DateField component provides an easy way for selecting a date. As all inputs it can be used in a controlled and managed mode.
Set the default date to the current date.
Don't attempt to force resize the control in any way.
Date Fields can be used in two ways:
• Single select date (use same as „Start Date“)
• Range Selection

UI

https://zpl.io/adpnNdL

Checkbox Formate in IE

Description:
The Checkbox component looks strange in IE11

Steps to reproduce:

Verify Checkbox in IE

Expected behavior:
Looks the same as in https://precise-ui.io/#/Components/CheckboxInt

Actual behavior:
Check in the Screenshots

Environment:
IE11

Padding left for Errors on InputComponent

Bug Report

Description

The padding for the error message on InputComponents such as Textfields, Dropdowns etc. to the left side is set to 0, but instead it should be 1 rem.

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Environment details: [iOS, Chrome Version 73.0.3683.75 (Offizieller Build) (64-Bit), ...]

Possible Solution

Current Implementation:
Padding 4px 0px

Expected Implementation:
Padding 4px 16px

Dropdown window is not closed when the other one is opened

Should be closed if Dropdown is not in a controlled mode.

DropdownField height increases once a value is set

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

Versions

0.8.3

Description

The DropdownField increases in height from 54px to 56px once a value is set. This causes inconsistency if you for example position it next to a SearchField.

Steps to Reproduce

Paste the code below in the PreciseUI playground, and then select an item from the dropdown list (it will increase in height):

const { DropdownField, SearchField, styled } = require('precise-ui');

const items = [
  "Apple",
  "Orange",
];

const Container = styled.div`
	display: flex;
    > * { margin-right: .5em; }
`;

class MyDropdown extends React.Component {
  constructor() {
    super();
    this.state = {
      value: '',
    };
    this.change = (e) => {
      const selected = e.value[0];
      const index = items.indexOf(selected);
      const value = items[(index + 1) % items.length];
      this.setState({
        value,
      });
    };
  }

  render() {
    return <DropdownField data={items} value={this.state.value} onChange={this.change} />;
  }
}

<Container>
	<MyDropdown />
	<SearchField label="Search" onSearch={value => console.log(value)} />
</Container>

Expected behavior: No changing height.

Actual behavior: Height increases once a value is set.

Environment details: macOS, Chrome

TagBuilder is really slow in controlled mode.

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

Version 0.8.1

Description

Using TagBuilder in controlled mode, makes it really slow to react to user typing.

Steps to Reproduce

1. Create a TagBuilder component on KitchenSink.
2. Change it to be use in controlled mode.
3. Try type something fast.

Expected behavior:
It would show the input a soon as I type.

Actual behavior:
It slugs to show the char I just pressed.

Environment details:

Tested on macOS Mojave 10.14.6
And Chrome Version 76.0.3809.132

Generate changelogs and release notes from a project's commit messages and metadata

New Feature Proposal

Description

Generate changelogs and release notes from a project's commit messages and metadata
https://github.com/conventional-changelog/conventional-changelog

Background

I always forget changing CHANGELOG.md file and I believe I'm not alone in it. It would be great to update this file automatically based on git history (commit messages) once a new release supposed to be delivered.

DateField Keyboard input

https://precise-ui.io/#/Components/DateField

Steps to reproduce:

1. Select a day manually
2. Try to change the date by typing the date with the keyboad.

-> it's not possible to enter the date correctly, because after the first number the date gets autocompleted

Allow styling of Tags

New Feature Proposal

Description

Currently Tags can not be completely styled as internal styling defaults (foreground and background colours) are always prioritised over the (possibly) external defined theme.

I would like to change this so that external themes are prioritised over internal defaults which would allow more customisation than what is currently possible.

Background

We currently have to adjust the background and foreground color of a tag to a color which is not defined by any of the tag types and calculated in getStyle(type) in src/components/Tag/index.tsx. Theming should allow this but the way the tag component is defined it's not allowed.

Single Email id not accepted in a field where user is allowed to enter multiple Email id's

Description:
Single Email id is not excepted in a field , where user is allowed to enter multiple Email id's.
User has to mandatorily insert a comma(,) after an email id in order to submit the form.

Pre-requisites

1. Email field can accept multiple email id (comma separated)

Steps to reproduce:

1. Enter valid Email id
2. Try to save the form

Expected behavior:
Single email id should be accepted without a comma ( , )

Actual behavior:
Single Email id not accepted unless and until comma is provided at the end

Environment:
any OS/browser

Possible Solution:
To be clarified..

Pagination: negative page item/page numbers on empty content

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

0.5.0

Description

When changing the items per page on empty content, the item range will jump to negative numbers and you can select negative page numbers.

Steps to Reproduce

1. Create a Pagination component without content (e.g. empty array) and more than one items per page size available

const { Pagination } = require('precise-ui');
const data = Array();

<Pagination size={[20, 50, 100]}>
  {data}
</Pagination>

2. Change the items per page

Expected behavior: Nothing should happen

Actual behavior: The items range will jump to a negative number (e.g. -49 - 0 of 0) and you can go to a previous (negative) page with the arrow button

Environment details: Windows 10, Google Chrome

Possible Solution

Line 131 in src/components/Pagination/index.tsx:
const maxPageCount = Math.ceil(total / size) - 1;
causes this issue, because for total == 0, the maxPageCount will be -1.

I already fixed and tested this and added more checks for this issue on other positions.

PR will come.

[AutocompleteTagBuilder] Label/placeholder should be displayed when they provided as props

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

0.6.0

Description

Seems like label and placeholder don't work in AutocompleteTagBuilder.

Steps to Reproduce

Go to the kitchen sink (https://precise-ui.io/#/Components/AutocompleteTagBuilder) and try to add label or placeholder into the component like <AutocompleteTagBuilder label="Suggestion" placeholder="Select item" suggestions={suggestions}/>.

Expected behavior: Label and placeholder should be displayed correctly,

Actual behavior: They aren't displayed.

Environment details: Any browser.

Possible Solution

Please take a look at the component source code. I think it's not tricky to fix this case.

Rating component throws exception

Bug Report

Versions

Precise UI 0.5.0

Description

Rating component throws error

Steps to Reproduce

1. navigate to the Rating component :
   https://precise-ui.io/#/Components/Rating

2. click on any star of the first rating component

3. observe the output in the browsers console.

Expected behavior:

No exception

Actual behavior:

An exception is thrown in my Chrome73/Win10 System:

bundle.48bfe287.js:47 Uncaught Error: An error occurred. See https://github.com/styled-components/styled-components/blob/master/src/utils/errors.md#12 for more information. Additional arguments: iXSaRS
at new StyledComponentsError (bundle.48bfe287.js:12)
at Keyframes.toString (bundle.48bfe287.js:12)
at Array.join ()
at Array.toString ()
at ne (bundle.48bfe287.js:47)
at oe (bundle.48bfe287.js:47)
at Ce (bundle.48bfe287.js:47)
at zh (bundle.48bfe287.js:47)
at Th (bundle.48bfe287.js:47)
at Zh (bundle.48bfe287.js:47)

Environment details:
Chrome 73, Win 10 64 bit

Possible Solution

Follow stacktrace to discover where an invalid argument is passed.

Add onSort event to the Table

New Feature Proposal

Description

When passing a onSort callback property to the Table every time the user sorts the table the passed callback gets executed with the columnKey and the order value or undefined based on the current sorting state.

An alternative implementation could be to also trigger the onHeaderClick callback when sorting. But this could potentially break already existing implementations.

Background

Right now only client side sorting is supported which is fine as long as all data is available right from the beginning. This callback would help in cases where additional data has to be requested from the server based on the sorting.

Utilising the onHeaderClick callback could work, but would require to reimplement the complete sorting logic in the host component which would be unnecessary overhead.

Modal closes on drag and release cursor outside modal.

Description:
Map modal closes as user starts to drag and release the drag outside the modal.

Steps to reproduce:

1. Open the Map modal.
2. Drag and drop the cursor outside the modal

Expected behavior:
The modal should not close after dragging the map and releasing the cursor outside the modal

Actual behavior:
Modal closes.

Environment:
any OS/browser

Possible Solution:
To be clarified..

https://precise-ui.io/#/Components/Modal

Two cross buttons displayed inside 'Search'

Description
Two cross button displayed inside search textbox as user start searching for any term. (IE11)

Steps to reproduce:

// todo

Expected behavior:
Only one cross button displayed in search box

Actual behavior:
Two cross buttons displayed in the search box.

Environmental Details:
IE11

Clicking on the scrollbar closes modal

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

0.8.3

Description

When you open a modal that is longer than the screen and you scroll down by clicking on the scrollbar the modal closes.

Steps to Reproduce

1. Go to https://precise-ui.io/#/Components/Modal
2. Make you browser window small enough
3. Click on Open long modal
4. Try to use the scrollbar to scroll the window

Expected behavior:
Modal stays open and can be scrolled.

Actual behavior:
Modal closes.

InteractiveList: empty list content

Bug Report

Versions

0.5.0

Description

InteractiveList doesn't display any list content, except in case of customWrapper.

Expected behavior:
InteractiveList showing list content

Actual behavior:
InteractiveList content empty

Unable to select today's date in date field component

Description:
User is unable to select today's date once he/she has selected Future dates from the date field component.

Steps to reproduce:

Note: Only happening if a default Date is set as of today's date.

Expected behavior:
User should be able to select today's date.

Actual behavior:
Todays date is not selectable.

Environment Details:
All browsers

https://precise-ui.io/#/Components/DateField

Grid component not setting spacing in IE

Steps to reproduce:
1. Use Grid component, fill with child elements and set spacing property

expected result: Spacing will be set in IE aswell

Actual result: Spacing is not set in IE

Opening https://precise-ui.io/#/Components/Grid in IE shows errors, which come from the 'computeIeRows' function

Incorrect position of label ellipsis

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

Versions

0.6.3

Description

Steps to Reproduce

1. Create any Component with a set label property (e.g. TextField) or use the examples in the style guide
2. Decrease the width until the ellipsis appears

Expected behavior: Ellipsis should only appear if the label is too wide

Actual behavior: Ellipsis appears before the label is cut

Add onBeforeClose event to the Modal

New Feature Proposal

Description

The idea is to have onBeforeClose event in a modal. The event handler should be able to decide if the modal is allowed to close or not. It would be nice to have async. event handlers supported (ones returning Promise).

Background

There is already an onClose event, but the corresponding handler is executed too late - when the modal closing animation has finished. The idea is to keep the backward compatibility, by leaving onClose event as is, but add a new one - onBeforeClose.

The possible use case is the following: the user fills in the form in a modal and then closes the modal, either by clicking "x" button or e.g. by accidentally clicking outside of the modal. We could use onBeforeClose event to display a confirmation dialog saying "Are you sure? All unsaved data will be lost."

Also can be useful for #152

Form with validation rules example isn't working

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

Versions

0.8.3

Description

The Form with validation rules example for field first isn't working because the validator is value && value instead of value && value.length.

Steps to Reproduce

1. https://precise-ui.io/#/Components/Form
2. Go to The Form with validation rules
3. First should be less than 10 characters.

Possible Solution

PR incoming.

Original Event not available in handler of several components

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

Version 0.8.1

Description

Original Events are not available for most components.

We should check other components as well. Not having the original event makes it really difficult to stop propagation, prevent default or access any other param from the original event which might be needed in specific cases.

Steps to Reproduce

1. Go to KitchenSink of Precise-UI
2. Open Toggle Component
3. Print the event object on the onChange prop
4. Object does not have the originalEvent as stated on its Props list.

Expected behavior: Original Event should be available

Actual behavior: Original Event is undefined

Environment details: Any Browser.

Possible Solution

Column Alignment changes while navigating through the pages.

Description:
The Columns alignment changes as user navigates through the pages.
The table component seems to be broken. https://precise-ui.io/#/Components/Table

Steps to reproduce:

1. Click on the carousal arrows to navigate through pages.
2. Verify the columns behavior.

Expected behavior:
The columns alignment should be defined and should not change.

Actual behavior:
Columns seems shaky when user starts navigating to different pages.

Environment:
any OS/browser

Possible Solution:
To be clarified..

Button with Progress Indicator

New Feature Proposal

Description

A progress button is a linear indicator for providing feedback about an ongoing, user-initiated process.

Background

As a user who clicks on a primary button in i.e. a form, i want to get information about the processing of my data so that i have a feedback, if the procedure went successful or an error occured.

UI

Zeplin Link [https://zpl.io/29P16LY]

Value (text) in disabled TextField is white (not readable)

Bug Report

Prerequisites

• Can you reproduce the problem in a [MWE]
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

0.8.1

Description

In Safari, when a TextField is disabled and contains some value the text is white and unreadable.

Steps to Reproduce

1. Create a TextField (with disabled property)
2. Assign a value

Expected behavior: when a TextField is disabled the text is still grey (readable) like the disabled example here.

Actual behavior: when the TextField is disabled the text is white (not readable).

Environment details: macOS, iOS, Safari

Possible Solution

add some CSS for Safari only 😉

Allow styling of notification

New Feature Proposal

Description

Currently Notification can not be completely styled as the theme is not applied to all parts of a Notification (the Icon in this case).

I would like to change this so that external themes allow a consistent customisation experience for this component..

Background

We currently have to adjust the color of the Notification component to a custom color. This is currently not completely possible as external code can not change the icon color because the theme is not applied to the Icon.

Relates to #189

New Feature: Table Interactions

New Feature: Table Interactions

This Issue will be updated in the near future

Description

• Introduce Sticky TableHeader
• Resize columns
• Reorder columns
• Reorder Rows

Background

As a user, I want to interact with a table in the way I am used to from other tools. This means that the header remains visible even when scrolling, I can resize columns and move content in columns and rows by drag&drop.

UI

UploaderProgressDetails of FileUploaderDetails opens behind first Modal

New Feature Proposal

Description

If FileUploader with FileUploaderDetails is called from antoher Modal, the UploaderProgressDetails of FileUploaderDetails opens behind that modal.

UploaderProgressDetails should appear in fornt of that modal, just like UploaderProgressBar.
To solve this issue the "z-index" of UploaderProgressDetails should be set to "10001" (just like in case of UploaderProgressBar).

The page headers tends to shift a bit after clicking on them.

Description:
Clicking on the header tabs of the page tends to shifts/shake them slightly.

Steps to reproduce:

1. Navigate to one of the pages.
2. Click on the header tabs.

Expected behavior:
The header tabs should be static and should not shift after clicking on them.

Actual behavior:
Header tabs shifts after clicking on them due to increasing/decreasing of the pixels(generally observed for the longer header text)

Environment Details:
All browsers

Tool tip blinks continuously after hovering

Description:
Mouse Hover on the tooltip tends to blink it continuously.

Steps to reproduce:

1. Hover on the edge of the element to see the tooltip(attached screenshot)

Expected behavior:
Tooltip should be displayed without blinks.

Actual behavior:
Tooltip opens but with continuous blinking.

Environment Details:
All browsers

https://precise-ui.io/#/Components/Tooltip

Impossible to change a carousel item if it contains the link in itself.

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

0.6.1

Description

Impossible to drag a carousel item if it contains the link itself.

Steps to Reproduce

1. Open https://precise-ui.io/#/Components/Carousel
2. Insert the code in the 1-st example:

const { Carousel } = require('precise-ui');

<Carousel infinite>
  <a href="#1" style={{ height: '150px', width: '100%', backgroundColor: '#f3a', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
    First page
  </a>
  <a href="#2" style={{ height: '200px', width: '90%', backgroundColor: '#43c', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
    Second page
  </a>
  <a href="#3" style={{ height: '150px', width: '450px', backgroundColor: '#1f2', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
    Third page
  </a>
</Carousel>

3. Try to drag the tile.

Expected behavior:

• Carousel item is changed.

Actual behavior:

• The page is changed.

Environment details: [any OS, any browser]

Possible Solution

To be clarified...

Dropdown menu options truncated for longer text.

Description:
The text is not visible completely in the dropdown menu, if the text to be selected is too long IE11

Steps to reproduce:

1. Try to select the option from the drop down which has larger text.

Expected behavior:
The option selected from the drop down should be visible(the complete text should be visible)

Actual behavior:
The option selected is not visible completely and seems distorted.

Environment Details:
IE11

https://precise-ui.io/#/Components/DropdownSelect

Infinite loop when the number of rows is not explicitly set on a Grid

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

You can get this information from executing npm version.

Description

Infinite loop when the number of rows is not explicitly set on a Grid component.

Steps to Reproduce

Below is a MWE (https://codesandbox.io/s/amazing-faraday-45r2i?fontsize=14):

import * as React from "react";
import { render } from "react-dom";
import { Grid, GridArea } from "precise-ui";

function App() {
  return (
    <Grid rows={2}>
      <GridArea row={0}>Hello</GridArea>
      <GridArea row={1}>World</GridArea>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Expected behavior: To see a a grid with two rows, the first with the text Hello and the second with the text World.

Actual behavior: An infinite loop that eventually crashes with "maximum number of iterations reached"

Environment details: Tested on macOS 10.13.6 with Chrome 75.0.3770.142 and precise-ui 0.6.1 and 0.6.3-pre.411.

Possible Solution

As a workaround you can explicitly set the number of rows in the Grid component.

Add Icon "local_offer"

New Feature Proposal

Description

Add the Icon local_offer to the icon set.

Support grouping of items with no value for the 'groupBy' column in AccordionTable

New Feature Proposal

Description

When some of the items in a AccordionTable don't have a value for the column that the table is grouped by, the behaviour is not consistent and not very convinient.

If an item without a value is the first in the data list, then the grouping of items doesn't work correctly at all. In this case items without a value are mixed in between grouped items. In this case it can look like some items without a value are included in one of the groups which is not correct. The source for this problems is in the sorting algorithm that is deciding on how to sort items based on the type of value of the first item in the list.

My proposal includes:

• fix the sorting by not looking at the first item in the list but search for the first item that actually has a value set for the sortby/groupBy column
• change the order of items so that items without a value are moved to the end of the list
• add a pseudo-group for all items that don't have a value for the groupBy field so that you can toggle this group like normal groups.
• Add a prop to AccordionTable to define a label value that should be used for this group of items without a value. This prop should be optional. If no value was defined then use something like "-" as a default

Compatibility with Emotion

New Feature Proposal: a build for Emotion

Description

Can we add a build which depends on Emotion, in addition to the current, styled-components based one?

Background

Emotion is pretty popular, thanks to it's smaller bundle size and source maps support. It shares the same exact component API with styled and the changes should be minimal.

SmoothUI is an example of a component library which supports both styled and Emotion.