Skip to content

Quickfix for action button and material design icon - #1614

Merged
PVince81 merged 2 commits into
masterfrom
bugfix/noid/actionbutton-align-materialdesignicon
Dec 1, 2020
Merged

Quickfix for action button and material design icon#1614
PVince81 merged 2 commits into
masterfrom
bugfix/noid/actionbutton-align-materialdesignicon

Conversation

@PVince81

@PVince81 PVince81 commented Nov 27, 2020

Copy link
Copy Markdown
Contributor

When using a material design icon in the icon slot, this fix will
properly align it vertically.

We need it because the ActionButton consumer cannot override the styles with ::v-deep since the popover itself might be in the document body

When testing the docs you might need to scroll up or down to see the dropdown because of nextcloud/server#23872 which also occurs in the docs...

@PVince81 PVince81 added bug Something isn't working 2. developing Work in progress labels Nov 27, 2020
@PVince81 PVince81 self-assigned this Nov 27, 2020
@PVince81
PVince81 force-pushed the bugfix/noid/actionbutton-align-materialdesignicon branch from 07896a5 to 0ddf83c Compare November 27, 2020 17:25
@PVince81 PVince81 added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Nov 27, 2020
@PVince81
PVince81 marked this pull request as ready for review November 27, 2020 17:27
@PVince81

Copy link
Copy Markdown
Contributor Author

Without the CSS fix:
image

With the CSS fix:
image

@marcoambrosini marcoambrosini left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

See comments

Comment thread src/components/ActionButton/ActionButton.vue Outdated
Comment thread src/components/ActionButton/ActionButton.vue Outdated
Comment thread src/components/ActionButton/ActionButton.vue Outdated
Comment thread src/components/ActionButton/ActionButton.vue Outdated
@PVince81

Copy link
Copy Markdown
Contributor Author

@ma12-co seems 16 is too small

here I used 16 for the material design icons:
image

hmmm, but 24 is maybe too big indeed:
image

here's 20:
image

let's go with 20 then ?

this is anyway just a code example... ideally in the future we should have a way to only provide the icon name...

@marcoambrosini

Copy link
Copy Markdown
Contributor

@PVince81 I agree that 18 or 20 would look better, but for now 16px is our default in Nextcloud. We can talk about bumping that up a bit but I wouldn't do it here.

@PVince81

PVince81 commented Dec 1, 2020

Copy link
Copy Markdown
Contributor Author

@PVince81 I agree that 18 or 20 would look better, but for now 16px is our default in Nextcloud. We can talk about bumping that up a bit but I wouldn't do it here.

ok, fine. adjusted. please review

When using a material design icon in the icon slot, this fix will
properly align it vertically.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Since 16px is an existing default, let's use that in the recommendation
for when using material design icons in the ActionButton.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
@PVince81
PVince81 force-pushed the bugfix/noid/actionbutton-align-materialdesignicon branch from 2178912 to 3446414 Compare December 1, 2020 10:38
@PVince81

PVince81 commented Dec 1, 2020

Copy link
Copy Markdown
Contributor Author

rebased for cypress fix

@PVince81
PVince81 merged commit 392a1db into master Dec 1, 2020
@PVince81
PVince81 deleted the bugfix/noid/actionbutton-align-materialdesignicon branch December 1, 2020 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants