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

Content pattern: Determine what the default slot be used for #4627

Closed
asudoh opened this issue Dec 4, 2020 · 0 comments
Closed

Content pattern: Determine what the default slot be used for #4627

asudoh opened this issue Dec 4, 2020 · 0 comments
Assignees
@asudoh
Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high
Milestone
Sprint 21-01

Comments

@asudoh
Copy link
Contributor

asudoh commented Dec 4, 2020 •
edited
Loading

The problem

Some content patterns in Web Components use the default slot for the copy content. OTOH, some have <slot name="content"> that may be suitable for the default slot.

For example, <dds-content-block-cards> and <dds-content-block-headlines> have <slot name="content"> for the cards, that may be eligible for the default slot. Some components have <slot name="copy"> that may be another candidate.

The solution

Determine what the default slot should be used for and make all content pattern align to the strategy.
@asudoh asudoh added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Dec 4, 2020
@asudoh asudoh mentioned this issue Dec 4, 2020
Closed
29 tasks
@RobertaJHahn RobertaJHahn added this to the Sprint 21-01 milestone Dec 7, 2020
@asudoh asudoh mentioned this issue Jan 8, 2021
Closed
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Jan 12, 2021
@asudoh
chore(content-block): reorganize slots
8c81327 
Unifies the slot name strategy, using the default slot for child
contents, and `copy` slot for copy contents, for `<dds-content-block>`,
`<dds-content-group>` and their descendants.

Such unification allows us to reduce the overrides, especially for slot
names and layout, in the descendants on top of the ancestor components.

`<dds-content-block-copy>` now sets `copy` slot automatically.
`<dds-content-block-headlines-item>` no longer sets the slot.

Also:

* Ensures that `<div>`s surrounding copy, media, etc. contents won't be
  rendered unless the corresponding contents are there.
* Introduces `size="sm"` option to `<dds-content-block-copy>`, so we
  can use it instead of `<dds-content-item-copy>` in
  `<dds-content-block>`, `<dds-content-group>` and their descendants.
* Introduces `<dds-content-group-copy>` so we can apply styling
  specific to content group.

Refs carbon-design-system#4627.
Refs carbon-design-system#4851.
@asudoh asudoh mentioned this issue Jan 12, 2021
Merged
@asudoh asudoh self-assigned this Jan 13, 2021
kodiakhq bot pushed a commit that referenced this issue Jan 13, 2021
@asudoh
chore(content-block): reorganize slots (#4869)
511e478 
### Related Ticket(s)

Refs #4627.
Refs #4851.

### Description

Unifies the slot name strategy, using the default slot for child contents, and `copy` slot for copy contents, for `<dds-content-block>`, `<dds-content-group>` and their descendants.

Such unification allows us to reduce the overrides, especially for slot names and layout, in the descendants on top of the ancestor components.

`<dds-content-block-copy>` now sets `copy` slot automatically. `<dds-content-block-headlines-item>` no longer sets the slot.

Also:

* Ensures that `<div>`s surrounding copy, media, etc. contents won't be rendered unless the corresponding contents are there.
* Introduces `size="sm"` option to `<dds-content-block-copy>`, so we can use it instead of `<dds-content-item-copy>` in
  `<dds-content-block>`, `<dds-content-group>` and their descendants.
* Introduces `<dds-content-group-copy>` so we can apply styling specific to content group.

### Changelog

**New**

- `size="sm"` option to `<dds-content-block-copy>`.
- `<dds-content-group-copy>`, the copy content of content group.

**Changed**

- Changes to unify the slot name strategy, using the default slot for child contents, and `copy` slot for copy contents, for `<dds-content-block>`, `<dds-content-group>` and their descendants.
- `<dds-content-block-copy>` to set `copy` slot automatically
- `<dds-content-block-headlines-item>` to no longer set the slot.
- Changes to ensure that `<div>`s surrounding copy, media, etc. contents won't be rendered unless the corresponding contents are there.
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Jan 14, 2021
@asudoh
refactor(cta-section): reorganize slots
0ebc520 
Repurposes the default `<slot>` in `<dds-cta-section>` from the copy
content to the child content items. Also makes `<dds-cta-section>`
inherit `<dds-content-block>` instead of `<dds-content-item>` in its
TypeScript code (not style code). These are because `<dds-cta-section>`
doesn't work as a (child) content item; Instead, it _contains_ child
items.

Refs carbon-design-system#4627.
@asudoh asudoh mentioned this issue Jan 14, 2021
Merged
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Jan 14, 2021
@asudoh
refactor(leadspace): reorganize slots
35a7b41 
Changes `<slot name="buttons">` to `<slot name="action">` to align the
naming strategy to `<dds-cta-section>`.

Refs carbon-design-system#4627.
@asudoh asudoh mentioned this issue Jan 14, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Jan 14, 2021
@asudoh
refactor(leadspace): reorganize slots (#4898)
f82efba 
### Related Ticket(s)

Refs #4627.

### Description

Changes `<slot name="buttons">` to `<slot name="action">` to align the naming strategy to `<dds-cta-section>`.

### Changelog

**Changed**

- Changes `<slot name="buttons">` to `<slot name="action">`.
kodiakhq bot pushed a commit that referenced this issue Jan 15, 2021
@asudoh
refactor(cta-section): reorganize slots (#4897)
4406030 
### Related Ticket(s)

Refs #4627.

### Description

Repurposes the default `<slot>` in `<dds-cta-section>` from the copy content to the child content items. Also makes `<dds-cta-section>` inherit `<dds-content-block>` instead of `<dds-content-item>` in its TypeScript code (not style code). These are because `<dds-cta-section>` doesn't work as a (child) content item; Instead, it _contains_ child items.

### Changelog

**Changed**

- Repurposes the default `<slot>` in `<dds-cta-section>` from the copy content to the child content items.
- Makes `<dds-cta-section>` inherit `<dds-content-block>` instead of `<dds-content-item>` in its TypeScript code (not style code).
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@asudoh @IgnacioBecerra
chore(content-block): reorganize slots (carbon-design-system#4869)
a2c0027 
### Related Ticket(s)

Refs carbon-design-system#4627.
Refs carbon-design-system#4851.

### Description

Unifies the slot name strategy, using the default slot for child contents, and `copy` slot for copy contents, for `<dds-content-block>`, `<dds-content-group>` and their descendants.

Such unification allows us to reduce the overrides, especially for slot names and layout, in the descendants on top of the ancestor components.

`<dds-content-block-copy>` now sets `copy` slot automatically. `<dds-content-block-headlines-item>` no longer sets the slot.

Also:

* Ensures that `<div>`s surrounding copy, media, etc. contents won't be rendered unless the corresponding contents are there.
* Introduces `size="sm"` option to `<dds-content-block-copy>`, so we can use it instead of `<dds-content-item-copy>` in
  `<dds-content-block>`, `<dds-content-group>` and their descendants.
* Introduces `<dds-content-group-copy>` so we can apply styling specific to content group.

### Changelog

**New**

- `size="sm"` option to `<dds-content-block-copy>`.
- `<dds-content-group-copy>`, the copy content of content group.

**Changed**

- Changes to unify the slot name strategy, using the default slot for child contents, and `copy` slot for copy contents, for `<dds-content-block>`, `<dds-content-group>` and their descendants.
- `<dds-content-block-copy>` to set `copy` slot automatically
- `<dds-content-block-headlines-item>` to no longer set the slot.
- Changes to ensure that `<div>`s surrounding copy, media, etc. contents won't be rendered unless the corresponding contents are there.
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@asudoh @IgnacioBecerra
refactor(leadspace): reorganize slots (carbon-design-system#4898)
94c7628 
### Related Ticket(s)

Refs carbon-design-system#4627.

### Description

Changes `<slot name="buttons">` to `<slot name="action">` to align the naming strategy to `<dds-cta-section>`.

### Changelog

**Changed**

- Changes `<slot name="buttons">` to `<slot name="action">`.
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@asudoh @IgnacioBecerra
refactor(cta-section): reorganize slots (carbon-design-system#4897)
4ea2bf3 
### Related Ticket(s)

Refs carbon-design-system#4627.

### Description

Repurposes the default `<slot>` in `<dds-cta-section>` from the copy content to the child content items. Also makes `<dds-cta-section>` inherit `<dds-content-block>` instead of `<dds-content-item>` in its TypeScript code (not style code). These are because `<dds-cta-section>` doesn't work as a (child) content item; Instead, it _contains_ child items.

### Changelog

**Changed**

- Repurposes the default `<slot>` in `<dds-cta-section>` from the copy content to the child content items.
- Makes `<dds-cta-section>` inherit `<dds-content-block>` instead of `<dds-content-item>` in its TypeScript code (not style code).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asudoh asudoh

Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high
Projects
None yet
Milestone
Sprint 21-01
Development

No branches or pull requests
2 participants
@asudoh @RobertaJHahn