A React Component library implementing the Base design language

Overview

Base Web React Components

Build status

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

Usage

On npm, you can find Base Web as baseui.

Add baseui and its peer dependencies to your project:

# using yarn
yarn add baseui styletron-react styletron-engine-atomic

# using npm
npm install baseui styletron-react styletron-engine-atomic
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';

const engine = new Styletron();

const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});

export default function Hello () {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

Both Base Web and Styletron come with flow types and TypeScript. All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages:

yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Docs

To read the documentation, please visit baseweb.design.

Contributing

Contributing

Shoutouts 🙏

BrowserStack Logo

Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

Comments
  • [Proposal] Change handler consistency

    [Proposal] Change handler consistency

    Here's a quick snapshot of our change handlers:

    Checkbox: onChange(evt) { console.log(evt.target.checked); } Input: onChange(evt) { console.log(evt.target.value); } Menu: onItemSelect(selectedItem: object) Modal: onClose(closeSource: string) Pagination: onPageChange?: (nextPage: number, prevPage: number) Popover: onOpen(), onClose() RadioGroup: onChange(evt) { console.log(evt.target.value); } Select: onChange(evt, params) { console.log(params.selectedOptions) } Slider: onChange(evt, value) { console.log(value) } TextArea: onChange(evt) { console.log(evt.target.value); }

    As you can see, there's a pretty significant amount of variation between components. It would probably be good for us to make these more consistent, or at least develop some guidelines around what to use when.

    I'd like to make a case for gravitating towards the following API long term:

    onChange(value, event, meta)
    
    • If this is a form control with a value, just pass that directly as the first argument. This prevents people from needing to remember how to dig into the event object like evt.target.checked or evt.target.value, etc. It also works better for components like multiple Select or Slider where the event doesn't actually have the form control value.
    • Event is second. I'd argue if you have the value first, event is rarely needed. It can also be confusing for something like multiple Select, where things like removing a tag technically trigger a change event. Or for pagination where clicking back/next or selecting a page from the dropdown can both trigger page changes.
    • Meta is third. This is an object that can include things like previous value (if useful), or any other metadata that may be useful to the user.

    The only benefit I can think for keeping event as the first argument is that it matches what people expect when using a native html element, but in many cases our components are not native html elements and the event can come from multiple different types of dom interactions. I'd rather be consistent within our own components than consistent with native elements.

    Curious to hear what folks think about this – do you agree there's a need to standardize? Are there downsides with the api proposed in this issue?

    enhancement question 
    opened by schnerd 31
  • feat(card): add img props

    feat(card): add img props

    Fixes #2549

    Description

    Add the ability to pass headerImage as an object instead of a string.

    Scope

    • [ ] Patch: Bug Fix
    • [x] Minor: New Feature
    • [ ] Major: Breaking Change
    feature 
    opened by nbdn 26
  • chore(progressbar): rename and move spinner-determinate to progressbar-rounded #3963

    chore(progressbar): rename and move spinner-determinate to progressbar-rounded #3963

    Fixes #3963

    Description

    I am proposing to rename SpinnerDeterminate into ProgressBarRounded. Please consider the code changes.

    This PR includes the following actions:

    1. renamed component
    2. moved related files to the progressbar folder
    3. moved doc example to the Progress Bar page
    4. kept re-exports in Spinner for backward compatibility

    Unfortunately, there is no way to hide StyledSpinnerDeterminate.. exports from the Spinner page. However, I propose to plan the full removal of SpinnerDeterminate exports, as a planned deprecation.

    Scope

    Minor: New Feature

    opened by Deliaz 23
  • Feat: added support for alternate css units for grid layout

    Feat: added support for alternate css units for grid layout

    Fixes #2626

    Description

    This PR has changes which allows to use alternate css units for gird layout. This is still in WIP status. Creating this PR so we can discuss more about it.

    Scope

    • [ ] Patch: Bug Fix
    • [x] Minor: New Feature
    • [ ] Major: Breaking Change

    CC: @gergelyke, @sandgraham

    feature 
    opened by karanisverma 23
  • fix(datepicker): reset highlight on value change

    fix(datepicker): reset highlight on value change

    https://github.com/uber/baseweb/issues/3067

    Description

    • added resetHighlightOnValueChange props for calender in datepicker/types.js
    • added logic to reset highlight in componentDidUpdate in calendar.js
    • wrote unit test for resetHighlihgtOnValue in calendar.test.js
    • added description of the feature in documentation

    Scope

    • [x] Patch: Bug Fix
    • [ ] Minor: New Feature
    • [ ] Major: Breaking Change
    feature 
    opened by ghost 20
  • Shadow DOM support

    Shadow DOM support

    Fixes https://github.com/uber/baseweb/issues/4277

    Additionally added:

    • e2e tests for shadow DOM cases of the updated components
    • e2e test utils for shadow DOM testing
    • Warning message when the library used inside of shadow DOM with mode="closed" since in this cause even event.composedPath() will not fetch a proper event target

    Scope

    Patch: Bug Fix

    opened by gevgeny 19
  • fix(toast): deduplicate toasts with same key

    fix(toast): deduplicate toasts with same key

    Fixes #2333

    Description

    • fixed typing on some of the functions. There was a type ToastPropsShapeT (ToastPropsT minus children) being used for state.toasts and for the return value of getToastProps(), but actually the children prop is in both. children is separate in the toaster.show() function but then it is recombined in the toasterInstance.show() function.
    • added helper function updateToastsMutationWithCount which performs the original toast update mutation but also returns the number of toasts updated
    • added updateToastsMutationWithCount to toasterInstance.show() function - it will attempt to update toasts with matching key prop first, and then only push the new toast if nothing was updated
    • clear existing autohide timeout in Toast.startTimeout if it already exists (i.e. reset the autohide timer)
    • call Toast.startTimeout in componentDidUpdate ONLY if autoHideDuration property is changed - we can avoid a deep comparison to figure out if a toast has changed or not. Might want to make this more explicit somehow - suggestions welcome
    • used Layer instead of creating a portal manually to the body
    • added new scenario and e2e test for normal toast behaviour (no key provided, autogenerate key and pop up additional toasts) and same-key behaviour (if toast with same key found, update it instead of popping up a new one)
    • added some text on the documentation page about toaster utility and the same-key update situation

    Scope

    • [x] Patch: Bug Fix
    • [ ] Minor: New Feature
    • [ ] Major: Breaking Change
    bugfix 
    opened by foodforarabbit 19
  • enhancement(phone-input) implement type to search and bugfixes

    enhancement(phone-input) implement type to search and bugfixes

    Resolves #1462

    Description

    PhoneInput:

    1. Implement filter functionality.
    2. Propagate down missing property (maxDropdownHeight).
    3. Enable adjusting of dropdown height when we have a small number of countries (mean when countries are filtering).
    4. ScrolltoIndex now works correctly when we set different maxDropdownHeight property.
    5. Add types (TS, Flow) (Also update incorrect ts types).
    6. Update screener and e2e tests.
    7. Add examples to docs for phone input with filter.

    Note:

    1. To phone input component I add new property enableFiltering to show or not show filtering, so existing users wouldn't see any changes until they do not enable filtering explicitly. (Potentially this PR does not introduce any breaking changes.)
    2. I don't know if I add correct styles, because you don't provide any sketches. let me know if need change styles.
    3. Changes to documentation-site/components/yard/override.tsx, documentation-site/examples/popover/placements.js added automatically by husky prehook (It's just prettier changes but if you need I can revert them)

    Scope

    • [X] Patch: Bug Fix
    • [X] Minor: New Feature
    • [ ] Major: Breaking Change
    feature 
    opened by qqingvarqq 18
  • Width of StatefulSelect when inside a Block or FlexGrid

    Width of StatefulSelect when inside a Block or FlexGrid

    Current Behavior

    StatefulSelect is rendering super narrow when placed inside a Block or a FlexGrid.

    In the linked demo I have outcommented the override, which makes it a min width, but I think it should not be needed to put an override to get a sensible default width?

    Demo: https://codesandbox.io/s/block-with-grid-usage-h4u3j

    Expected Behavior

    A better default width.

    Your Environment

    | Tech | Version | | ------- | ------- | | Base UI | v8.6.1 | | React | 16.8.2 | | browser | Chrome 75.x |

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.
    good first issue bug 
    opened by houmark 18
  • test(vrt): update snapshots during ci

    test(vrt): update snapshots during ci

    This PR allows CI to update snapshots as part of the vrt job. When a PR is opened, we run the vrt tests with the update flag so that it generates updated snaps. If there are any updated snaps, we open a new branch/PR based off of the original branch/PR. This new snapshot PR will get refreshed as new commits come through the original branch. Note this new logic only applies to commits on branches with open PRs. (non PR commits that run CI will have the old treatment of just a success/failure)

    This should remove the need to update things locally in the majority of cases. It lets people easily see what has changed (via the snapshot PR) and pull those changes into their branch/PR. It also keeps a more isolated record of snapshot updates over time.

    There is logic for posting comments with relevant links, opening/closing PRs, requesting reviews, etc. I also tried to account for some edge case scenarios (rebasing, merging PR and causing new changes, resolving conflicts on main branch) but there may (likely) be some even edgier stuff i haven't considered.

    This PR has some auto-generated comments that link to a sample snapshot PR. There are a lot of new files because i initially removed all of the snapshots on this branch (more on this behavior below). This leads us to...

    There a couple things left to do/consider here:

    • this does not compare changes against the master branch. so if you have approved/merged snapshot changes into your branch, that will be the base source of truth for snapshots as far as the ci check is concerned. there a couple ways to solve this. we could checkout the master snapshots (vrt/__image_snapshots__) in ci before running the tests. this would generate a pr with diffs against master. the downside is you can't gradually approve/merge changes into your branch. i thought the current implementation may be more graceful for more use cases, but it is something to track/look out for. i don't think changing it would require much code change (based on strategy above).
    • if the origin pr is closed/branch deleted - the snapshot branch/pr will still be open (if it exists). i will need to add a cleanup job when PRs close or something but prob in a subsequent pr.
    • this will not work with forks - i will need to add some more logic in a subsequent pr.
    build/tooling 
    opened by sandgraham 17
  • feat(datepicker-popover): adds support of mountNode

    feat(datepicker-popover): adds support of mountNode

    Description

    It adds support of mountNode attribute to Datepicker and Popover. It creates feature compatibility with Modal.

    Scope

    • [ ] Patch: Bug Fix
    • [x] Minor: New Feature
    • [ ] Major: Breaking Change
    feature 
    opened by jcemer 17
  • File Uploader: Is it posible to change button text?

    File Uploader: Is it posible to change button text?

    Hi, I want to change "Browse files" text as some svg image. Is it possible to override?

          disabled={productImgCount > 11 ? {} : ''}
          type="file"
          name="file"
          onDrop={fileSelectedHandler}
          overrides={{
            ContentMessage: {
              style: () => ({ display: "none" })
            },
            ButtonComponent: {
              props: {
                overrides: {
                  BaseButton: {
                    style: () => ({
                      value: 'Browse',
                      marginTop: "0px",
                      backgroundColor: 'transparent',
                      ':hover': {
                        backgroundColor: 'transparent'
                      },
                      ':active': {
                        backgroundColor: 'transparent'
                      }
                    })
                  }
                }
              }
            }
          }} />```
    
    Thanks
    opened by png-prakash 0
  • chore(deps): bump express from 4.17.1 to 4.18.2 in /packages/baseweb-vscode-extension

    chore(deps): bump express from 4.17.1 to 4.18.2 in /packages/baseweb-vscode-extension

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump qs from 6.5.2 to 6.5.3 in /packages/eslint-plugin-baseui

    chore(deps): bump qs from 6.5.2 to 6.5.3 in /packages/eslint-plugin-baseui

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump qs from 6.5.2 to 6.5.3 in /packages/baseui-codemods

    chore(deps): bump qs from 6.5.2 to 6.5.3 in /packages/baseui-codemods

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump express from 4.16.3 to 4.18.2

    chore(deps): bump express from 4.16.3 to 4.18.2

    Bumps express from 4.16.3 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Releases(v12.2.0)
  • v12.2.0(Oct 6, 2022)

    Changelog

    • Button timer (#5160)
    • chore(docs): make the editor inputs round (#5189)
    • fix(types): fix Grid.children to be React.ReactNode (#5188)
    • feat(data-table): add sort and textQueryChange callbacks (#5164)
    • feat(data-table): add clear selection imperitive method (#5162)
    • fix(dev): fix base web links (#5178)
    • fix(types): fix definition of optional TS theme properties (#5186)
    • fix(types): fix HeaderNavigation to allow children (#5185)
    • fix(types): fix TreeLabelInteractable to allow children (#5183)
    • fix(types): fix CardProps to match docs (#5182)
    • fix(types): fix StatefulPopoverProps to match docs (#5181)
    • fix(types): use React.PropsWithChildren with HeaderNavigationProps (#5180)
    • fix(types): make SkeletonProps.rows optional to match the docs (#5179)
    • Update button background in dark mode to match design spec (#5187)
    • fix(popover): handle click within anchor children (#5184)
    • chore(docs): add Progress Bar steps example (#5176)
    • chore(docs): make ProgressBar rounded example autoplay (#5177)
    • docs(theming): fix typo (#5175)
    • fix(textarea): do not apply children (#5174)
    Source code(tar.gz)
    Source code(zip)
  • v12.1.3(Sep 22, 2022)

  • v12.1.2(Sep 1, 2022)

    Changelog

    • fix(progress-bar): styled-bar should only require props it uses (#5154)
    • fix(sidenav): make optional side-navigation props optional again (#5153)
    • fix(popover): apply tooltip role to body (#5156)
    • fix(file-uploader): revert dropzone upgrade (#5155)
    • fix(timezone-picker): replace zone1970 with zone (#5152)
    • chore(message-card): add a11y e2e tests (#5145)
    Source code(tar.gz)
    Source code(zip)
  • v12.1.1(Aug 29, 2022)

    Changelog

    • fix(popover): popover should only appear if the trigger event is focus-visible (#5150)
    • fix(input): allow input focus when readonly (#5014)
    • Fix breadcrumb alignment and color (#5143)
    Source code(tar.gz)
    Source code(zip)
  • v12.1.0(Aug 26, 2022)

    Changelog

    • fix(table-semantic): align title when sortable and spacious (#5141)
    • fix(list-item): artwork-container should not shrink width (#5137)
    • fix(data-table): resize columns after row data changes (#5136)
    • chore(lint): lint suppress csstype no-unresolved (#5139)
    • fix(message-card): use ts file import (#5135)
    • chore(card): mock image src in card unit test (#5133)
    • feat(menu): add menu divider (#5132)
    • chore(timezone-picker): update tzdata (#5128)
    • chore(ts): add new ts concistent-type-imports rule (#5130)
    • chore(message-card): organize test images (#5127)
    • fix(badge): update badge text colors (#5125)
    • Add tabs end enhancer (#5004)
    • fix(select): update default maxDropdownHeight to 40vh (#5118)
    • feat(textarea): add resize support (#5103)
    • fix(vrt): wait for network idle to avoid image load unreliability (#5109)
    • Round corners for input components (#5107)
    • fix(fonts): set heading & display font weights to 700 (#5087)
    • fix(map-marker): change label type to accept components (#5102)
    • chore(button): change mini button radius to 4px (#5092)
    • feat(timezonepicker): add arbitrary tz options to list (#5096)
    • fix(Banner): convert shorthand margin to longhand (#5098)
    • fix(ladle): replace react-virtualized with react-window (#5094)
    • chore(banner): export banner override types (#5055)
    • feat(message-card): build message card (#5068)
    • feat(layer): implement keyboard event handlers (#5080)
    • fix(accessibility): upgrade axe-core and fix new errors (#5081)
    • fix(test): update @testing-library/dom (#5083)
    • Location Puck (#4925)
    • fix(styletron): apply displayName (#5075)
    Source code(tar.gz)
    Source code(zip)
  • v12.0.0(Jul 21, 2022)

    Changelog

    • fix(ts): adds missing type definitions (#5054)
    • fix(docs): update docs cheat sheet to TS (#5052)
    • fix(ts): optional properties in progress steps component (#5049)
    • Update star rating color to black (#5045)
    • fix(docs): add sharedProps to banner yard config (#5046)
    • fix(ts): add $style prop to block component (#5038)
    • fix(ts): mark default modal props as optional (#5037)
    • chore(docs): remove ie support from docs site - improve build time (#5042)
    • fix(docs): remove extract-react-types from docs site (#5034)
    • fix(types): update type aliases, mark optional props for checkbox (#5035)
    • fix(types): accordion, relax children type (#5033)
    • fix(types): backward compatibility fixes (#5032)
    • Divider component (#5027)
    • TypeScript migration (#4989)
    • chore(themes): add new token backgroundOverlayArt (#5030)
    • fix(typescript): fix type errors in converted code (#5009)
    • Merge pull request #5008 from zxbodya/converty-to-ts
    • fix(test): remove incorrect js extension in jest.unmock call
    • chore(build): update config to use typescript sources
    • chore(jest): typescript test config
    • flowts convert
    • flowts rename
    • chore(typescript): prepare for migration (#5007)
    • fix(sync): use main branch (#5023)
    • chore(sync): add sync script (#5019)
    • fix(badge): avoid warning for inline badges (#5013)
    Source code(tar.gz)
    Source code(zip)
  • v11.2.1(Jul 5, 2022)

  • v11.2.0(Jul 1, 2022)

  • v11.1.2(Jun 23, 2022)

    Changelog

    • fix(app-nav-bar): use grid maxWidth (#4997)
    • feat(file-uploader): progress bar, cancel & retry buttons overrides (#5002)
    • test(vrt): update visual snapshots for fix-select [skip ci] (#4991)
    Source code(tar.gz)
    Source code(zip)
  • v11.1.1(Jun 16, 2022)

  • v11.1.0(Jun 13, 2022)

    Changelog

    • chore: test Ladle v1 (#4985)
    • fix(app-nav-bar): correct spacing (#4982)
    • chore(spinner): remove styledspinnernext deprecation warning (#4984)
    • chore(deps): Bump async in /packages/baseweb-vscode-extension (#4922)
    • feat(badge): implement new badge component (#4964)
    • feat(banner): create component (#4970)
    • Update CODEOWNERS
    • fix(types): update typescript definitions to better match the implementation (#4977)
    • chore(lint): eslint TypeScript configuration (#4973)
    • chore: bump ladle (#4968)
    • feat(empty-state): add documentation (#4972)
    • fix(vrt): add test to assert that config key has associated scenario (#4967)
    • fix(select): fix blur when button click renders select (#4962)
    • fix(select): handleBlur should check event type before bound check (#4960)
    • feat(input): add readOnly state to input & textarea (#4591) (#4942)
    • fix(list-item): modify list-item props type (artwork, endEnhancer) (#4957)
    • docs(setup): add info about installing npm types (#4959)
    • feat(payment-card): added uatp card support (#4961)
    • feat(notification): update margin to match spec (16px) (#4954)
    • feat(locale): add turkish localization (#4941)
    • fix(popover): fix animateout property (#4953)
    • fix(typescript): fix HeaderNavigationProps type (#4949)
    • fix(icons): test and fix icon usage with global overrides (#4951)
    • chore(e2e): change from puppeteer to playwright in integration tests (#4937)
    • fix(notification): remove margin (#4944)
    Source code(tar.gz)
    Source code(zip)
  • v11.0.3(May 13, 2022)

    Changelog

    • fix(typescript): fix styletron-related ts types (#4943)
    • fix(select): correct usage of matchPos in default filter options (#4930) (#4931)
    • fix(select): restore input ref functionality (#4938)
    • fix(datepicker): remove date callback param covariance (#4935)
    Source code(tar.gz)
    Source code(zip)
  • v11.0.2(Apr 28, 2022)

    Changelog

    • fix(datepicker): restore onChange type and add new onRangeChange fn (#4932)
    • fix(tag): set $isFocusVisible to be optional (#4929)
    • fix(snackbar): remove delay from initial snackbar enter animation (#4928)
    Source code(tar.gz)
    Source code(zip)
  • v11.0.1(Apr 20, 2022)

    Changelog

    • fix(form-control): label component in form-control overrides theme font-weight (#4924)
    • chore(deps-dev): Bump moment from 2.24.0 to 2.29.2 (#4911)
    • fix(select): properly render select loading state with new spinner (#4919)
    • fix(list-item): menu-adapter works well with screen reader (#4910)
    • feat: add type of props passed to FormControl child (#4912)
    • docs(select): update example to render correctly (#4917)
    • docs: deploy ladle with next (#4916)
    • feat(data-table): provide developer access to table rows (#4904)
    • chore(bundle-size): batch page visits to improve perf (#4902)
    Source code(tar.gz)
    Source code(zip)
  • v11.0.0(Apr 7, 2022)

    Changelog

    • V11.0.0 feature branch (#4787)
    • fix(menu): stop capturing tab key events (#4895)
    • docs: fix version selector (#4894)
    • feat(accordion): support arrow keys, home key, end key (#4884)
    Source code(tar.gz)
    Source code(zip)
  • v10.12.1(Mar 31, 2022)

  • v10.12.0(Mar 31, 2022)

    Changelog

    • feat(eslint-plugin): add rules to fix isError to error (#4882)
    • chore: ladle support for React v18 and Vite 2.9 stable (#4881)
    • chore(deps): Bump ansi-regex in /packages/eslint-plugin-baseui (#4876)
    • chore(test): add tests for react 18 and upgrade to v17 (#4867)
    • chore: upgrade ladle (#4879)
    • fix(progress-bar): fix maxValue typo in TS definition (#4870)
    • feat(select): imperatively change input value (#4864)
    Source code(tar.gz)
    Source code(zip)
  • v10.11.1(Mar 29, 2022)

    Changelog

    • fix(input): fix types to align with element expected (#4866)
    • fix(timezone-picker): fix broken test (#4871)
    • fix(docs): remove v10.9.2 from version selector (#4861)
    Source code(tar.gz)
    Source code(zip)
  • v10.11.0(Mar 23, 2022)

    Changelog

    • feat(eslint): add no shorthand properties rule (#4862)
    • fix(input): allow for 'any' value for input step (#4860)
    • fix(types): overrides should be inexact (#4859)
    • chore(eslint): update peer deps (#4858)
    • chore(test): update jest config, fix local tests (#4855)
    • Remove unnecessary // @flow from TS implementation (#4856)
    • chore(eslint): align prettier/eslint (#4850)
    • chore(flow): move from eslint weak type to flowlint (#4846)
    • chore: bump to ladle public version (#4848)
    • chore(flow): update flow, resolve errors (#4842)
    • chore: bump vite and ladle (#4841)
    • chore(eslint): align eslint deps (#4839)
    • Fix typo in TS definitions (#4840)
    • feat(button): accept arbitrary color in button component (#4836)
    • feat(eslint): add no-component-classname lint rule (#4830)
    • fix: update ladle to use experimental vite prebundling (#4824)
    • Consistent aria label (#4823)
    Source code(tar.gz)
    Source code(zip)
  • v10.10.0(Mar 3, 2022)

    Changelog

    • feat(eslint): separate block rule from deprecated component api (#4825)
    • feat(data-table): restore recent data-table changes (#4806)
    • docs(roadmap): add button minimal -> tertiary to roadmap (#4822)
    • Guide to Styletron/Base Web Setup for Remix.js (#4815)
    • feat(timezone-picker): replace all underscores in zone label (#4816)
    • chore(deps): Bump url-parse in /packages/baseweb-vscode-extension (#4817)
    • fix(docs): fix toast docs (#4814)
    Source code(tar.gz)
    Source code(zip)
  • v10.9.2(Feb 24, 2022)

  • v10.9.1(Feb 23, 2022)

    Changelog

    • revert(data-table): reverts recent data-table changes (#4801)
    • fix(popover): maintain scroll on content open (#4798)
    • feat(form-control): add counter end enhancer (#4737)
    • fix(data-table): fix slider scale (#4795)
    • chore(deps): Bump url-parse in /packages/baseweb-vscode-extension (#4781)
    Source code(tar.gz)
    Source code(zip)
  • v10.9.0(Feb 18, 2022)

    Changelog

    • feat(data-table): histogram for numerical filter (#4775)
    • feat(map-marker): add xxsmall markers, add label enhancer, add badge enhancer, add docs (#4684)
    • fix(timezone-picker): properly calculate tz offsets (#4788)
    • fix(timezone-picker): update timezones and add script to update (#4776)
    • chore(ci): remove guard-component-size CI job (#4778)
    • feat(progress-bar): add minValue and maxValue (#4773)
    • chore(typography): fix missed doc-site references' (#4769)
    • feat(datepicker): add calendar a11y tests for all e2e (#4691)
    • chore(deps): Bump follow-redirects in /packages/baseweb-vscode-extension (#4766)
    • chore(typography): update all typography usage to use new API (#4762)
    • fix(progress-bar): export missing type/add getOverrides to root exports (#4747)
    • chore(deps): Bump follow-redirects from 1.14.7 to 1.14.8 (#4764)
    • feat(button-group): add selected disabled visual state (#4755)
    • feat(styles): export all types from styles/index.js (#4690)
    • chore(deps): Bump ajv in /packages/eslint-plugin-baseui (#4759)
    • chore(deps): Bump ajv from 6.5.2 to 6.12.6 (#4761)
    • chore(deps): Bump ajv from 6.10.2 to 6.12.6 in /packages/baseui-codemods (#4760)
    • chore(deps): Bump handlebars in /packages/baseweb-vscode-extension (#4758)
    • refactor(data-table): performance improvements for wide tables (#4749)
    • chore(deps): Bump simple-get from 3.1.0 to 3.1.1 (#4757)
    • chore(deps): Bump simple-get in /packages/baseui-codemods (#4756)
    • chore(deps): Bump ua-parser-js from 0.7.18 to 0.7.31 (#4752)
    • fix(modal): modal will not lock focus within an iframe only (#4746)
    • feat(eslint): consolidate import logic in ImportDeclaration for perf (#4742)
    • fix(datepicker): remove boxShadow from outsideMonth date(#4724) (#4725)
    • feat(spinner): add support for existing props in next (#4731)
    • fix(progress-bar): forward ref for popover compatability (#4730)
    • fix(eslint): treat opening/closing tags separately (#4728)
    • fix(combobox): add a11y test to combobox (#4727)
    Source code(tar.gz)
    Source code(zip)
  • v10.8.0(Jan 20, 2022)

    Changelog

    • fix(eslint): check object owns property for Identifier, add test (#4713)
    • feat(notification): update background and text colors (#4709)
    Source code(tar.gz)
    Source code(zip)
  • v10.7.4(Jan 19, 2022)

  • v10.7.3(Jan 19, 2022)

    Changelog

    • fix(eslint): add more tests and rewrite typography logic (#4702)
    • fix(popover): fix component name overwrite (#4706)
    • chore(deps): Bump follow-redirects in /packages/baseweb-vscode-extension (#4705)
    • chore(deps): Bump follow-redirects from 1.14.5 to 1.14.7 (#4704)
    • fix(popover): correct initial content position (#4700)
    • fix(eslint): add jsx check if import was renamed (#4699)
    Source code(tar.gz)
    Source code(zip)
  • v10.7.2(Jan 12, 2022)

  • v10.7.1(Jan 4, 2022)

  • v10.7.0(Jan 4, 2022)

    Changelog

    • feat(eslint): add more rules for upcoming v11 upgrade (#4672)
    • fix(layer): handle dynamic triggertype (#4680)
    • fix(dnd-list): move color property to styled-component (#4679)
    • docs(guides/tables):Fix the spelling of utilizes (#4677)
    • fix(modal): update returnFocus type to match with returnFocus type of FocusLock (#4674)
    • fix(popover): Bumping React focus lock to fix autoScroll on autoFocus on popover issue (#4669)
    • feat(eslint): add deprecated components (#4671)
    • fix(datepicker): calendar header styles (#4664)
    • test(datepicker): add scenario to verify am/pm shows in datepicker (#4666)
    • feat(datepicker): implement dense calendar (#4655)
    • fix(timepicker): handle min/max datetimes outside of value date (#4657)
    • fix(card): card title font-weight should be configurable from theme values (#4584)
    • chore(datepicker): update calendar styles (#4643)
    • chore(deps): Bump hosted-git-info in /packages/baseweb-vscode-extension (#4653)
    • fix(documentation) Removes <ValueT> from Select JavaScript example (#4652)
    • chore(deps): Bump dns-packet in /packages/baseweb-vscode-extension (#4650)
    • chore(deps): Bump merge-deep in /packages/baseweb-vscode-extension (#4649)
    • chore(deps): Bump color-string in /packages/baseweb-vscode-extension (#4648)
    • chore(deps): Bump url-parse in /packages/baseweb-vscode-extension (#4647)
    • chore(deps): Bump path-parse in /packages/baseweb-vscode-extension (#4646)
    • chore(deps): Bump tar in /packages/baseweb-vscode-extension (#4642)
    • chore(deps): Bump ws in /packages/baseweb-vscode-extension (#4641)
    • chore(deps): Bump tmpl in /packages/baseweb-vscode-extension (#4640)
    • fix(popover): autoFocus without focusLock (#4630)
    • feat(theming): add deep and shallow box shadows (#4629)
    • fix(datepicker): set static date for tests (#4639)
    • chore(date-table): add mask to data-table-columns (#4635)
    • chore(map-marker): add yard (#4638)
    • fix(types): fix typescript definition errors (#4636)
    • fix(datepicker): render correct formatString when mask is undefined (#4621)
    Source code(tar.gz)
    Source code(zip)
  • v10.6.0(Nov 16, 2021)

    Changelog

    • docs(site): add blog to header navigation (#4624)
    • fix(popover): improve keyboard a11y for hover popovers (#4598)
    • fix(drawer): remove focus guards due to tabIndex a11y issue (#4620)
    • fix(snackbar): handles enqueue calls in async context (#4611)
    • fix(button): update loading spinner color (#4618)
    • fix: change accordion background color to primary / improve its contrast (#4615)
    • Split datepicker dropdown (#4573)
    • chore(deps): Bump axios from 0.21.1 to 0.21.4 (#4607)
    • fix(rating): reset preview on outside blur only (#4614)
    • fix(types): add missing animateUnderline props (#4608)
    • docs: link working nextjs baseweb project in setup (#4610)
    • Update Ladle - Snowpack replaced by Vite (#4592)
    • fix(tooltip): update tooltip border radius to align with design (#4594)
    • fix(table-semantic): right-align column headers for numbers (#4585)
    • fix(menu): add onMouseDown prop to OptionListProps (#4589)
    • docs: add a note about themeprovider vs baseprovider div (#4588)
    • feat(date-picker): adds month shared prop (#4553)
    • fix(select): change clear icon size from size prop (#4578)
    • fix(button): minimal/tertiary kind disabled bg color transparent (#4575)
    • docs(theming): update hash links (#4586)
    • fix(menu): add all props for OptionListProps (#4577)
    Source code(tar.gz)
    Source code(zip)
Owner
Uber Open Source
Open Source Software at Uber
Uber Open Source
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022
Built a covid-19 trcaker app using React.js implementing hooks and materail UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Aditya Dond 1 Dec 21, 2021
A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

HugePancake 5 Jun 3, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
🔄 Basic project to start studying React and Typescript. With it you can translate text to binary or morse language. This project addresses the creation of routes and components.

max-conversion Projeto criado para iniciar nos estudos de React e Typescript Basic project to gain knowledge in react Na plataforma é possível convert

Igor Neves 3 Feb 12, 2022
This is a starter file with base SvelteKit skeleton configurations with Open Props, Jit Props, and PostCSS configured.

create-svelte Everything you need to build a Svelte project, powered by create-svelte; Creating a project If you're seeing this, you've probably alrea

Brittney Postma 4 Jul 22, 2022
A Drag & Drop Form Builder base on Bootstrap v4.x

bsFormBuilder 一个基于 Bootstrap (v4.x) + JQuery 的、拖拽的表单构建工具。 特点 1、基于 Bootstrap (v4.x) + JQuery,简单易用 2、拖动的 html 组件,支持通过 Json 自定义扩展 3、组件的属性面板,支持通过 Json 自定义

Michael Yang 10 Aug 25, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Pranav Teegavarapu 8 Jan 3, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
A free book that talks about design patterns/techniques used while developing with React.

React in patterns ?? A free book that talks about design patterns/techniques used while developing with React. Book GitBook Web PDF Mobi ePub Translat

Krasimir Tsonev 12.3k Jan 7, 2023
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Salah Eddine Lalami 208 Jan 8, 2023
Hacker-news-with-react - 👾 Consuming the hacker news api, i created a more modern design for than the current site.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

João Thomaz 1 Jan 3, 2022
An implementation of GitHub's Primer Design System using React

Primer React A React implementation of GitHub's Primer Design System Documentation Our documentation site lives at primer.style/react. You'll be able

Primer 2.2k Dec 26, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jed Watson 25.6k Jan 3, 2023