fix(footer): adjustments to style for color and positioning #12135
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
m4olivei
requested review from
bruno-amorim,
marcelojcs,
andy-blum and
Valentin-Sorin-Nicolae
and removed request for
a team
✅ Deploy Preview for ibm-dotcom-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for ibm-dotcom-web-components-react-wrap ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
marcelojcs
approved these changes
Nov 29, 2024
bruno-amorim
approved these changes
Nov 29, 2024
There was a problem hiding this comment.
Nice work @m4olivei!! It's working as expected and I can see the correct cursor on hover. Thank you!
m4olivei
added
the
Ready to merge
m4olivei
added a commit
that referenced
this pull request
Nov 29, 2024
### Related Ticket(s) [ADCMS-7082](https://jsw.ibm.com/browse/ADCMS-7082) ### Description Fixes the color and padding of the "Cookie Preferences" component in the footer links. Note that the Cookie Preferences link is added by an external vendor script (https://tags.tiqcdn.com/utag/ibm/web/prod/utag.js). To test it in Storybook, see below testing instructions. ### Testing Instructions * Open the Footer > Default story * Open dev tools and look for the `<c4d-legal-nav-cookie-preferences-placeholder>` component. * Edit as HTML and add the following markup as a child element: ``` <a role="link" id="icon-id007001372122542948" tabindex="0" lang="en" aria-haspopup="dialog" aria-label="Cookie Preferences, opens a dedicated popup modal window" class="truste_cursor_pointer cds--link cds--footer__link">Cookie Preferences</a> ``` **Expected results** * The link should visually resemble the other links in the legal nav. Check hover and focus as well. ### Changelog **Changed** - Add correct styling to expected link in the `<c4d-legal-nav-cookie-preferences-placeholder>` component. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
m4olivei
added a commit
that referenced
this pull request
Nov 29, 2024
* fix(card): remove onclick handler for pictogram (#12123) ### Related Ticket(s) [ADCMS-6850](https://jsw.ibm.com/browse/ADCMS-6850) ### Description Removes an `onclick` handler on cards which is redundant and hinders customization by adopters. The `onlick` handler here is already covered by the `<a>` that has an `::after` pseudo element covering the card and capturing the click event for sighted and non-sighted users. The `onclick` handler was added back in #6642. ### Changelog **Changed** - Removed `onclick` handler from pictogram cards <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(feature-section): stretch image if needed (#12126) * fix(feature-card): stretch image to fill if needed * fix(feature-section): stretch image to fill if needed * fix(feature-card): use css logical properties --------- Co-authored-by: Matthew Oliveira <m4olivei@gmail.com> * fix(callout-with-media): spacing adjustments (#12124) ### Related Ticket(s) [ADCMS-6942](https://jsw.ibm.com/browse/ADCMS-6942) ### Description Adjust spacing on the `<c4d-callout-with-media>` component per the [Figma specs](https://www.figma.com/design/ADYTE8HS12nn63RJLZOk87/Layout-component--callout-with-media--visual-specs--2.1?node-id=0-1&node-type=canvas&t=QNmoJfFTr6bA75Ak-0). Note that there are no v2 specs for this component. ### Changelog **Changed** - Adjust spacing for slotted elements to the `<c4d-callout-with-media>` component. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(content-block-segmented): spacing adjustments (#12129) ### Related Ticket(s) [ADCMS-6929](https://jsw.ibm.com/browse/ADCMS-6929) ### Description Fixes spacing for the `<c4d-content-block-segmented-item>` component. [Figma specs](https://www.figma.com/design/9mRDDnXj2FWnP1SBy88EYh/Content-block-v2?node-id=1-3099&node-type=canvas&t=jd4KO55hcGcO1hW9-0) ### Changelog **Changed** - Adjust spacing for slotted footer content to the `<c4d-content-block-segmented-item>` component <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(toc): tweak media query for sidebar at lg (#12133) ### Related Ticket(s) [ADCMS-6990](https://jsw.ibm.com/browse/ADCMS-6990) ### Description Adjusts the media query logic in the TOC component to line up with the Sass for the same. This fixes an issue where before, right on the lg breakpoint, the TOC was broken and stuck showing mostly mobile styles instead of desktop ones. ### Changelog **Changed** - TOC wlll now maintain the desktop layout for the lg breakpoint and above. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(footer): pass along the placeholder text to combo-box (#12134) ### Related Ticket(s) [ADCMS-7082](https://jsw.ibm.com/browse/ADCMS-7082) ### Description Fixes an issue where the `placeholder` text in the `<input>` within the `<c4d-language-selector-desktop>` component was not being correctly passed along from the `<c4d-footer-container>` attributes. ### Testing instructions * Go to the Footer > Default language only story. We're focused here on the `<c4d-language-selector-desktop>` component:  * Click the "x" to clear the language selection **Expected result** You should see the placeholder text "Choose a language" ### Changelog **Changed** - `<c4d-language-selector-desktop>` component will show placeholder text for empty value <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(footer): adjustments to style for color and positioning (#12135) ### Related Ticket(s) [ADCMS-7082](https://jsw.ibm.com/browse/ADCMS-7082) ### Description Fixes the color and padding of the "Cookie Preferences" component in the footer links. Note that the Cookie Preferences link is added by an external vendor script (https://tags.tiqcdn.com/utag/ibm/web/prod/utag.js). To test it in Storybook, see below testing instructions. ### Testing Instructions * Open the Footer > Default story * Open dev tools and look for the `<c4d-legal-nav-cookie-preferences-placeholder>` component. * Edit as HTML and add the following markup as a child element: ``` <a role="link" id="icon-id007001372122542948" tabindex="0" lang="en" aria-haspopup="dialog" aria-label="Cookie Preferences, opens a dedicated popup modal window" class="truste_cursor_pointer cds--link cds--footer__link">Cookie Preferences</a> ``` **Expected results** * The link should visually resemble the other links in the legal nav. Check hover and focus as well. ### Changelog **Changed** - Add correct styling to expected link in the `<c4d-legal-nav-cookie-preferences-placeholder>` component. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> * fix(footer): adjustments to adjunct links visibility (#12136) ### Related Ticket(s) [ADCMS-7082](https://jsw.ibm.com/browse/ADCMS-7082) ### Description Make some adjustments to the logic inside the legal-nav component for adjunct-links visibility. Before the fix here, the `@slotchange` event was not firing as expected when there were no adjunct links to hide them. Further, once the `hidden` class got correctly set on the `adjunct-links` wrapper, needed to fix some Sass to actually hide it. ### Changelog **Changed** - Hide adjunct-links container when there are no adjunct links. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) --> --------- Co-authored-by: Andy Blum <andy.blum.01@gmail.com>
deathcave
pushed a commit
to deathcave/carbon-for-ibm-dotcom
that referenced
this pull request
Dec 4, 2024
…esign-system#12135) ### Related Ticket(s) [ADCMS-7082](https://jsw.ibm.com/browse/ADCMS-7082) ### Description Fixes the color and padding of the "Cookie Preferences" component in the footer links. Note that the Cookie Preferences link is added by an external vendor script (https://tags.tiqcdn.com/utag/ibm/web/prod/utag.js). To test it in Storybook, see below testing instructions. ### Testing Instructions * Open the Footer > Default story * Open dev tools and look for the `<c4d-legal-nav-cookie-preferences-placeholder>` component. * Edit as HTML and add the following markup as a child element: ``` <a role="link" id="icon-id007001372122542948" tabindex="0" lang="en" aria-haspopup="dialog" aria-label="Cookie Preferences, opens a dedicated popup modal window" class="truste_cursor_pointer cds--link cds--footer__link">Cookie Preferences</a> ``` **Expected results** * The link should visually resemble the other links in the legal nav. Check hover and focus as well. ### Changelog **Changed** - Add correct styling to expected link in the `<c4d-legal-nav-cookie-preferences-placeholder>` component. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
|
Hey there! This issue/pull request was referenced in recently released v2.16.1. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Ticket(s)
ADCMS-7082
Description
Fixes the color and padding of the "Cookie Preferences" component in the footer links. Note that the Cookie Preferences link is added by an external vendor script (https://tags.tiqcdn.com/utag/ibm/web/prod/utag.js). To test it in Storybook, see below testing instructions.
Testing Instructions
<c4d-legal-nav-cookie-preferences-placeholder>component.Expected results
Changelog
Changed
<c4d-legal-nav-cookie-preferences-placeholder>component.