Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for optional progress step bar labels #107

Merged
merged 1 commit into from
Jun 20, 2019
Merged

Conversation

hartsick
Copy link
Contributor

Finishes #105

Usages:

    <!-- With default step name ("Step") -->
    <%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 3, step_count: 5, step_description: 'Basic Info' } %>

    <!-- With custom step name ("Section") -->
    <%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 3, step_count: 5, step_name: 'Section', step_description: 'Basic Info' } %>

Screen Shot 2019-06-17 at 5 19 08 PM

@hartsick hartsick requested a review from norrishung June 18, 2019 00:21
@hartsick hartsick force-pushed the step-bar-label branch 2 times, most recently from 3cd6ab8 to 07c2615 Compare June 18, 2019 00:37
@hartsick hartsick temporarily deployed to cfa-styleguide-pr-107 June 18, 2019 00:39 Inactive
Copy link
Contributor

@tdooner tdooner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, two pieces of unsolicited advice here.... and you may wish to get another review if you're looking for any specific context-based comments.

</div>

<div class="progress-step-bar__label <%= 'sr-only' if local_assigns[:step_description].nil? %>" id="<%= label_id %>">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a nitpick: local_assigns[:step_description].blank? is marginally better for checking text presence

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point! wasn't thinking about programmatically rendering a step description (imagine people will manually provide) when I wrote

@@ -1,11 +1,20 @@
<% step_name = local_assigns[:step_name] || 'Step' %>
<% label_id = "progress-step-bar--#{step_name}-#{current_step + 1}-#{step_count}-label".downcase %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for components partials, I've seen a pattern of all local_assigns usages at the top, so users of the component can see all the parameters. I don't know if we want to adopt that pattern but if we did it would include step_description up here as well... e.g.

<% step_name = local_assigns[:step_name] || 'Step' %>
<% step_description = local_assigns[:step_description] %>

(I think the styleguide example is sufficient here, this is just a thought)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that pattern suggestion!

Also adds screenreader description of graphic regardless of whether or
not description is provided.
@hartsick
Copy link
Contributor Author

hartsick commented Jun 20, 2019

lgtm, two pieces of unsolicited advice here.... and you may wish to get another review if you're looking for any specific context-based comments.

this was very much solicited feedback. thanks for taking a look @tdooner !

@hartsick hartsick merged commit 122f160 into master Jun 20, 2019
@hartsick hartsick deleted the step-bar-label branch June 20, 2019 23:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants