Skip to content

style: Fix styling of EditIcon and streamline MiniMenu size #5576

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 7 commits into from
Nov 24, 2025
Merged

style: Fix styling of EditIcon and streamline MiniMenu size #5576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1222d98
style: Increase edit icon size to 32x32px; Add correct color states
BingeCode Nov 10, 2025
9444a70
style: Streamline Mini menu size across all occurrences
BingeCode Nov 10, 2025
cf43caf
style: Set min height to accomodate MiniMenu
BingeCode Nov 10, 2025
d155431
fix: Snapshot tests
BingeCode Nov 10, 2025
5733dfb
Merge branch 'main' into bs/edit-icon
BingeCode Nov 10, 2025
daad868
fix: sizing of color picker
BingeCode Nov 20, 2025
e78bfbe
Merge branch 'main' into bs/edit-icon
BingeCode Nov 20, 2025
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
13 changes: 11 additions & 2 deletions src/components/Column/ColumnDetails/ColumnDetails.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ $icon-size: $icon--large;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 48px; // to accommodate MiniMenu in opened state
}

.column-details__name-wrapper {
Expand Down Expand Up @@ -68,14 +69,18 @@ $icon-size: $icon--large;
}

.column-details__edit-icon {
width: 18px;
height: 18px;
width: 32px;
height: 32px;
opacity: 0;
transition: opacity 0.2s ease;
cursor: pointer;
align-self: center;
margin-left: 8px;
margin-right: 8px;

&:hover {
color: $gray--800;
}
}

.column-details__settings-icon-container {
Expand Down Expand Up @@ -211,6 +216,10 @@ $icon-size: $icon--large;

.column-details__edit-icon {
color: $gray--000;

&:hover {
color: $gray--800;
}
}

.column-details__settings-icon-container {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Column/ColumnDetails/ColumnDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ export const ColumnDetails = (props: ColumnDetailsProps) => {
}}
onSubmit={updateColumnDetails}
/>
<MiniMenu className="column-details__description-mini-menu" items={saveColumnDetailsMiniMenu} small transparent />
<MiniMenu className="column-details__description-mini-menu" items={saveColumnDetailsMiniMenu} transparent />
</>
);

Expand Down
6 changes: 3 additions & 3 deletions src/components/Column/ColumnDetails/__tests__/__snapshots__/ColumnDetails.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ exports[`ColumnDetails should render correctly (edit) 1`] = `
/>
</div>
<div
class="column-details__description-mini-menu mini-menu mini-menu--small mini-menu--transparent"
class="column-details__description-mini-menu mini-menu mini-menu--transparent"
>
<button
aria-label="Cancel"
class="mini-menu-item--cancel mini-menu__item mini-menu__item--small"
class="mini-menu-item--cancel mini-menu__item"
data-cy="undefined-item-Cancel"
data-tooltip-content="Cancel"
data-tooltip-id="scrumlr-tooltip"
Expand All @@ -63,7 +63,7 @@ exports[`ColumnDetails should render correctly (edit) 1`] = `
</button>
<button
aria-label="Save"
class="mini-menu-item--save mini-menu__item mini-menu__item--small"
class="mini-menu-item--save mini-menu__item"
data-cy="undefined-item-Save"
data-tooltip-content="Save"
data-tooltip-id="scrumlr-tooltip"
Expand Down
3 changes: 1 addition & 2 deletions src/components/Column/ColumnSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ export const ColumnSettings = (props: ColumnSettingsProps) => {
selectColor={onSelectColor}
closeColorPicker={() => setOpenedColorPicker(false)}
allowVertical={ENABLE_VERTICAL}
small
/>
),
onClick: () => setOpenedColorPicker((o) => !o),
Expand Down Expand Up @@ -135,7 +134,7 @@ export const ColumnSettings = (props: ColumnSettingsProps) => {

return (
<div ref={columnSettingsRef} className={classNames(props.className, "column-settings")}>
<MiniMenu items={menuItems} focusBehaviour="trap" wrapToColumn={ENABLE_VERTICAL} small />
<MiniMenu items={menuItems} focusBehaviour="trap" wrapToColumn={ENABLE_VERTICAL} />
</div>
);
};
2 changes: 1 addition & 1 deletion ...guratorColumn/ColumnConfiguratorColumnNameDetails/ColumnConfiguratorColumnNameDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const ColumnConfiguratorColumnNameDetails = (props: ColumnConfiguratorCol
onSubmit={saveChanges}
onCancel={cancelChanges}
/>
<MiniMenu className="column-configurator-column-name-details__description-mini-menu" items={descriptionConfirmMiniMenu} small transparent />
<MiniMenu className="column-configurator-column-name-details__description-mini-menu" items={descriptionConfirmMiniMenu} transparent />
</div>
) : (
<div
Expand Down
12 changes: 6 additions & 6 deletions ...lumnNameDetails/__tests__/__snapshots__/ColumnConfiguratorColumnNameDetails.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ exports[`ColumnConfiguratorColumnNameDetails render should render correctly (des
Default Description
</textarea>
<div
class="column-configurator-column-name-details__description-mini-menu mini-menu mini-menu--small mini-menu--transparent"
class="column-configurator-column-name-details__description-mini-menu mini-menu mini-menu--transparent"
>
<button
aria-label="Cancel"
class="mini-menu-item--cancel mini-menu__item mini-menu__item--small"
class="mini-menu-item--cancel mini-menu__item"
data-cy="undefined-item-Cancel"
data-tooltip-content="Cancel"
data-tooltip-id="scrumlr-tooltip"
Expand All @@ -63,7 +63,7 @@ exports[`ColumnConfiguratorColumnNameDetails render should render correctly (des
</button>
<button
aria-label="Save"
class="mini-menu-item--save mini-menu__item mini-menu__item--small"
class="mini-menu-item--save mini-menu__item"
data-cy="undefined-item-Save"
data-tooltip-content="Save"
data-tooltip-id="scrumlr-tooltip"
Expand Down Expand Up @@ -104,11 +104,11 @@ exports[`ColumnConfiguratorColumnNameDetails render should render correctly (nam
Default Description
</textarea>
<div
class="column-configurator-column-name-details__description-mini-menu mini-menu mini-menu--small mini-menu--transparent"
class="column-configurator-column-name-details__description-mini-menu mini-menu mini-menu--transparent"
>
<button
aria-label="Cancel"
class="mini-menu-item--cancel mini-menu__item mini-menu__item--small"
class="mini-menu-item--cancel mini-menu__item"
data-cy="undefined-item-Cancel"
data-tooltip-content="Cancel"
data-tooltip-id="scrumlr-tooltip"
Expand All @@ -120,7 +120,7 @@ exports[`ColumnConfiguratorColumnNameDetails render should render correctly (nam
</button>
<button
aria-label="Save"
class="mini-menu-item--save mini-menu__item mini-menu__item--small"
class="mini-menu-item--save mini-menu__item"
data-cy="undefined-item-Save"
data-tooltip-content="Save"
data-tooltip-id="scrumlr-tooltip"
Expand Down
Loading