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

ActionPopover items are not aligned if some items have icons while others don't #5801

Closed
1 task done
blaky opened this issue Feb 2, 2023 · 7 comments · Fixed by #5996
Closed
1 task done

ActionPopover items are not aligned if some items have icons while others don't #5801

blaky opened this issue Feb 2, 2023 · 7 comments · Fixed by #5996
Labels
Bug On Backlog released

Comments

@blaky
Copy link
Contributor

blaky commented Feb 2, 2023

Current behaviour

When an ActionPopover menu renders with a mix of items with and without icons then the labels are not aligned.

image

Expected behaviour

When an ActionPopover menu renders with a mix of items with and without icons then the labels should be aligned and the icon's space should be preserved on the items without icons.

CodeSandbox or Storybook URL

https://codesandbox.io/s/affectionate-sound-cqi2fv?file=/src/App.js

JIRA Ticket (Sage Only)

No response

Suggested Solution

No response

Carbon Version

114.7.1

Design Tokens Version

No response

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.
@blaky blaky added Bug triage Triage Required labels Feb 2, 2023
@Parsium Parsium added the Design System Review Required DS team to review changes label Feb 7, 2023
@Parsium
Copy link
Contributor

Parsium commented Feb 7, 2023 •
edited
Loading

Hi @harpalsingh, we discussed there are two alignment approaches for the item text which we aren't sure which one to go with.

Do we either:

  1. Align the text of all items (regardless of icon presence) - in orange in image below
  2. Align item text with the other icons - in purple in image below

action-popover-bug

What do you think?

@Parsium
Copy link
Contributor

Parsium commented Feb 21, 2023

@clairedenning @ljemmo would you be able to look at this for us please?

@nineteen88
Copy link
Contributor

@ljemmo @clairedenning Could you update on this one please?

@ljemmo
Copy link
Contributor

ljemmo commented Mar 15, 2023

@Parsium and @nineteen88 It looks like we're supporting approach 2 in the DS today. Here's a screenshot of the menu in figma. usually we would advise that if using icons, you should use them on all menu items. Or alternatively you should use no icons on all items. However in the edge case that you have a mix, i'd suggest we go for approach 2 for MVP and iterate further if we get feedback to do so. Sound like a plan? Then at least carbon will have parity with the DS.
Screenshot 2023-03-15 at 10 58 59

@Parsium
Copy link
Contributor

Parsium commented Mar 15, 2023

Awesome thanks for this @ljemmo 👍🏼 In that case we'll raise a ticket to support that second approach

@Parsium Parsium added On Backlog and removed Design System Review Required DS team to review changes triage Triage Required labels Mar 15, 2023
@Parsium
Copy link
Contributor

Parsium commented Mar 15, 2023

FE-5722

tomdavies73 added a commit that referenced this issue Apr 27, 2023
@tomdavies73
feat(action-popover): remove padding to ensure text aligns with other…
bdd0b78 
… item's icons

removes left or right padding based on the `horizontalAlignment` prop, this ensures
the correct padding is added/removed based on the current alignment. This guarantees icon
alignment is correct when some menu items are text-only and some contain icons

fix #5801
@tomdavies73 tomdavies73 mentioned this issue Apr 27, 2023
Merged
14 tasks
tomdavies73 added a commit that referenced this issue Apr 27, 2023
@tomdavies73
feat(action-popover): remove padding on icon to ensure text aligns wi…
c584607 
…th other item's icons

removes left or right padding on menu item icon based on the `horizontalAlignment` prop,
this ensures the correct padding is added/removed based on the current alignment.
This guarantees icon alignment is correct when some menu items are text-only
and some contain icons

fix #5801
tomdavies73 added a commit that referenced this issue May 16, 2023
@tomdavies73
feat(action-popover): align component with Design System
14cc084 
ensure component aligns with Design System specification

fix #5801
tomdavies73 added a commit that referenced this issue May 16, 2023
@tomdavies73
feat(action-popover): align component with Design System
63ad64c 
ensure component aligns with Design System specification

fix #5801
tomdavies73 added a commit that referenced this issue Jun 21, 2023
@tomdavies73
feat(action-popover): align component with design system
e9acae8 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left", either by default, or set by the consumer and
a content is re-sized the `submenuPosition` will be temporarily set to "right" if the
window is deemed to be too small. Finally, icon's are now supported in submenu's and can
be included by passing the `icon` prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jun 22, 2023
@tomdavies73
feat(action-popover): align component with design system
8b3e67b 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left", either by default, or set by the consumer and
a content is re-sized the `submenuPosition` will be temporarily set to "right" if the
window is deemed to be too small. Finally, icon's are now supported in submenu's and can
be included by passing the `icon` prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jun 22, 2023
@tomdavies73
feat(action-popover): align component with design system
780a390 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left", either by default, or set by the consumer and
a content is re-sized the `submenuPosition` will be temporarily set to "right" if the
window is deemed to be too small. Finally, icon's are now supported in submenu's and can
be included by passing the `icon` prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jul 12, 2023
@tomdavies73
feat(action-popover): align component with design system
ea9e867 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left", either by default, or set by the consumer and
a content is re-sized the `submenuPosition` will be temporarily set to "right" if the
window is deemed to be too small. Finally, icon's are now supported in submenu's and can
be included by passing the `icon` prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jul 12, 2023
@tomdavies73
feat(action-popover): align component with design system
881bdb2 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left", either by default, or set by the consumer and
a content is re-sized the `submenuPosition` will be temporarily set to "right" if the
window is deemed to be too small. Finally, icon's are now supported in submenu's and can
be included by passing the `icon` prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jul 18, 2023
@tomdavies73
feat(action-popover): align component with design system
f2ea2ba 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left" or "right", the `submenuPosition` will be temporarily
set to the opposite value if the window on the left or right is deemed to be too small.
Finally, icon's are now supported in submenu's and can be included by passing the `icon`
prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jul 20, 2023
@tomdavies73
feat(action-popover): align component with design system
483babb 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left" or "right", the `submenuPosition` will be temporarily
set to the opposite value if the window on the left or right is deemed to be too small.
Finally, icon's are now supported in submenu's and can be included by passing the `icon`
prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jul 27, 2023
@tomdavies73
feat(action-popover): align component with design system
309656e 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left" or "right", the `submenuPosition` will be temporarily
set to the opposite value if the window on the left or right is deemed to be too small.
Finally, icon's are now supported in submenu's and can be included by passing the `icon`
prop to the submenu's menu item.

fix #5801
tomdavies73 added a commit that referenced this issue Jul 27, 2023
@tomdavies73
feat(action-popover): align component with design system
d411789 
aligns component with the sage design system, to ensure consumers can use the component with
expected styling and functionality. Nine different styling variations have been added
which change the alignment and padding of each child to ensure designs are correct. Also,
support for submenu's opening on the right has been included with the addition of the
`submenuPosition` prop. When set to "right" the menu-item chevron will appear on the right
of the action popover menu, and any submenu's will open from the right-hand side. Also,
when the `submenuPosition` prop is "left" or "right", the `submenuPosition` will be temporarily
set to the opposite value if the window on the left or right is deemed to be too small.
Finally, icon's are now supported in submenu's and can be included by passing the `icon`
prop to the submenu's menu item.

fix #5801
carbonci pushed a commit that referenced this issue Aug 2, 2023
@semantic-release-bot @carbonci
chore(release): 119.9.0
5391423 
## [119.9.0](v119.8.0...v119.9.0) (2023-08-02)

### Features

* **action-popover:** align component with design system ([d411789](d411789)), closes [#5801](#5801)
@carbonci
Copy link
Collaborator

carbonci commented Aug 2, 2023

🎉 This issue has been resolved in version 119.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug On Backlog released
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(action-popover): align component with design system Sage/carbon
5 participants
@blaky @Parsium @carbonci @ljemmo @nineteen88