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.

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

Style presets #1277

Merged
merged 47 commits into from
Apr 30, 2020
Merged

Style presets #1277

merged 47 commits into from
Apr 30, 2020

Conversation

miina
Copy link
Contributor

@miina miina commented Apr 20, 2020

Fixes #279

Todo:

  • Use textStyles since styles for shapes will be tracked separately.
  • Tests
  • A bit of refactoring
  • Storybook
  • Pending UX questions (see Figma notes) -- New issue created, see Style Presets UX enhancements #1362

@miina miina changed the title Add/279 style presets Style presets Apr 20, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Apr 20, 2020

Size Change: +1.03 kB (0%)

Total Size: 842 kB

Filename Size Change
assets/js/edit-story.js 451 kB +862 B (0%)
assets/js/stories-dashboard.js 385 kB +164 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story.css 3.04 kB 0 B
assets/css/stories-dashboard.css 3.03 kB 0 B

compressed-size-action

@miina miina marked this pull request as ready for review April 21, 2020 17:08
@codecov
Copy link

codecov bot commented Apr 23, 2020

Codecov Report

Merging #1277 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##             master    #1277   +/-   ##
=========================================
  Coverage     56.91%   56.91%           
  Complexity      218      218           
=========================================
  Files           514      514           
  Lines          8505     8505           
=========================================
  Hits           4841     4841           
  Misses         3664     3664           
Flag Coverage Δ Complexity Δ
#javascript 57.69% <0.00%> (ø) 0.00% <0.00%> (ø%)
#php 50.33% <0.00%> (ø) 218.00% <0.00%> (ø%)

@swissspidy swissspidy added the Type: Enhancement New feature or improvement of an existing feature label Apr 23, 2020
const isStylePreset = preset.backgroundTextMode !== undefined;
updateElementsById({
elementIds: selectedElementIds,
properties: isStylePreset ? { ...preset } : { color: preset },
Copy link
Contributor

Choose a reason for hiding this comment

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

/cc @barklund

So, this will break completely with new text styling. Perhaps we should just proceed here and fix once that lands? I don't think it'd be a major update at that point. Instead of updating a color, we would be updating content field.

Copy link
Contributor Author

@miina miina Apr 28, 2020

Choose a reason for hiding this comment

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

Note that the text presets currently already are using color for text which Morten will have to re-work in the new text editing PR anyway. Probably the change coming from this PR won't be that much different to rework compared to what already exists for Color Presets currently, meaning there shouldn't be a huge difference in terms of which lands first from Morten's PR's perspective.

An alternative would be leaving the color out of the Text editing PR for now and handling it together with presets separately to reduce the size of the text editing PR. There might be some UX questions to resolve anyway, e.g.
If the user selects part of the text and clicks on a color preset, should the color be applied to the selection only (and the rest of the attributes to the full element)? If there are multiple colors in an element and the user clicks "Add preset", should a preset be added for each color? Or should a preset be added only when color is applied to the full Text?

That's probably a better discussion under #1323, however, just making a suggestion that perhaps color might be something to handle separately together with Style Presets in a separate PR. Thoughts?

cc @barklund

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd prefer this PR to be merged first and do the fixes in #1323 (with your help, @miina, if I don't get all the aspects of color presets correct)

Copy link
Contributor

Choose a reason for hiding this comment

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

IMHO, at this point it will be easier to pursue separately and fix upstream, since both are rather new features.

@miina miina requested a review from dvoytenko April 28, 2020 14:31
Copy link
Contributor

@barklund barklund left a comment

Choose a reason for hiding this comment

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

A few comments.

const isStylePreset = preset.backgroundTextMode !== undefined;
updateElementsById({
elementIds: selectedElementIds,
properties: isStylePreset ? { ...preset } : { color: preset },
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd prefer this PR to be merged first and do the fixes in #1323 (with your help, @miina, if I don't get all the aspects of color presets correct)

Copy link
Contributor

@dvoytenko dvoytenko left a comment

Choose a reason for hiding this comment

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

I'm pretty much at LGTM. Just want to confirm how we can deal with focus() calls.

Copy link
Contributor

@dvoytenko dvoytenko left a comment

Choose a reason for hiding this comment

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

LGTM on my side.

@miina miina merged commit ab66623 into master Apr 30, 2020
@miina miina deleted the add/279-style-presets branch April 30, 2020 15:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Finish implementation of color+style presets
5 participants