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

[footer]: Adjunct links do not appear automatically when set in Javascript via property setter after initial update #12037

Closed
2 tasks done
m4olivei opened this issue Sep 18, 2024 · 0 comments · Fixed by #12064
Closed
2 tasks done

[footer]: Adjunct links do not appear automatically when set in Javascript via property setter after initial update #12037

m4olivei opened this issue Sep 18, 2024 · 0 comments · Fixed by #12064
Labels
adopter: AEM used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants severity 2 Affects major functionality, has a workaround

Comments

@m4olivei
Copy link
Contributor

m4olivei commented Sep 18, 2024 •
edited by andy-blum
Loading

https://jsw.ibm.com/browse/ADCMS-6324

Description

The <c4d-footer-container> component defines an adjunctLinks property which allows users the ability to add adjunctLinks to the footer in Javascript, eg.

const adjunctLinks = [
    { "title": "link 1", "url": "abc" }, 
    { "title": "link 2", "url": "abc" }, 
    { "title": "link 3", "url": "abc" },
];
document.querySelector('c4d-footer-container').adjunctLinks = adjunctLinks;

However, when done in this way, the adjunct links, although added to the DOM and slotted into the correct place, remain hidden.

The only workaround is to write custom Javascript to reach into the shadow DOM of the <c4d-legal-nav> component and remove the cds--adjunct-links__container--hidden class.

Component(s) impacted

<c4d-footer-container>
<c4d-legal-nav>

Browser

Chrome

Carbon for IBM.com version

v2.13.0

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

ibm.com

Package

@carbon/web-components

CodeSandbox example

https://stackblitz.com/github/m4olivei/carbon-demo/tree/test/footer-adjunct-links?file=main.js

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct
@m4olivei m4olivei added bug Something isn't working dev Needs some dev work labels Sep 18, 2024
@m4olivei m4olivei added severity 2 Affects major functionality, has a workaround adopter: AEM used when component or pattern will be used by this adopter owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Sep 18, 2024
@m4olivei m4olivei mentioned this issue Oct 1, 2024
Merged
@kodiakhq kodiakhq bot closed this as completed in #12064 Oct 14, 2024
kodiakhq bot pushed a commit that referenced this issue Oct 14, 2024
@marcelojcs
fix(legal-nav): fix adjunct links not showing (#12064)
f017f01 
### Related Ticket(s)
Closes #12037
[Jira](https://jsw.ibm.com/browse/ADCMS-6324)

### Description

PR to solve the following: 

The <c4d-footer-container> component defines an adjunctLinks property which allows users the ability to add adjunctLinks to the footer in Javascript, eg.

```javascript
const adjunctLinks = [
  { "title": "link 1", "url": "abc" },
  { "title": "link 2", "url": "abc" },
  { "title": "link 3", "url": "abc" },
];

document.querySelector('c4d-footer-container').adjunctLinks = adjunctLinks;
```
 
However, when done in this way, the adjunct links, although added to the DOM and slotted into the correct place, remain hidden.
 
### Changelog


**Changed**

- Foced the method that determines if the links should be hidden or not to run when the adjunct links are updated.


### Testing instructions 

To test the changes open the default footer `<storybook URL>?path=/story/components-footer--default` and run the snippet from the example above in the devtools console
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
adopter: AEM used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants severity 2 Affects major functionality, has a workaround
Projects
Carbon for IBM.com
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(legal-nav): fix adjunct links not showing marcelojcs/carbon-for-ibm-dotcom
1 participant
@m4olivei