Trial Bar: Add component #2025

pulkonet · 2019-06-09T06:09:27Z

Fixes #2006

Also adds an inverse variant to the dropdown menu component, to work with Trial Bar.

Additional description

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
npm run lint:fix has been run and linting passes.
Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
Tests have been added for new props to prevent regressions in the future. See readme.
Review the appropriate Storybook stories. Open http://localhost:9001/.
Review tests are passing in the browser. Open http://localhost:8001/.
Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
Tests have been added for new props to prevent regressions in the future. See readme.
Review the appropriate Storybook stories. Open http://localhost:9001/.
The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
Review tests are passing in the browser. Open http://localhost:8001/.
Review markup conforms to SLDS by looking at DOM snapshot strings.

Required only if there are markup / UX changes

Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

garygong · 2019-06-12T04:56:14Z

Awesome! @davidlygagnon and I will take a look at this PR tomorrow!

interactivellama · 2019-06-12T14:37:25Z

components/trial-bar/button.jsx

+	 */
+	style: PropTypes.object,
+};
+


@garygong @davidlygagnon I would recommend non-custom props for TrailBar's Button and Dropdown link to the Button and Dropdown doc pages in the comment on this line inside a comment which would be the larger type on the component description. This would allow the removal of the prop table from the docs and decrease duplicate lines of code which may not be updated in the future, for instance, when we add props to dropdown.

Something closer to Radio on this page https://react.lightningdesignsystem.com/components/radio-groups/

Source: https://github.com/salesforce/design-system-react/blob/master/components/radio-group/index.jsx#L4

…to f/trial-bar

davidlygagnon

Looks good Pulkit! Just left a few comments. Thanks

components/trial-bar/index.jsx

components/trial-bar/dropdown.jsx

components/trial-bar/index.jsx

davidlygagnon · 2019-06-13T06:35:33Z

components/trial-bar/dropdown.jsx

+const TrialBarDropdown = (props) => {
+	const { label, ...rest } = props;
+	return (
+		<Dropdown {...rest} inverse>


Is it really necessary to add a new prop inverse on dropdown component since it's only adding a class name? Maybe we can just use className instead?

We can use just the className but isn't having an inverse variant of the dropdown worth it?

davidlygagnon · 2019-06-13T14:23:21Z

components/trial-bar/button.jsx

+
+// This component accepts the same props as Button.
+// eslint-disable-next-line react/forbid-foreign-prop-types
+const { propTypes } = Button;


I wonder if we really need this and whether it will break people that are using the babel-plugin-transform-react-remove-prop-types plugin to remove props. Would it be sufficient to just have a link pointing to the Dropdown component?

I used BuilderHeader for reference, if that's working for the consumers I don't think this is much different. I will update it if need be.

Ok - let's leave as is then.

interactivellama · 2019-06-13T16:42:37Z

components/trial-bar/button.jsx

+import Button from '~/components/button';
+import { TRIAL_BAR_BUTTON } from '../../utilities/constants';
+
+// This component accepts the same props as Button.


This is a doc site matter, so it's not very obvious, but this comment should follow the way that component descriptions should to be written to be picked up by react-docgen. I think that requires the comment it to in multi-line quote comment on the line directly before the class/function declaration. A markdown URL to the Button page would be good https://react.lightningdesignsystem.com/components/buttons/ . I think there are other examples in the library. The easiest way to check is to run npm build:docs and make sure this component shows up.

@davidlygagnon I'd recommend running the doc site consuming this branch locally to make sure all the comments and props show up correctly--or maintainers can fix this up, since the doc site isn't public. Either way is fine. As you know, the whole library/doc site can be finicky. Kevin and I spent some time with Setup Assistant yesterday.

I have added multi-line comments right before the components declaration but haven't removed the propTypes. It is as done in BuilderHeader component that I was using as a reference. Let me know if this needs further updation.

I'm referring to doc comments only. Please see https://github.com/salesforce/design-system-react/blob/master/components/builder-header/nav-dropdown.jsx#L16

which shows up on the doc site here:

Please add a link to the doc site Button there.

Cool - I'll double check by building the doc site locally.

…to f/trial-bar

davidlygagnon

Looks good to me!

Will be merging today.

davidlygagnon · 2019-06-17T18:48:16Z

@pulkonet Before we merge this, we need to fix the docs:

add trial-bar to site.stories.jsx.

2. The docs are showing the wrong component.

Please update components/trial-bar/__docs__/site-stories.js to use trial-bar instead of progress-bar.

…to f/trial-bar

davidlygagnon · 2019-06-19T14:42:53Z

@pulkonet I'm still seeing a few console errors on launching the docs site. We need to expose the sub-components of trial-bar as well (TrialBarButton, TrialBarDropdown).

We're almost there!

davidlygagnon · 2019-06-21T04:55:05Z

@pulkonet I'm ready to merge it now. Doc site shows the component correctly. Can you fix the merge conflicts. Thanks!

pulkonet added 4 commits June 8, 2019 23:51

Trial Bar: initial commit

58c7fde

Adds children with plausible props for trialbar

63ba654

Trial Bar: Changes to styling

de85a71

Dropdown Menu: Adds inverse variant

aee6f35

salesforce-cla bot added the cla:signed label Jun 9, 2019

pulkonet added 4 commits June 9, 2019 11:42

Trial Bar: fix deepscan issues

1a92e9f

Trial Bar: Adds component to package.json

b14fec8

Trial Bar: Corrects status from prod to prototype

20763e7

Dropdown: Adds test for inverse variant

b42f8b5

pulkonet marked this pull request as ready for review June 12, 2019 01:01

Trial Bar: Adds storybook snapshot

c383501

pulkonet force-pushed the f/trial-bar branch from 52ab68c to c383501 Compare June 12, 2019 01:24

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 12, 2019 13:36 Inactive

interactivellama added the trial-bar label Jun 12, 2019

interactivellama assigned davidlygagnon and garygong Jun 12, 2019

interactivellama reviewed Jun 12, 2019

View reviewed changes

interactivellama changed the title ~~Trial Bar: Adds trial bar component from SLDS~~ Trial Bar: Add component Jun 12, 2019

Trial Bar: Removes propTypes and imports foreign propTypes

7944138

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 13, 2019 02:58 Inactive

Merge branch 'master' of github.com:salesforce/design-system-react in…

93add4f

…to f/trial-bar

davidlygagnon suggested changes Jun 13, 2019

View reviewed changes

davidlygagnon reviewed Jun 13, 2019

View reviewed changes

interactivellama reviewed Jun 13, 2019

View reviewed changes

Trial Bar: Makes suggested changes

51dbba4

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 13, 2019 18:25 Inactive

Merge branch 'master' of github.com:salesforce/design-system-react in…

dabd1f4

…to f/trial-bar

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 13, 2019 18:28 Inactive

Trial Bar: Add links to subcomponent description

9b80e50

Merge branch 'master' of github.com:salesforce/design-system-react in…

53f4372

…to f/trial-bar

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 14, 2019 17:03 Inactive

davidlygagnon previously approved these changes Jun 17, 2019

View reviewed changes

Trial Bar: Adds to site-stories

b9565af

pulkonet dismissed davidlygagnon’s stale review via b9565af June 18, 2019 04:23

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 18, 2019 04:23 Inactive

TrialBar: exported from components

c5c99ad

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 19, 2019 03:24 Inactive

Merge branch 'master' of github.com:salesforce/design-system-react in…

d004ded

…to f/trial-bar

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 19, 2019 03:29 Inactive

TrialBar: exposed subcomponents

c82d2f1

interactivellama temporarily deployed to design-system-react-co-pr-2025 June 19, 2019 17:25 Inactive

davidlygagnon previously approved these changes Jun 21, 2019

View reviewed changes

Fixed merge conflicts

86b1bc8

pulkonet dismissed davidlygagnon’s stale review via 86b1bc8 June 21, 2019 04:59

interactivellama deployed to design-system-react-co-pr-2025 June 21, 2019 04:59 View deployment

davidlygagnon approved these changes Jun 21, 2019

View reviewed changes

davidlygagnon merged commit 7f96518 into salesforce:master Jun 21, 2019

pulkonet deleted the f/trial-bar branch June 21, 2019 16:02

Trial Bar: Add component #2025

Trial Bar: Add component #2025

Uh oh!

Conversation

pulkonet commented Jun 9, 2019

Additional description

CONTRIBUTOR checklist (do not remove)

REVIEWER checklist (do not remove)

Required only if there are markup / UX changes

Uh oh!

garygong commented Jun 12, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davidlygagnon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davidlygagnon left a comment

Choose a reason for hiding this comment

Uh oh!

davidlygagnon commented Jun 17, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidlygagnon commented Jun 19, 2019

Uh oh!

davidlygagnon commented Jun 21, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

davidlygagnon commented Jun 17, 2019 •

edited

Loading