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.

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

Jump to bottom

Improve scale of internally rendered icons across relevant components #5698

Closed
16 tasks done
Elijbet opened this issue Nov 7, 2022 · 5 comments
Closed
16 tasks done

Improve scale of internally rendered icons across relevant components #5698

Elijbet opened this issue Nov 7, 2022 · 5 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. refactor Issues tied to code that needs to be significantly reworked.
Milestone
2023 January Prio...

Comments

@Elijbet
Copy link
Contributor

Elijbet commented Nov 7, 2022 •
edited
Loading

Description

Follow-up to #5245

This issue will be rounding up all the components that need an icon scale upgrade, where the large-scale component gets a medium-scale icon (24px) instead of a small one, this includes chevron icons. Needs to maintain the height with or without an icon, accounting for all the prop variations that can affect height, eg. the default solid appearance with a border and transparent without.

🏗 ⚠️
WIP: Design in Figma is in progress for most of the listed components. Will update by linking Figma for each component as they become available. Please contact @SkyeSeitz if you need permission to access the provided link.

Proposed Advantages

This will provide a better visual distinction between scales.

Which Component

Relevant Info

Follow-up issues:

  • List, List-group, and List-item currently do not have any scale at any level and will be considered separately at a later time.
  • Tree-item icon satisfies the requirements but action-end needs to be reworked to not have an impact on height.

No response
@Elijbet Elijbet added refactor Issues tied to code that needs to be significantly reworked. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Nov 7, 2022
@Elijbet Elijbet changed the title Improve scale of internally rendered icons across relevant components. Improve scale of internally rendered icons across relevant components Nov 7, 2022
@SkyeSeitz SkyeSeitz assigned SkyeSeitz and unassigned SkyeSeitz Nov 7, 2022
@SkyeSeitz
Copy link

Accordion Item design updates are completed and available at this Figma link. I will continue to add completed designs that same enhancements file for the list above as they are ready. cc @brittneyzwolfer for visibility

image

image

@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Dec 14, 2022
@Elijbet Elijbet mentioned this issue Dec 15, 2022
Closed
@macandcheese macandcheese mentioned this issue Dec 15, 2022
Merged
This was referenced Jan 8, 2023
Merged
Merged
Merged
Merged
Elijbet added a commit that referenced this issue Jan 11, 2023
@Elijbet
fix(combobox-item): bumping the scale of icon to M when parent combob…
051cb3f 
…ox is scale L (#6253)

**Related Issue:** #5698

Bumping the scale of the icon to M when the parent `combobox-item` is
scale="l" for a visual distinction between larger and smaller components
without affecting the height of the `combobox-item` when icon(s) are
added or removed. Added a _testOnly snapshot.
Elijbet added a commit that referenced this issue Jan 12, 2023
@Elijbet
fix(accordion-item): bumping the scale of icon to M when parent accor…
a6bb7da 
…dion is scale L (#6252)

**Related Issue:** #5698

## Summary

Bumping the scale of the icon to M when the parent `accordion-item` is
`scale="l"` for a visual distinction between larger and smaller
components without affecting the height of the `accordion-item` when
icon(s) are added or removed. Added a _testOnly snapshot.
Elijbet added a commit that referenced this issue Jan 14, 2023
@Elijbet
fix(tab, tabs, tab-title, input, input-number, input-text, input-date…
e8edf6b 
…-picker, input-time-picker): bumping the scale of icon to M when parent is scale L (#6267)

**Related Issue:** #5698

## Summary

Bumping the scales of `iconStart` and `iconEnd` to M when the parent
`tab-title`,`input`, `input-number`, `input-text`, `input-date-picker`,
`input-time-picker` components are `scale="l"` for a visual distinction
between larger and smaller components without affecting the height of
the components when icon(s) are added or removed. Added `_testOnly`
snapshots.
Elijbet added a commit that referenced this issue Jan 15, 2023
@Elijbet
fix(dropdown-item): bumping the scale of icon to M when parent dropdo…
8957e8d 
…wn is scale L (#6254)

**Related Issue:** #5698

## Summary

Bumping the scale of the icon to M when the parent `dropdown-item` is
`scale="l"` for a visual distinction between larger and smaller
components without affecting the height of the `dropdown-item` when
icon(s) are added or removed. Added a `_testOnly` snapshot.
@Elijbet Elijbet self-assigned this Jan 23, 2023
@jcfranco jcfranco removed the needs triage Planning workflow - pending design/dev review. label Jan 23, 2023
@jcfranco jcfranco added this to the 2023 January Priorities milestone Jan 23, 2023
This was referenced Jan 25, 2023
Merged
Merged
Elijbet added a commit that referenced this issue Jan 25, 2023
@Elijbet
fix(select): bumping scale of chevron icon to M when host is scale l (#…
fa91ec1 
…6335)

**Related Issue:** #5698

## Summary
Bumping the scale of the chevron to M when host is scale="l" for a
visual distinction between larger and smaller components without
affecting the height of the component when icon(s) are added or removed.
Added a _testOnly snapshot.
@geospatialem
Copy link
Member

Reference the follow-up items for inclusion in the January patch milestone.

benelan added a commit that referenced this issue Jan 25, 2023
@Elijbet @benelan
fix(pagination): bumping scale of chevron icon to M when host is scal…
433e8d4 
…e L (#6338)

**Related Issue:** #5698

## Summary
Bumping the `scale` of the `chevron` to M when host is `scale="l"` for a
visual distinction between larger and smaller components without
affecting the height of the component when icon(s) are added or removed.
Added a _testOnly snapshot.

Co-authored-by: Ben Elan <belan@esri.com>
@Elijbet Elijbet removed the 2 - in development Issues that are actively being worked on. label Jan 25, 2023
@Elijbet Elijbet added the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Jan 25, 2023
@github-actions github-actions bot assigned geospatialem and unassigned Elijbet Jan 25, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Jan 25, 2023
@geospatialem
Copy link
Member

Verified on 1.0.3 for the following components where scale="l".

  • Accordion-Item
  • Action (icon is contained in a button)
  • Button
  • FAB
  • Combobox-item
  • Dropdown-item
  • Input
  • Input-number
  • Input-text
  • Input-date-picker
  • Input-time-picker
  • Inline Editable (icon is contained in a button)
  • Tab-title
  • Chip
  • Select (icon contained in component)
  • Pagination (icons contained in component)

@geospatialem
Copy link
Member

Follow-up items have been created via #6353 and #6361

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

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. refactor Issues tied to code that needs to be significantly reworked.
Projects
None yet
Milestone
2023 January Priorities
Development

No branches or pull requests
4 participants
@jcfranco @geospatialem @Elijbet @SkyeSeitz