Skip to content

Remove large size options from SegmentedControl #2551

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
merged 2 commits into from
Jan 31, 2024
Merged

Remove large size options from SegmentedControl #2551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d47cb4
Remove large size options from SegmentedControl
jonrohan Jan 31, 2024
16f9eaa
Create red-parrots-tap.md
jonrohan Jan 31, 2024
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
5 changes: 5 additions & 0 deletions .changeset/red-parrots-tap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/view-components": minor
---

Remove large size options from SegmentedControl
Binary file removed ...s.test.ts-snapshots/primer/alpha/segmented_control/full_width_large/default.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...s.test.ts-snapshots/primer/alpha/segmented_control/full_width_large/focused.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ts.test.ts-snapshots/primer/alpha/segmented_control/icon_only_large/default.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...ts.test.ts-snapshots/primer/alpha/segmented_control/icon_only_large/focused.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...st.ts-snapshots/primer/alpha/segmented_control/icons_and_text_large/default.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...st.ts-snapshots/primer/alpha/segmented_control/icons_and_text_large/focused.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...snapshots/primer/alpha/segmented_control/trailing_label_width_large/default.png
View file
Open in desktop
Binary file not shown.
Binary file removed ...snapshots/primer/alpha/segmented_control/trailing_label_width_large/focused.png
View file
Open in desktop
Binary file not shown.
16 changes: 0 additions & 16 deletions app/components/primer/alpha/segmented_control.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,22 +50,6 @@
}
}

.SegmentedControl--large {
& .SegmentedControl-item {
height: var(--control-large-size);

& .Button {
padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));
}
}

&.SegmentedControl--iconOnly {
& .SegmentedControl-item {
width: var(--control-large-size);
}
}
}

/* item */

.SegmentedControl-item {
Expand Down
1 change: 0 additions & 1 deletion app/components/primer/alpha/segmented_control.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ class SegmentedControl < Primer::Component
SIZE_MAPPINGS = {
:small => "SegmentedControl--small",
:medium => "SegmentedControl--medium",
:large => "SegmentedControl--large",
DEFAULT_SIZE => "SegmentedControl--medium"
}.freeze
SIZE_OPTIONS = SIZE_MAPPINGS.keys
Expand Down
53 changes: 1 addition & 52 deletions previews/primer/alpha/segmented_control_preview.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class SegmentedControlPreview < ViewComponent::Preview
# @param full_width [Boolean] toggle
# @param hide_labels [Boolean] toggle
# @param icon [Symbol] octicon
# @param size select [small, medium, large]
# @param size select [small, medium]
def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
if icon == :none
icon = hide_labels ? :zap : nil
Expand Down Expand Up @@ -55,17 +55,6 @@ def full_width_medium(hide_labels: false)
component.with_item(label: "Blame")
end
end

# @label Size large
# @param hide_labels [Boolean] toggle
# @snapshot
def full_width_large(hide_labels: false)
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
component.with_item(label: "Preview", selected: true)
component.with_item(label: "Raw")
component.with_item(label: "Blame")
end
end
# @!endgroup

# @!group Icons and text
Expand All @@ -88,16 +77,6 @@ def icons_and_text_medium
component.with_item(label: "Blame", icon: :people)
end
end

# @label Size large
# @snapshot
def icons_and_text_large
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
component.with_item(label: "Preview", icon: :eye, selected: true)
component.with_item(label: "Raw", icon: :"file-code")
component.with_item(label: "Blame", icon: :people)
end
end
# @!endgroup

# @!group Trailing Label
Expand All @@ -122,17 +101,6 @@ def trailing_label_width_medium
end
end
end

# @label Size large
# @snapshot
def trailing_label_width_large
render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
component.with_item(label: "Monthly")
component.with_item(label: "Yearly", selected: true) do |button|
button.with_trailing_visual_label(scheme: :accent) { "-8%" }
end
end
end
# @!endgroup

# @!group Icons only
Expand All @@ -156,16 +124,6 @@ def icon_only_medium
end
end

# @label Size large
# @snapshot
def icon_only_large
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
component.with_item(label: "Preview", icon: :eye, selected: true)
component.with_item(label: "Raw", icon: :"file-code")
component.with_item(label: "Blame", icon: :people)
end
end

# @label Full width, size small
def icon_only_full_width_small
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
Expand All @@ -183,15 +141,6 @@ def icon_only_full_width_medium
component.with_item(label: "Blame", icon: :people)
end
end

# @label Full width, size large
def icon_only_full_width_large
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
component.with_item(label: "Preview", icon: :eye, selected: true)
component.with_item(label: "Raw", icon: :"file-code")
component.with_item(label: "Blame", icon: :people)
end
end
# @!endgroup

# NOTE: this preview uses a group to force it's display below the other groups
Expand Down
3 changes: 0 additions & 3 deletions static/classes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,9 +468,6 @@
"SegmentedControl--iconOnly": [
"Primer::Alpha::SegmentedControl"
],
"SegmentedControl--large": [
"Primer::Alpha::SegmentedControl"
],
"SegmentedControl--medium": [
"Primer::Alpha::SegmentedControl"
],
Expand Down
3 changes: 1 addition & 2 deletions static/constants.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -565,8 +565,7 @@
"Item": "Primer::Alpha::SegmentedControl::Item",
"SIZE_MAPPINGS": {
"small": "SegmentedControl--small",
"medium": "SegmentedControl--medium",
"large": "SegmentedControl--large"
"medium": "SegmentedControl--medium"
},
"SIZE_OPTIONS": [
"small",
Expand Down