Skip to content

♻️ Refactor small numeric inputs#8660

Open
EvaMarco wants to merge 3 commits intodevelopfrom
eva-refactor-small-numeric-inputs
Open

♻️ Refactor small numeric inputs#8660
EvaMarco wants to merge 3 commits intodevelopfrom
eva-refactor-small-numeric-inputs

Conversation

@EvaMarco
Copy link
Contributor

Related Ticket

This PR closes this task https://tree.taiga.io/project/penpot/task/13108

Summary

The small input fields have been updated.

  • In the Layers menu, the opacity input field has been enlarged.
  • In the border Radius section, the "individual" inputs are now displayed alongside "all the radius" input fields.
  • The stroke width input field has been enlarged, and the stroke style and position selectors have been updated to display only icons.

Steps to reproduce

To test this PR you need to have this flag activated.

enable-feature-token-input

The design is here -> https://hourly.penpot.dev/#/workspace?team-id=07b53c5e-b83c-8160-8007-94e9670cec80&file-id=07b53c5e-b83c-8160-8007-94e983058831&page-id=07b53c5e-b83c-8160-8007-94e983058832&layout=tokens&wasm=true&board-id=808fcf3d-bd30-8078-8007-99f97e53e7c6
Each commit is one input type.

This PR is under feature flag, no changes for QA are shown now.

Checklist

  • Choose the correct target branch; use develop by default.
  • Provide a brief summary of the changes introduced.
  • Add a detailed explanation of how to reproduce the issue and/or verify the fix, if applicable.
  • Include screenshots or videos, if applicable.
  • Add or modify existing integration tests in case of bugs or new features, if applicable.
  • Refactor any modified SCSS files following the refactor guide.
  • Check CI passes successfully.
  • Update the CHANGES.md file, referencing the related GitHub issue, if applicable.

@EvaMarco EvaMarco added the tokens design-tokens IOP label Mar 17, 2026
@EvaMarco EvaMarco changed the title Eva refactor small numeric inputs ♻️ Refactor small numeric inputs Mar 17, 2026
@EvaMarco EvaMarco marked this pull request as ready for review March 17, 2026 13:29
@Xaviju Xaviju self-assigned this Mar 20, 2026
// - + 2 inter-column gaps
// - − half a gap (because it’s visually shared with the next block)

$grid-exception-input-width-small: calc(#{$sz-32} * 2.5 + 2 * var(--sp-xs) - (var(--sp-xs) / 2));
Copy link
Contributor

Choose a reason for hiding this comment

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

While the var is named $grid-exception-input-width-small in the docs is referred as grid-exception-input-small. Not sure if I am missing some context

;; https://tree.taiga.io/project/penpot/task/13704

(if token-numeric-inputs
;; TODO: Rename this section when duplicated code is deleted
Copy link
Contributor

Choose a reason for hiding this comment

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

Rename or remove?
In the previous comment you say it should be removed.

;; Once the feature is released, the duplicated ClojureScript and SCSS code should be removed.

And, by section you mean the contents of the <section> element? (or this includes the conditional

:tooltip-placement "top-left"
:icon i/lock}])]

[:section {:class (stl/css-case :element-set-content true
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure if this is a nested section. Is fine to nest sections, just to ensure that it makes sense.
The aria label is not translated but should be a tr label so the user gets the information right

(if token-numeric-inputs
;; TODO: Rename this section when duplicated code is deleted
[:section {:class (stl/css :element-set-content-token)
:aria-label "layer-menu-section"}
Copy link
Contributor

Choose a reason for hiding this comment

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

The aria label is not translated but should be a tr label so the user gets the information right

@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;

// This code should be remove when numeric-input-tokens are activated
Copy link
Contributor

Choose a reason for hiding this comment

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

All this file must be removed?

nil)}]
(if token-numeric-inputs
[:section {:class (dm/str class " " (stl/css :radius-token))
:aria-label "border-radius-section"}
Copy link
Contributor

Choose a reason for hiding this comment

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

This aria-label must be translated to display the right information


:value (:r3 values)}]])]
[:section {:class (dm/str class " " (stl/css :radius))
:aria-label "border-radius-section"}
Copy link
Contributor

Choose a reason for hiding this comment

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

This aria-label must be translated to display the right information

[:on-change {:optional true} fn?]
[:variant {:optional true} [:maybe [:enum "default" "ghost"]]]])
[:dropdown-alignment {:optional true} [:maybe [:enum :left :right]]]
[:variant {:optional true} [:maybe [:enum "default" "ghost" "icon-only"]]]])
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this new variant in the design file?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Guillermo was working on adding it to the DS file yes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

tokens design-tokens IOP

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants