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

Refactor(web, web-twig, web-react): FileUploader imageObjectFit from data-attr to CSS #1132

Merged
merged 7 commits into from
Nov 8, 2023
Merged

Refactor(web, web-twig, web-react): FileUploader imageObjectFit from data-attr to CSS #1132

merged 7 commits into from
Nov 8, 2023

Conversation

pavelklibani
Copy link
Contributor

Description

  • Update the implementation to set image object fit directly using CSS properties, eliminating the need for the data attribute
  • Added demo for FileUploaderAttachment with image-object-fit: contain in all packages

Additional context

It is now working without the need for a JS plugin

Demo

image

Issue reference

Object fit nefunguje ve Twigu

@pavelklibani pavelklibani self-assigned this Nov 7, 2023
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Nov 7, 2023 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 87c5a5d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 3 targets

Sent with 💌 from NxCloud.

@netlify Netlify
Copy link

netlify bot commented Nov 7, 2023 •
edited
Loading

✅ Deploy Preview for spirit-design-system-demo ready!

Name Link
🔨 Latest commit 87c5a5d
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-demo/deploys/654b7f154d8f6d00088a69f1
😎 Deploy Preview https://deploy-preview-1132--spirit-design-system-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Nov 7, 2023 •
edited
Loading

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name Link
🔨 Latest commit 87c5a5d
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-storybook/deploys/654b7f1598d1f900083738bb

@github-actions github-actions bot added the refactoring A code change that neither fixes a bug nor adds a feature label Nov 7, 2023
@netlify Netlify
Copy link

netlify bot commented Nov 7, 2023 •
edited
Loading

✅ Deploy Preview for spirit-design-system-validations canceled.

Name Link
🔨 Latest commit 87c5a5d
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-validations/deploys/654b7f15d7224c0008691322

@netlify Netlify
Copy link

netlify bot commented Nov 7, 2023 •
edited
Loading

✅ Deploy Preview for spirit-design-system-react canceled.

Name Link
🔨 Latest commit 87c5a5d
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-react/deploys/654b7f15c863080008ba263d

@pavelklibani pavelklibani marked this pull request as ready for review November 7, 2023 10:48
@literat
Copy link
Collaborator

literat commented Nov 7, 2023

First of all, the information I see in a commit message is insufficient. Remove data attribute -> Oh, crap, what and where they are removing?

Secondly, this data attribute is a part of the previous version, so removing it will break someone's code if used -> BREAKING CHANGE.

So I would like to ask why we are removing this data attribute in favor of usage style with CSS variable. I think the usage via data attribute is a simpler way. 🤔

@pavelklibani
Refactor(web): FileUploader imageObjectFit data attr changed to style
94d7899 
- Update the implementation to set image object fit directly using
CSS properties, eliminating the need for the data attribute and
js plugin
@pavelklibani
Docs(web): FileUploaderAttachment documentation update
56baca1 
- Added demo for FileUploaderAttachment with CSS image-object-fit: contain
in web package
adamkudrna
adamkudrna approved these changes Nov 7, 2023
View reviewed changes
Copy link
Contributor

@adamkudrna adamkudrna left a comment

Choose a reason for hiding this comment

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

Please consider updating the commit message so it's clear it's all about FileUploader 🙂. If length limit is the problem, you can commit each package separately.

Also, the change is rather about using something else instead of data attributes, not just about removing them 🙂.

packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig Show resolved Hide resolved
packages/web-react/src/components/FileUploader/demo/FileUploaderAttachment.tsx Show resolved Hide resolved
packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig Outdated Show resolved Hide resolved
packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig Outdated Show resolved Hide resolved
@pavelklibani
Refactor(web-twig): FileUploader imageObjectFit data attr changed to …
542e4ee 
…style

- Update the implementation to set image object fit directly using
CSS properties, eliminating the need for the data attribute and
js plugin
@pavelklibani
Docs(web-twig): FileUploaderAttachment documentation update
3c56e06 
- Added demo for FileUploaderAttachment with image-object-fit: contain
in web-twig package #DS-1036
@pavelklibani
Docs(web-react): FileUploaderAttachment documentation FileUploaderAtt…
a7175d8 
…achment

- Added demo for FileUploaderAttachment with image-object-fit: contain
in web-react package
@pavelklibani pavelklibani force-pushed the refactor/DS-1036-FU-object-fit branch 2 times, most recently from cdc8e7c to 7ff223e Compare November 7, 2023 19:31
@coveralls
Copy link

coveralls commented Nov 7, 2023 •
edited
Loading

Coverage Status

coverage: 96.46%. remained the same
when pulling 5e457ba on refactor/DS-1036-FU-object-fit
into 8e8ea36 on main.

@pavelklibani pavelklibani changed the title Refactor(web, web-twig, web-react): Remove data attribute #DS-1036 Refactor(web, web-twig, web-react): FileUploader imageObjectFit from data-attr to CSS Nov 8, 2023
literat
literat approved these changes Nov 8, 2023
View reviewed changes
Copy link
Collaborator

@literat literat left a comment

Choose a reason for hiding this comment

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

Nice work 👍

packages/web/src/js/FileUploader.ts Outdated Show resolved Hide resolved
@pavelklibani pavelklibani force-pushed the refactor/DS-1036-FU-object-fit branch from 5e457ba to 87c5a5d Compare November 8, 2023 12:29
@pavelklibani pavelklibani merged commit 495c4d5 into main Nov 8, 2023
36 checks passed
@pavelklibani pavelklibani deleted the refactor/DS-1036-FU-object-fit branch November 8, 2023 12:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamkudrna adamkudrna adamkudrna approved these changes

@literat literat literat approved these changes

@crishpeen crishpeen Awaiting requested review from crishpeen crishpeen is a code owner

Assignees

@pavelklibani pavelklibani

Labels
refactoring A code change that neither fixes a bug nor adds a feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@pavelklibani @literat @coveralls @adamkudrna