Skip to content

Right justified button alignment in Card component #2938

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.

Sign up for GitHub

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

Merged
jhutchison-nava merged 3 commits into from
Mar 9, 2026
Merged

Right justified button alignment in Card component #2938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e04bcee
Update card component heading. Remove margin-right from card heading …
jhutchison-nava Feb 19, 2026
01e9576
Update for links
jhutchison-nava Mar 6, 2026
8dd4d86
Update tests
jhutchison-nava Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dpc-portal/app/components/core/card/basic_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>
<div class="flex-align-self-center">
<% if @button_params %>
<%= link_to @button_params[:name], @button_params[:path], class: 'usa-button' %>
<%= link_to @button_params[:name], @button_params[:path], class: @button_params[:class] %>
Copy link
Contributor

@jdettmannnava jdettmannnava Mar 9, 2026

Choose a reason for hiding this comment

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

Unsure why not just hard code margin-0 here?

Copy link
Contributor Author

@jhutchison-nava jhutchison-nava Mar 9, 2026

Choose a reason for hiding this comment

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

In theory, I suppose you could. But that increases the chances to need to opt-out of margin-0, which would become annoying

<% end %>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion dpc-portal/app/components/core/card/basic_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ class BasicComponent < ViewComponent::Base
def initialize(text_content: '<h1>Welcome</h1>', button_params: nil)
super
@text_content = text_content
@button_params = button_params
@button_params = button_params&.merge({
class: ['usa-button', button_params[:class]].join(' ').strip
})
end
end
end
Expand Down
2 changes: 1 addition & 1 deletion dpc-portal/app/components/page/credential_delegate/list_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</div>
<% end %>
<%= render(Core::Card::BasicComponent.new(text_content: '<h2>Invites</h2>',
button_params: { name: 'Invite CD', path: new_organization_credential_delegate_invitation_path(@organization.path_id), method: :get} )) do %>
button_params: { name: 'Invite CD', path: new_organization_credential_delegate_invitation_path(@organization.path_id), class: 'margin-0'} )) do %>
<p>You can invite users to be Credential Delegates.</p>
<div>
<h3>Pending invites</h3>
Expand Down
6 changes: 3 additions & 3 deletions dpc-portal/app/components/page/organization/credentials_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div id="credentials">
<%= render(Core::Card::BasicComponent.new(text_content: '<h2>Client tokens</h2>',
button_params: { name: 'Generate token', path: new_organization_client_token_path(@organization.path_id)} )) do %>
button_params: { name: 'Generate token', path: new_organization_client_token_path(@organization.path_id), class: 'margin-0' } )) do %>
<div>
<p>Client tokens monitor who's accessing the API with your organization credentials.</p>
<% if @organization.client_tokens.present? %>
Expand All @@ -17,7 +17,7 @@
</div>
<% end %>
<%= render(Core::Card::BasicComponent.new(text_content: '<h2>Public keys</h2>',
button_params: { name: 'Add key', path: new_organization_public_key_path(@organization.path_id) } )) do %>
button_params: { name: 'Add key', path: new_organization_public_key_path(@organization.path_id), class: 'margin-0' } )) do %>
<div>
<p>Public keys verify that client token requests come from an authorized application.</p>
<% if @organization.public_keys.present? %>
Expand All @@ -35,7 +35,7 @@
<% end %>

<%= render(Core::Card::BasicComponent.new(text_content: '<h2>Public IP addresses</h2>',
button_params: { name: 'Add IP', path: new_organization_ip_address_path(@organization.path_id)} )) do %>
button_params: { name: 'Add IP', path: new_organization_ip_address_path(@organization.path_id), class: 'margin-0'} )) do %>
<div>
<p>Provide a maximum of 8 public IP addresses associated with systems that will access claims data.</p>
<% if @organization.public_ips.present? %>
Expand Down
2 changes: 1 addition & 1 deletion dpc-portal/spec/components/page/credential_delegate/list_component_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<h2>Invites</h2>
</div>
<div class="flex-align-self-center">
<a href="/organizations/#{org.path_id}/credential_delegate_invitations/new" class="usa-button">Invite CD</a>
<a href="/organizations/#{org.path_id}/credential_delegate_invitations/new" class="usa-button margin-0">Invite CD</a>
</div>
</div>
<p>You can invite users to be Credential Delegates.</p>
Expand Down
6 changes: 3 additions & 3 deletions dpc-portal/spec/components/page/organization/credentials_componenent_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,19 @@
let(:org) { ComponentSupport::MockOrg.new(0) }
it 'Should have Generate token button' do
button = <<~BUTTON
<a class="usa-button" href="/organizations/#{org.path_id}/client_tokens/new">Generate token</a>
<a class="usa-button margin-0" href="/organizations/#{org.path_id}/client_tokens/new">Generate token</a>
BUTTON
is_expected.to include(normalize_space(button))
end
it 'Should have Create key button' do
button = <<~BUTTON
<a class="usa-button" href="/organizations/#{org.path_id}/public_keys/new">Add key</a>
<a class="usa-button margin-0" href="/organizations/#{org.path_id}/public_keys/new">Add key</a>
BUTTON
is_expected.to include(normalize_space(button))
end
it 'Should have Add IP button' do
button = <<~BUTTON
<a class="usa-button" href="/organizations/#{org.path_id}/ip_addresses/new">Add IP</a>
<a class="usa-button margin-0" href="/organizations/#{org.path_id}/ip_addresses/new">Add IP</a>
BUTTON
is_expected.to include(normalize_space(button))
end
Expand Down
Loading