bigcommerce / big-design Goto Github PK

Describe the bug
InlineMessage link points to the old /inline-alert route:

Solution
It should link to /inline-message

Is your feature request related to a problem? Please describe.
Add global highlight color.

Describe the solution, feature, or improvement you'd like
Highlighting should be using primary20 from the theme object.

Is your feature request related to a problem? Please describe.
It would reduce time for users to be able to type and hit and enter the word they are selecting from the Select component.

Describe the solution, feature, or improvement you'd like
When you start typing, the first option should be auto selected/highlighted. Currently you have to click on the option you want to Select.

Describe alternatives you've considered
I've also considered when the input word matches a word from the Select component list and if a user hits enter then that should automatically select that option.

Is your feature request related to a problem? Please describe.
It's a manual process to use a modal as a form at the moment, if you wish to use the native actions to create nicely styled buttons.

Describe the solution, feature, or improvement you'd like
A new <ModalForm> component, or a cleaner way of using the buttons on a <Modal> to submit a form within the modal.

For example:

      <Modal
        header="Create a new thing"
        actions={[
        { text: 'Cancel', onClick: () => setIsOpen(false) },
        { text: 'Create', type: "submit", action: "submit" },
        ]}
      >
        <Form onSubmit={handleSubmit}>
        //form elements
        </Form>
      </Modal>

Or perhaps:

      <ModalForm
        header="Create a new thing"
        actions={[
        { text: 'Cancel', onClick: () => setIsOpen(false) },
        { text: 'Create', type: "submit", action: "submit" },
        ]}
      >
        //form elements
      </Modal>

Describe alternatives you've considered
Using the onClick() event and refs to submit the form in a targeted way.

Additional context
It seems like the action buttons on modals naturally lend themselves to form-like actions, so making this easier might reduce the time it takes to build a common workflow.

Is your feature request related to a problem? Please describe.
For accessibility, we need to trap the tab key for Modals/Dialogs.

Describe the solution, feature, or improvement you'd like
Rolling your own functionality for this can be quite cumbersome, so we'll probably want to use a library for it.

Is your feature request related to a problem? Please describe.
During development of #131 and #113 it was a bit tedious to make each prop responsive. Having to the do this for each prop was cumbersome:

type SingleProp = type;
type ResponsiveProp = Responsive<SingleProp>;
type Prop = SingleProp | ResponsiveProp;

Describe the solution, feature, or improvement you'd like
We need to think of a way to make props responsive without all the copy pasta.

Is your feature request related to a problem? Please describe.
Decrease padding on panels for devices >=tablet.

Describe the solution, feature, or improvement you'd like

for @media (min-width: 720px)
update padding: 2rem to padding: 1.5rem

Need a Step Component to show on which step the user is in Registration or Sign Up.

Reference Image:

Is your feature request related to a problem? Please describe.
I would like to change the icons color on the select options to match the designs. I would also like to add a search icon on the actual search input.

Describe the solution, feature, or improvement you'd like
Select can add the ability to add colors to the select options and add an icon on the search input.

How it currently looks:

How the design file looks:

Describe the bug
During the initialization of a Tree component, there is some node that is going to be focused.
When the node is focused it causes window scroll so users are unable to see the loaded page from the very top.

To Reproduce
Steps to reproduce the behavior:

1. Go to CP new Category manager
2. Click on Create category
3. Notice the page is scrolled down to a categories tree

Expected behavior
The Tree component should not affect the window offset.

Desktop (please complete the following information, if applicable):

• OS: macOs
• Browser: chrome
• Version: 86.0.4240.111

Describe the bug
I faced the problem when I use the Dropdown component inside the Table that wrapped by the TableFigure. The problem is the trimming of the Dropdown component.

I think the problem with the StyledBox that has position: relative

• https://github.com/bigcommerce/big-design/blob/master/packages/big-design/src/components/Dropdown/Dropdown.tsx#L211
• https://github.com/bigcommerce/big-design/blob/master/packages/big-design/src/components/Dropdown/styled.ts#L23

To Reproduce
Sandbox link: https://codesandbox.io/s/0xgi4?file=/src/App.tsx

Expected behavior
It is expected that the Dropdown component inside the Table that wrapped bt the TableFigure component will not be trimmed.

Screenshots

Describe the bug

On the Select component, after selecting an item, an empty dropdown item remains.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://developer.bigcommerce.com/big-design/select
2. Click on the topmost country select box
3. Click on any other country name
4. See that an empty popup item remains

Expected behavior

The empty popup item should not appear.

Desktop (please complete the following information, if applicable):

• OS: [e.g. iOS] macOS 10.15.7
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 86

Describe the bug
After changing the options prop on a Select component, clicking on the Select shows the previous set of options. After clicking off the dropdown and clicking the Select a second time, the new options show.

To Reproduce
Repro here:
https://codesandbox.io/s/bigcommerce-big-design-select-option-repro-czubo

Steps to reproduce the behavior:

1. Click the dropdown and note that it shows Option A and Option B.
2. Click the "Change Options" button.
3. Click the dropdown again. Option A and Option B remain even though the options prop has changed.
4. Click off the dropdown.
5. Click the dropdown again. Option C and Option D now appear.

Expected behavior
Changing the options prop of a Select should change the options displayed.

Before build:

After Build:

Describe the bug
Select.onOptionChange prop does not work as expected.

To Reproduce
Steps to reproduce the behavior:

1. https://codesandbox.io/s/lingering-pond-5szw9?file=/src/App.js
2. Select any value from the Select component - Nothing happens

Expected behavior
Changing the value should trigger the onOptionChange event.

Additional context
Downgrading to 0.18.0 fixes the problem (can be validated via the left sidebar - changing the version of the package)

Describe the solution, feature, or improvement you'd like
Currently theme can be passed into components imperatively. We need to be more declarative that theme can be passed into individual components. For example our Button component is correct:

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, MarginProps {
  actionType?: 'normal' | 'destructive';
  iconLeft?: React.ReactChild;
  iconOnly?: React.ReactChild;
  iconRight?: React.ReactChild;
  isLoading?: boolean;
  theme?: ThemeInterface;
  variant?: 'primary' | 'secondary' | 'subtle';
}

We'll need to go through other components and declare that theme can be passed in.

Is your feature request related to a problem? Please describe.
I used BigDesign for the first time yesterday, and I found it a little harder to onboard to it than I'd like.

The biggest issue for me personally is that I was provided with a lot of low-level components, but no example of how to string them together into an overall page layout. I'd love to have something more copy-pasteable here to get a full page going quickly, that I could start to modify and make my own.

The open-source channels app was provided, but it's actually quite complex relative to what I'm looking for.

A simple use case like a form accepting user data, or a getting-started page for an app would be closer to what I needed. This would serve as implicit documentation for how to arrange components on a page in a way that looks like and complied with the design guidelines. Currently, it seems like a user of BigDesign must exercise visual design skills themselves by comparing the design guidelines with the provided components to try to put something cohesive together. Can this be made easier?

Describe the solution, feature, or improvement you'd like
Some sort of "intermediate" code example that's between the existing component-level documentation and the pretty expansive Channels App.

Describe the bug
When an input has been autofilled, the blue background should not overlap the border radius of the input box. (See below screenshot.)

Expected behavior
Autofill background color should blend in with the border radius.

Screenshots

Is your feature request related to a problem? Please describe.
I can't clearly communicate to users the difference between internal "navigation" links and external links with the native capabilities of BigDesign.

Describe the solution, feature, or improvement you'd like
Sometimes, you need to create links that will open in a new tab, to link to an external resource like documentation. It's nice to hint to users that this will happen with some sort of display treatment like this:

This sort of visual language makes the user less surprised when we open a new tab instead of navigate.

It seems like a reasonable extension to the <Link> component API. Perhaps it can be an explicitly set flag, or perhaps it can implicitly react to use of target="_blank" and so on.

Describe alternatives you've considered
Styling the link by hand.

Is your feature request related to a problem? Please describe.
Can we add the version number in the documentation so it is easier to realise the version you are looking at is not the one you have in your app?

Describe the solution, feature, or improvement you'd like
Just add the version number in the docs somewher

Considering the bar only has 4px in height the corners will be fully rounded on both ends.

Is your feature request related to a problem? Please describe.
Currently a Flex component defaults to flex-direction: column; on mobile devices. The current method of working around this is to create a custom styled component extending the Flex component like so:

import { Flex } from '@bigcommerce/big-design';
import styled from 'styled-components';

const CustomFlex = styled(Flex)`
  flex-direction: row;
`;

This becomes very tedious every time you want to override the flex-direction over multiple Flex containers.

Describe the solution, feature, or improvement you'd like
Extend the current Flex component props to behave like MarginProps on other components, as in, being able to pass in device types. It'll have to keep the same defaults as to not break existing usage. Here's and example with MarginProps:

<Box marginVertical="xxxLarge" marginHorizontal={{ tablet: 'xxxLarge' }} />

Is your feature request related to a problem? Please describe.
The Grid component only allows you to pass in props for only one device type. This will be problematic as we will need to add different layouts per device types. You can extend it via styled-components, but we want to promote flexibility with our layout components.

Describe the solution, feature, or improvement you'd like
Extend current props to behave like MarginProps using objects for different device types. See #73 for an example.

Describe the bug
<Input /> component does not respect the provided autoComplete prop value. It always renders autocomplete="no".

To Reproduce
Steps to reproduce the behavior:

1. add <Input type="email" autoComplete="email" />
2. Check the output, see <input autocomplete="no" type="email" id="bd-input-12"/>

Expected behavior
Get the provided auto-complete value.

Describe the bug
The correct range of the Pagination component should be highlighted instead of it always being the first item.

Screenshots
As you can see here I selected the second range (range[1]) but the first item is highlighted.

I'm using Bigdesing library in my project, and I need to have several multiselects in one form. I have one handler to handle result of changes on multiselects. And here I have problem because onOptionChange returns just value and option and I know nothing which one of multiselects called the handler. I tried to use onChange event, but it don't work at all. Maybe I do something wrong.

For clear I will try to describe what I do and why.
I have form where I don't know how much multiselect will be. This is must be dynamic and depends to how much product categories I receive. So I have list of categories and I have list of some options. With help multiselect I need to connect category with selected options from list. Every category can have one or more options. Thats why I have one handler to handle change on multiselect. And I can't make different handlers for each multiselect. I need to know which one of multiselects called the handler and connect it with selected options.

I use React/Typescript in my project.

Can anybody help me with this problem?

Thanks for any answer!

Add the capacity to show an icon on the left of a Select component next to the field label.

Note: inputs already have the capacity to show an icon on the left/right so part of this work will involve using this icon, plus adjustments to the layout

Describe the bug
Data that are passed to onSelectionChange handler are inconsistent.
The best way to check is to follow the steps below.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://codesandbox.io/s/modest-voice-8jk6s?file=/src/index.tsx'
2. Make the console visible.
3. Check that (3) [9, 3, 7] is present in the console.
4. Click on Select/Deselect All
5. Make sure that all checkboxes are deselected
6. Click on the very first category
7. Check that console is updated to (4) [9, 3, 7, 0]

Expected behavior
The console should be (1) [0]

Screenshots

Is your feature request related to a problem? Please describe.
Would be nice to be able to add an tooltip that takes in an icon and presents text when hovered over to give additional information about what the select box is about

Describe the solution, feature, or improvement you'd like
Add label with FormControlLabel and string as possible prop types into select boxes

Is your feature request related to a problem? Please describe.
In #510 it became apparent we are not thinking about mixins as reusable, so the terminology mixin might not be the correct one.

Describe the solution, feature, or improvement you'd like
Change terminology. To what? Not sure yet, want to open a discussion about it.

Additional context
This all started when on #510 instead of adding extra types to the current display mixin I decided to duplicate the code to keep the specific use case closer to its usage.

We should add a prop to Table and StatefulTable that accepts a component that gets rendered below the table headers when the table has no items.

I noticed some inconsistencies on sizing of these 2 components, so I'm raising this issue with the correct specs:

• Both components/graphics should have a bounding box of 24px/2.4rem
• Radio button size should be 22px, with 1px margin
• Checkboxes should be 20px, with 2px margin

Is your feature request related to a problem? Please describe.
It would be nice to have props to control the responsive display of the table columns in the Table/StatefulTable Components. Currently have added styling to control this (mobile, tablet, desktop responsive display), but adding props into big-design would be nice.

Describe the solution, feature, or improvement you'd like
Table/StatefulTable Components props could be able to control the display of the responsive table column display.

Describe alternatives you've considered
Currently have added styling around the Table Component to control the responsive display of the colums -

export const StyledTable = styled.div`
    tr td:nth-child(3) {
        display: none;
    }
    tr th:nth-child(3) {
        display: none;
    }
    word-break: break-word;
    ${({ theme }) => theme.breakpoints.tablet} {
        tr td:nth-child(3) {
            display: table-cell;
        }
        tr th:nth-child(3) {
            display: table-cell;
        }
    }
`;

Additional context
CC: @chanceaclark

Describe the bug
Description for the selectable prop in the Tree component seems off.

To Reproduce
https://developer.bigcommerce.com/big-design/tree

Expected behavior
A description of what the selectable prop means

Screenshots

Is your feature request related to a problem? Please describe.
For accessibility, we need a way to render a Checkbox component without a visual label. For instance, a selectable Table.Row needs a Checkbox, but with a visually-hidden label that specifies the actions to be made.

Describe the solution, feature, or improvement you'd like
Open to recommendations but here are some possible solutions:

Add a visuallyHidden prop to the Checkbox.Label element and add conditional visually-hidden styles. This will allow someone have an implementation like so:

<Checkbox label={<Checkbox.Label visuallyHidden>...</Checkbox.Label>} />

Another possible solution is to just add a prop to the Checkbox component:

<Checkbox label="..." visuallyHidden />

Additional context
We changed the label prop to be optional during the meantime, but we'll need to make it required again with this improvement.

Describe the bug
Let's say you have a modal implementation like so:

<Modal isOpen={true}>Hello</Modal>

Opening a modal with no actions elements or focusable elements inside the modal throws an error:
Error: Your focus-trap needs to have at least one focusable element.

Application will then crash.

To Reproduce
See above.

Expected behavior
Modal should be able to open regardless if there are/not focusable elements inside.

Regression bug from #252.

Is your feature request related to a problem? Please describe.
I would like to add an anchor tag that has the styles of the <Button> components.

Describe the solution, feature, or improvement you'd like
I think the easiest solution would be for the <Button> component to accept an as prop. We can then pass <Button as="a">.

In my opinion this would be a great option for all of the components. It would mean you could use <Box as="section"> etc.

Apologies if this is already possible, I couldn't see it in the docs.

Describe alternatives you've considered
An alternative is to have all the button styles available to css classes. This seems quite bloated though

Additional context
N/A

Is your feature request related to a problem? Please describe.
Would like there to be a FormControlLabelType so that one may add a label with an icon over the input ... it would be useful for adding a tooltip over that icon so that a user may have more information about what the specific input is to be used for

Is your feature request related to a problem? Please describe.
A clear and concise description of any alternative solutions or features you've considered.

Describe the solution, feature, or improvement you'd like
Create a prop where developers can opt to display button in a "mobile friendly" format.

Screenshots

Is your feature request related to a problem? Please describe.
For scheduling use cases, it's needed to allow a user to select a particular date and/or time that something should happen. There's nothing perfect for this use case with the native input components in BigDesign right now.

Describe the solution, feature, or improvement you'd like
A Date and/or Time input component for forms, such as:

https://www.npmjs.com/package/react-moment-datepicker
https://www.npmjs.com/package/react-datetime-picker

... but styled within BigDesign.

I cannot find any way to change the size of the Modal component.

By default, the Form is being rendered like this:

AddingfullWidth prop partially solves the problem (no empty space on the right side), but I don't need such a wide text input.

I have found interesting behavior for the Select component.

To Reproduce
Steps to reproduce the behavior:

1. Open dropdown (Click on the input)
2. Hover on another option from the dropdown
3. Click outside of dropdown (exit without changes)

Expected result: Nothing happens
Actual result: An option that was hover was selected

Code example
https://codesandbox.io/s/dank-sea-d20ee

Desktop (please complete the following information, if applicable):

• OS: [Mac Os]
• Browser [chrome]
• Version [Version 81.0.4044.122 (Official Build) (64-bit)]

Required a Menu component for listing the different sections which allow users to move around the site quickly and efficiently.
The Component should have responsive. and accept the props for alignment.
Horizontal for Navbar and Vertical for Sidebar.

Is your feature request related to a problem? Please describe.
The current UI for tables allows for draggable rows but the Stateful Table does not support this feature.

Describe the solution, feature, or improvement you'd like
I would like to have draggable rows part of Stateful Table like the ones shown here.
https://www.figma.com/file/Rj63WSTZQc2H4XI9Oi3r5o/MSF-design-(LATEST)?node-id=10702%3A0

At the moment we have a mix of 4/8px on these. Ideally we should use 4px consistently

Describe the bug

import { Link } from 'react-router-dom';
import { Button } from '@bigcommerce/big-design';

export default () => (
  <Button
    as={Link}  
    type="button"
    variant="subtle"
    to={{ pathname: '/next-page', search: location.search }} 
  >    
Go next
  </Button>
)

In order to ensure client-side navigation - I need to use Link component provided by react-router package. The code above gives me the following HTML output:

<a
  class="styled__StyledButton-..." 
  role="button" 
  tabindex="0" 
  type="button" 
  variant="subtle" 
  actiontype="normal" 
  theme="[object Object]" 
  href="/next-page">
  <span class="styled__ContentWrapper-sc-3yq204-1 cUnSLq">Go Next</span>
</a>

You can see some attributes being passed to the <a> tag without processing. Some of them are not valid attributes for <a> tag, therefore I get warnings in the console (even though from the design perspective - it looks as expected).

Expected behavior
All non-valid HTML attributes should be filtered out.

Screenshots

I might be misusing the component and it should be used in another way - I'd like to ask for your advice.

Describe the bug

On the select component, after selecting an item, you cannot trigger the dropdown by clicking inside the box. The only way to show the dropdown is to click on the triangle. This is inconsistent because initially, you can trigger the dropdown by clicking inside the box.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://developer.bigcommerce.com/big-design/select
2. Click on the topmost country select box
3. Click on any other country name
4. Click on inside the box

Expected behavior

Expected: Dropdown opens again
Actual: Nothing happens

Desktop (please complete the following information, if applicable):

• OS: [e.g. iOS] macOS 10.15.7
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 86

Describe the solution, feature, or improvement you'd like
Right now, the label prop only accepts a string. Need to change it to accept a FormControlLabel just like Inputs.

Describe the bug
When we have no items in the Table, when clicking the number of items dropdown, the layout seems to have some glitches causing the header to shift unexpectedly. This only seems to be an issue when the table is wrapped in the TableFigure component.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/dazzling-gareth-ljsb9?file=/src/index.tsx
2. Click the number of items dropdown
3. Notice the display issues, there seems to be some issues with overflow. The table header seems to shift when clicking.

Expected behavior
Expect the dropdown to float above the table with no shift in layout / overflow positioning.

To repro, see: https://codesandbox.io/s/dazzling-gareth-ljsb9?file=/src/index.tsx

Screenshots

Desktop (please complete the following information, if applicable):

• Device: Macbook Pro 2019
• OS: macOS Catalina 10.15.7
• Browser: Chrome
• Version: Version 88.0.4324.96 (Official Build) (x86_64)

Additional context
N/A

Is your feature request related to a problem? Please describe.
No problems right now, just surfacing a suggestion to the panel props

Describe the solution, feature, or improvement you'd like
I'm not sure if this is too specific, might warrant more discussion or might not even apply, but thought it might be a good idea to surface it anyway.

We usually have panels that look like this:

When this is the case, we cannot use the action and header helpers on the panel props since there would be no way for the badge to be correctly aligned. Maybe it would be helpful to provide a new prop that allows for a badge to be added, for example badge?: BadgeProps & { text: string }

Describe alternatives you've considered
Manually adding header, action and badge