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

Fix: Component background image support (fixes #511) #512

Merged
merged 2 commits into from
May 8, 2024
Merged

Fix: Component background image support (fixes #511) #512

merged 2 commits into from
May 8, 2024

Conversation

swashbuck
Copy link
Contributor

@swashbuck swashbuck commented Apr 26, 2024 •
edited
Loading

Fixes #511

Fix

  • Add missing .background styles to components.less. This will allow you to use backgrounds in components.json

Notes

I did not update the schemas at this time. We can revisit it later if it is really needed. For now, I believe the preference is to exclude this feature from AAT to avoid introducing any rarely used settings.

Testing

Add a background to a component just like you would to a block.

@swashbuck swashbuck self-assigned this Apr 26, 2024
@swashbuck swashbuck changed the title Fix: Add missing .background styles Fix: Component background image support Apr 26, 2024
@swashbuck swashbuck changed the title Fix: Component background image support Fix: Component background image support (fixes #511) Apr 26, 2024
@swashbuck swashbuck mentioned this pull request May 2, 2024
Open
@swashbuck swashbuck marked this pull request as ready for review May 2, 2024 19:02
cahirodoherty-learningpool
cahirodoherty-learningpool approved these changes May 3, 2024
View reviewed changes
Copy link
Contributor

Choose a reason for hiding this comment

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

👀

@guywillis
Copy link
Contributor

I think there is a little bug in here at the mo.

If I were to add a background image to a text component the content of the text component is obscured by the background image.

Bug:
Screenshot 2024-05-03 at 13 46 02

The same component with no background image applied:
Screenshot 2024-05-03 at 13 59 00

@swashbuck
Copy link
Contributor Author

If I were to add a background image to a text component the content of the text component is obscured by the background image.

@guywillis Good catch. I added position: relative to .component__inner, and that seemed to fix the stacking context.

kirsty-hames
kirsty-hames approved these changes May 8, 2024
View reviewed changes
Copy link
Contributor

@kirsty-hames kirsty-hames left a comment

Choose a reason for hiding this comment

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

Works as expected thanks - testing on Mac Chrome, FF and iPhone.

@kirsty-hames kirsty-hames merged commit 1ca97b5 into master May 8, 2024
@kirsty-hames kirsty-hames deleted the issue/511 branch May 8, 2024 14:24
github-actions bot pushed a commit that referenced this pull request May 8, 2024
@semantic-release-bot
Chore(release): 9.17.1 [skip ci]
4d89179 
## [9.17.1](v9.17.0...v9.17.1) (2024-05-08)

### Fix

* Component background image support (fixes #511) (#512) ([1ca97b5](1ca97b5)), closes [#511](#511) [#512](#512)
@github-actions GitHub Actions
Copy link

github-actions bot commented May 8, 2024

🎉 This PR is included in version 9.17.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

github-actions bot pushed a commit to redwoodperforms/adapt-contrib-vanilla that referenced this pull request Aug 19, 2024
@semantic-release-bot
Chore(release): 7.1.0 [skip ci]
eb96321 
# [7.1.0](v7.0.1...v7.1.0) (2024-08-19)

### Fix

* Add 'bg-color white' mixin (adaptlearning#461) ([79f9011](79f9011)), closes [adaptlearning#461](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/461)
* Add hover effect to GMCQ items to match MCQ items (fixes adaptlearning#513) ([030c251](030c251)), closes [adaptlearning#513](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/513)
* Add margins for mobile stacked layout (fixes adaptlearning#450) ([988d68f](988d68f)), closes [adaptlearning#450](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/450)
* Add menu subtitle color variable (fixes adaptlearning#515) (adaptlearning#516) ([a1b8aba](a1b8aba)), closes [adaptlearning#515](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/515) [adaptlearning#516](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/516)
* Add schema default values for background image styles (fixes adaptlearning#456) ([17134df](17134df)), closes [adaptlearning#456](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/456)
* Add variables to control box menu item padding (fixes adaptlearning#506) adaptlearning#517 ([92ccf46](92ccf46)), closes [adaptlearning#506](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/506) [adaptlearning#517](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/517)
* background and headerBackground undefined variable errors (fixes adaptlearning#462) (adaptlearning#463) ([ad4d5ba](ad4d5ba)), closes [adaptlearning#462](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/462) [adaptlearning#463](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/463)
* Bump braces from 3.0.2 to 3.0.3 (adaptlearning#519) ([1b8a0c2](1b8a0c2)), closes [adaptlearning#519](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/519)
* Change @max-width to 100%, remove max-width: inherit from .page (adaptlearning#494) ([0a204a3](0a204a3)), closes [adaptlearning#494](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/494)
* Component background image support (fixes adaptlearning#511) (adaptlearning#512) ([1ca97b5](1ca97b5)), closes [adaptlearning#511](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/511) [adaptlearning#512](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/512)
* Increase container horizontal padding (gutters & margins) (adaptlearning#435) ([3ab5675](3ab5675)), closes [adaptlearning#435](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/435)
* Loading animation updated (fixes adaptlearning#500) (adaptlearning#501) ([2c24965](2c24965)), closes [adaptlearning#500](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/500) [adaptlearning#501](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/501)
* Matching dropdown list style improvements (fixes adaptlearning#478) (adaptlearning#507) ([c77980a](c77980a)), closes [adaptlearning#478](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/478) [adaptlearning#507](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/507)
* Neutralised `nav-btn-*` variables (adaptlearning#477) ([4120884](4120884)), closes [adaptlearning#477](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/477)
* Optimise `blend.less` (adaptlearning#503) ([bc7a7f8](bc7a7f8)), closes [adaptlearning#503](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/503)
* prevent notify btn hover style override (adaptlearning#483) ([7c88e60](7c88e60)), closes [adaptlearning#483](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/483)
* Remove background color when using pin images (adaptlearning#454) ([6aaa5e7](6aaa5e7)), closes [adaptlearning#454](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/454)
* remove legacy z-index from slider number selection / model answer (adaptlearning#489) ([932d416](932d416)), closes [adaptlearning#489](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/489)
* Utilize .size-small class for .hide-on-mobile class (adaptlearning#495) ([fbb693d](fbb693d)), closes [adaptlearning#495](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/495)

### New

* Add drawer item locked state  (adaptlearning#488) ([79aad47](79aad47)), closes [adaptlearning#488](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/488)
* Add margin start and margin end column classes (fixes adaptlearning#504) ([5ee17b7](5ee17b7)), closes [adaptlearning#504](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/504)
* Add text-transform variables (fixes adaptlearning#479) ([1d963a6](1d963a6)), closes [adaptlearning#479](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/479)
* expand on Narrative progress indicator state styles (fixes adaptlearning#509) (adaptlearning#510) ([5010471](5010471)), closes [adaptlearning#509](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/509) [adaptlearning#510](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/510)

### Update

* Hotgraphic pin number inherits from the icon styles (fixes adaptlearning#282) ([6abf34f](6abf34f)), closes [adaptlearning#282](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/282)
* Media transcript completion styling (adaptlearning#475) ([7d4d5f7](7d4d5f7)), closes [adaptlearning#475](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/475)
* menu item image margin updated (fixes adaptlearning#520) ([25dd6b7](25dd6b7)), closes [adaptlearning#520](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/520)
* Nav styling amends (adaptlearning#474) ([bf02388](bf02388)), closes [adaptlearning#474](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/474)
* remove default color hex codes from schemas (fixes adaptlearning#464) (adaptlearning#468) ([4f4acbf](4f4acbf)), closes [adaptlearning#464](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/464) [adaptlearning#468](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/468)
* Replace PLP hard coded border-radius with variable (fixes adaptlearning#498) (adaptlearning#499) ([666b472](666b472)), closes [adaptlearning#498](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/498) [adaptlearning#499](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/499)
* RTL styling (adaptlearning#481) ([14b2bf9](14b2bf9)), closes [adaptlearning#481](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/481)
* Update visited color variables (fixes adaptlearning#470) ([c0bebdd](c0bebdd)), closes [adaptlearning#470](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/470)
* use display flex to set equal menu item heights (fixes adaptlearning#466) (adaptlearning#467) ([84e9379](84e9379)), closes [adaptlearning#466](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/466) [adaptlearning#467](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/467)

### Upgrade

* Bump ip from 1.1.8 to 1.1.9 (adaptlearning#497) ([e40efcf](e40efcf)), closes [adaptlearning#497](https://github.com/redwoodperforms/adapt-contrib-vanilla/issues/497)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cahirodoherty-learningpool cahirodoherty-learningpool cahirodoherty-learningpool approved these changes

@oliverfoster oliverfoster oliverfoster approved these changes

@kirsty-hames kirsty-hames kirsty-hames approved these changes

Assignees

@swashbuck swashbuck

Labels
bug enhancement released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add background image settings to components
5 participants
@swashbuck @guywillis @kirsty-hames @oliverfoster @cahirodoherty-learningpool