From 1065fc64267d650c5912fad24761ace857dff00b Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 24 Jan 2024 19:43:56 +0000 Subject: [PATCH 1/2] Revert "Break up button text when it is too long" (#2537) --- .changeset/quick-bulldogs-hammer.md | 5 ---- .../primer/alpha/segmented_control.pcss | 11 ++----- app/components/primer/beta/button.pcss | 30 ++++++------------- .../alpha/dialog_preview/with_form.html.erb | 10 ++----- .../input_group_leading_action_menu.html.erb | 4 +-- 5 files changed, 15 insertions(+), 45 deletions(-) delete mode 100644 .changeset/quick-bulldogs-hammer.md diff --git a/.changeset/quick-bulldogs-hammer.md b/.changeset/quick-bulldogs-hammer.md deleted file mode 100644 index f60dbc5f85..0000000000 --- a/.changeset/quick-bulldogs-hammer.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Button component: update overflow strategy to allow for line wrap if button label text is too long diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss index dd9b82e6d1..34ec573292 100644 --- a/app/components/primer/alpha/segmented_control.pcss +++ b/app/components/primer/alpha/segmented_control.pcss @@ -133,8 +133,8 @@ /* Button ----------------------------------------- */ & .Button { - min-height: 100%; - min-width: 100%; + height: 100%; + width: 100%; border: 0; font-weight: var(--base-text-weight-normal); border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2); @@ -149,13 +149,6 @@ & .Button--invisible.Button--invisible-noVisuals .Button-label { color: var(--button-default-fgColor-rest); } - - /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */ - & .Button-label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } } /* fullWidth */ diff --git a/app/components/primer/beta/button.pcss b/app/components/primer/beta/button.pcss index 2e585e9466..ced834c45d 100644 --- a/app/components/primer/beta/button.pcss +++ b/app/components/primer/beta/button.pcss @@ -21,13 +21,14 @@ transition: var(--duration-fast) var(--easing-easeInOut); transition-property: color, fill, background-color, border-color; text-align: center; - min-height: var(--control-medium-size); + height: var(--control-medium-size); padding: 0 var(--control-medium-paddingInline-normal); display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center; gap: var(--base-size-4); + min-width: max-content; /* mobile friendly sizing */ @media (pointer: coarse) { @@ -62,16 +63,12 @@ summary.Button { /* wrap grid content to allow trailingAction to lock-right */ .Button-content { - flex: 1 1 auto; + flex: 1 0 auto; display: grid; grid-template-areas: 'leadingVisual text trailingVisual'; grid-template-columns: min-content minmax(0, auto) min-content; align-items: center; place-content: center; - align-self: stretch; - - /* calc explained: sets block padding to the correct size, minus 2px for border */ - padding-block: calc(var(--control-medium-paddingBlock) - 2px); /* padding-bottom: 1px; optical alignment for firefox */ @@ -100,6 +97,7 @@ summary.Button { .Button-label { grid-area: text; + white-space: nowrap; line-height: var(--text-body-lineHeight-medium); } @@ -123,8 +121,8 @@ summary.Button { .Button--small { font-size: var(--text-body-size-small); - min-height: var(--control-small-size); - padding-inline: var(--control-small-paddingInline-condensed); + height: var(--control-small-size); + padding: 0 var(--control-small-paddingInline-condensed); gap: var(--control-small-gap); & .Button-label { @@ -132,9 +130,6 @@ summary.Button { } & .Button-content { - /* calc explained: sets block padding to the correct size, minus 2px for border */ - padding-block: calc(var(--control-small-paddingBlock) - 2px); - & > :not(:last-child) { margin-right: var(--control-small-gap); } @@ -142,8 +137,8 @@ summary.Button { } .Button--large { - min-height: var(--control-large-size); - padding-inline: var(--control-large-paddingInline-spacious); + height: var(--control-large-size); + padding: 0 var(--control-large-paddingInline-spacious); gap: var(--control-large-gap); & .Button-label { @@ -151,9 +146,6 @@ summary.Button { } & .Button-content { - /* calc explained: sets block padding to the correct size, minus 2px for border */ - padding-block: calc(var(--control-large-paddingBlock) - 2px); - & > :not(:last-child) { margin-right: var(--control-large-gap); } @@ -295,7 +287,7 @@ summary.Button { display: inline-block; font-size: inherit; border: none; - min-height: unset; + height: unset; padding: 0; &:hover:not(:disabled, .Button--inactive) { @@ -314,10 +306,6 @@ summary.Button { border-color: transparent; fill: var(--control-fgColor-disabled); } - - & .Button-content { - padding: 0; - } } /* danger */ diff --git a/previews/primer/alpha/dialog_preview/with_form.html.erb b/previews/primer/alpha/dialog_preview/with_form.html.erb index cf94a5faef..67e5c025a0 100644 --- a/previews/primer/alpha/dialog_preview/with_form.html.erb +++ b/previews/primer/alpha/dialog_preview/with_form.html.erb @@ -5,14 +5,8 @@ This is a custom dialog with the body and footer wrapped in a form tag. <% end %> <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: show_divider)) do %> - <%= render(Primer::Beta::Button.new( - scheme: :invisible, - size: :medium, - id: "my-dialog" - )) do %> - A longer cancel button - <% end %> - <%= render(Primer::Beta::Button.new(scheme: :primary)) do %>A longer submit button<% end %> + <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %> + <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %> <% end %> <% end %> diff --git a/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb b/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb index 238fff76e4..f0ef6aad34 100644 --- a/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb +++ b/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb @@ -1,6 +1,6 @@ - + <%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %> - <%= form_with(url: action_menu_form_action_path(format: route_format), class: "flex-shrink-0") do |f| %> + <%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %> <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, form_arguments: { builder: f, name: "foo" })) do |menu| %> <% menu.with_show_button(classes: "rounded-right-0 border-right-0") { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Filter" } %> <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %> From a7f1bfa00e6e1fda24dbba5ed04004c0aa91438d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 24 Jan 2024 19:45:38 +0000 Subject: [PATCH 2/2] Version Packages --- .changeset/healthy-needles-tease.md | 5 ----- .changeset/rotten-shirts-march.md | 5 ----- .changeset/tall-bugs-laugh.md | 5 ----- .changeset/wet-fishes-fold.md | 5 ----- .changeset/wise-coats-buy.md | 5 ----- CHANGELOG.md | 16 ++++++++++++++++ Gemfile.lock | 2 +- demo/Gemfile.lock | 2 +- lib/primer/view_components/version.rb | 4 ++-- package-lock.json | 4 ++-- package.json | 2 +- 11 files changed, 23 insertions(+), 32 deletions(-) delete mode 100644 .changeset/healthy-needles-tease.md delete mode 100644 .changeset/rotten-shirts-march.md delete mode 100644 .changeset/tall-bugs-laugh.md delete mode 100644 .changeset/wet-fishes-fold.md delete mode 100644 .changeset/wise-coats-buy.md diff --git a/.changeset/healthy-needles-tease.md b/.changeset/healthy-needles-tease.md deleted file mode 100644 index 774c2a2721..0000000000 --- a/.changeset/healthy-needles-tease.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Allow setting `test_selector` on select list options diff --git a/.changeset/rotten-shirts-march.md b/.changeset/rotten-shirts-march.md deleted file mode 100644 index fc58208851..0000000000 --- a/.changeset/rotten-shirts-march.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Update @oddbird/popover-polyfill to v0.3.8 diff --git a/.changeset/tall-bugs-laugh.md b/.changeset/tall-bugs-laugh.md deleted file mode 100644 index 6ac2833f5b..0000000000 --- a/.changeset/tall-bugs-laugh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Fixing the utilities build not matching properly for `font_size` diff --git a/.changeset/wet-fishes-fold.md b/.changeset/wet-fishes-fold.md deleted file mode 100644 index db77564e54..0000000000 --- a/.changeset/wet-fishes-fold.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -Only attach validation IDs to form elements that support validation diff --git a/.changeset/wise-coats-buy.md b/.changeset/wise-coats-buy.md deleted file mode 100644 index d82c9d0b22..0000000000 --- a/.changeset/wise-coats-buy.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/view-components': minor ---- - -Primer::Alpha::Dialog uses internally diff --git a/CHANGELOG.md b/CHANGELOG.md index f15a57c18a..51c8a47cce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ # CHANGELOG +## 0.17.0 + +### Minor Changes + +- [#2496](https://github.com/primer/view_components/pull/2496) [`983e3a5`](https://github.com/primer/view_components/commit/983e3a5fbf885c46d5bde0c749b0f9298ab2b53f) Thanks [@keithamus](https://github.com/keithamus)! - Primer::Alpha::Dialog uses internally + +### Patch Changes + +- [#2495](https://github.com/primer/view_components/pull/2495) [`fbaea76`](https://github.com/primer/view_components/commit/fbaea76c3209a7c4e92d18b3b80bb347f971c448) Thanks [@antn](https://github.com/antn)! - Allow setting `test_selector` on select list options + +- [#2530](https://github.com/primer/view_components/pull/2530) [`1d14d5c`](https://github.com/primer/view_components/commit/1d14d5c03a528930ac59bb8ec30fbec2ea92883e) Thanks [@camertron](https://github.com/camertron)! - Update @oddbird/popover-polyfill to v0.3.8 + +- [#2491](https://github.com/primer/view_components/pull/2491) [`11b1eec`](https://github.com/primer/view_components/commit/11b1eecc817c7013ed56c84f7050e642b098db41) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixing the utilities build not matching properly for `font_size` + +- [#2511](https://github.com/primer/view_components/pull/2511) [`15a090a`](https://github.com/primer/view_components/commit/15a090a999e69056d78ba099671ff1f68d61c610) Thanks [@camertron](https://github.com/camertron)! - Only attach validation IDs to form elements that support validation + ## 0.16.1 ### Patch Changes diff --git a/Gemfile.lock b/Gemfile.lock index 5400625e73..3def0619ca 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - primer_view_components (0.16.1) + primer_view_components (0.17.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (>= 18.0.0) diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 79d619e07e..316e790261 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: .. specs: - primer_view_components (0.16.1) + primer_view_components (0.17.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (>= 18.0.0) diff --git a/lib/primer/view_components/version.rb b/lib/primer/view_components/version.rb index 0b8b55910b..2fbca0e149 100644 --- a/lib/primer/view_components/version.rb +++ b/lib/primer/view_components/version.rb @@ -5,8 +5,8 @@ module Primer module ViewComponents module VERSION MAJOR = 0 - MINOR = 16 - PATCH = 1 + MINOR = 17 + PATCH = 0 STRING = [MAJOR, MINOR, PATCH].join(".") end diff --git a/package-lock.json b/package-lock.json index b377d8b658..c84218f260 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/view-components", - "version": "0.16.1", + "version": "0.17.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@primer/view-components", - "version": "0.16.1", + "version": "0.17.0", "license": "MIT", "dependencies": { "@github/auto-check-element": "^5.2.0", diff --git a/package.json b/package.json index 42b294d414..c235432c1b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/view-components", - "version": "0.16.1", + "version": "0.17.0", "description": "ViewComponents for the Primer Design System", "main": "app/assets/javascripts/primer_view_components.js", "module": "app/components/primer/primer.js",