Skip to content

Commit 3fdfa27

Browse files
devadula-nandandevadula-nandan
authored
fix(ordered list): position issue of li in non native ol (#18296)
* fix(ordered list): position issue of li in non native ol * feat: add a css variable for counter-reset * refactor: divide docs and added attributes * chore: remove playground, and add controls for all
1 parent ea4f782 commit 3fdfa27

File tree

7 files changed

+116
-80
lines changed

7 files changed

+116
-80
lines changed

‎packages/web-components/src/components/list/list.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
//
2-
// Copyright IBM Corp. 2019, 2024
2+
// Copyright IBM Corp. 2019, 2025
33
//
44
// This source code is licensed under the Apache-2.0 license found in the
55
// LICENSE file in the root directory of this source tree.
@@ -34,16 +34,16 @@ $css--plex: true !default;
3434
counter-reset: item;
3535
}
3636

37-
&:not(.#{$prefix}--list--nested) ::slotted(#{$prefix}-list-item) {
37+
.#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
38+
::slotted(#{$prefix}-list-item) {
3839
position: relative;
39-
}
4040

41-
.#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
42-
::slotted(#{$prefix}-list-item)::before {
43-
position: absolute;
44-
content: counter(item) '.';
45-
counter-increment: item;
46-
inset-inline-start: rem(-24px);
41+
&::before {
42+
position: absolute;
43+
content: counter(item) '.';
44+
counter-increment: item;
45+
inset-inline-start: rem(-24px);
46+
}
4747
}
4848
}
4949

‎packages/web-components/src/components/list/ordered-list.mdx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
2+
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
3+
import * as OrderedListStories from './ordered-list.stories';
4+
5+
<Meta of={OrderedListStories} />
6+
7+
# List
8+
9+
Represents a list.
10+
11+
> 💡 Check our
12+
> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/list)
13+
> example implementation.
14+
15+
[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/list)
16+
17+
## Getting started
18+
19+
Here's a quick example to get you started.
20+
21+
### JS (via import)
22+
23+
```javascript
24+
import '@carbon/web-components/es/components/list/index.js';
25+
```
26+
27+
<Markdown>{`${cdnJs({ components: ['list'] })}`}</Markdown>
28+
<Markdown>{`${cdnCss()}`}</Markdown>
29+
30+
### HTML
31+
32+
```html
33+
<h3>cds-ordered-list</h3>
34+
35+
<cds-ordered-list>
36+
<cds-list-item>
37+
Ordered List level 1
38+
<cds-ordered-list>
39+
<cds-list-item>Ordered List level 2</cds-list-item>
40+
<cds-list-item>
41+
Ordered List level 2
42+
<cds-ordered-list>
43+
<cds-list-item>Ordered List level 2</cds-list-item>
44+
<cds-list-item>Ordered List level 2</cds-list-item>
45+
</cds-ordered-list>
46+
</cds-list-item>
47+
</cds-ordered-list>
48+
</cds-list-item>
49+
<cds-list-item>Ordered List level 1</cds-list-item>
50+
<cds-list-item>Ordered List level 1</cds-list-item>
51+
</cds-ordered-list>
52+
```
53+
54+
## `<cds-ordered-list>` attributes and properties
55+
56+
Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
57+
`<cds-ordered-list native>`) and `false` means not setting the attribute (e.g.
58+
`<cds-ordered-list>` without `native` attribute).
59+
60+
<ArgTypes of="cds-ordered-list" />
61+
62+
## `<cds-list-item>` attributes and properties
63+
64+
Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
65+
`<cds-list nested>`) and `false` means not setting the attribute (e.g.
66+
`<cds-list>` without `nested` attribute).
67+
68+
<ArgTypes of="cds-list-item" />

‎packages/web-components/src/components/list/ordered-list.stories.ts

Lines changed: 20 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
/**
22
* @license
33
*
4-
* Copyright IBM Corp. 2019, 2023
4+
* Copyright IBM Corp. 2019, 2025
55
*
66
* This source code is licensed under the Apache-2.0 license found in the
77
* LICENSE file in the root directory of this source tree.
88
*/
99

1010
import { html } from 'lit';
11-
import storyDocs from './list.mdx';
11+
import storyDocs from './ordered-list.mdx';
1212
import './index';
1313

1414
const defaultArgs = {
1515
isExpressive: false,
16-
native: true,
16+
native: false,
1717
};
1818

1919
const controls = {
@@ -29,8 +29,10 @@ const controls = {
2929
};
3030

3131
export const Default = {
32-
render: () =>
33-
html`<cds-ordered-list native>
32+
args: defaultArgs,
33+
argTypes: controls,
34+
render: ({ isExpressive, native }) =>
35+
html`<cds-ordered-list ?is-expressive="${isExpressive}" ?native="${native}">
3436
<cds-list-item>Ordered List level 1</cds-list-item>
3537
<cds-list-item>Ordered List level 1</cds-list-item>
3638
<cds-list-item>Ordered List level 1</cds-list-item>
@@ -48,14 +50,16 @@ export const Default = {
4850
};
4951

5052
export const NativeListStyles = {
51-
render: () =>
52-
html`<cds-ordered-list native>
53+
args: { ...defaultArgs, native: true },
54+
argTypes: controls,
55+
render: ({ isExpressive, native }) =>
56+
html`<cds-ordered-list ?is-expressive="${isExpressive}" ?native="${native}">
5357
<cds-list-item>Ordered List level 1</cds-list-item>
5458
<cds-list-item>Ordered List level 1</cds-list-item>
5559
<cds-list-item>Ordered List level 1</cds-list-item>
5660
<cds-list-item>
5761
Ordered List level 1
58-
<cds-ordered-list native>
62+
<cds-ordered-list ?is-expressive="${isExpressive}" ?native="${native}">
5963
<cds-list-item>Ordered List level 2</cds-list-item>
6064
<cds-list-item>Ordered List level 2</cds-list-item>
6165
<cds-list-item>Ordered List level 2</cds-list-item>
@@ -74,15 +78,19 @@ export const NativeListStyles = {
7478
};
7579

7680
export const Nested = {
77-
render: () =>
78-
html`<cds-ordered-list>
81+
args: defaultArgs,
82+
argTypes: controls,
83+
render: ({ isExpressive, native }) =>
84+
html`<cds-ordered-list ?is-expressive="${isExpressive}" ?native="${native}">
7985
<cds-list-item>
8086
Ordered List level 1
81-
<cds-ordered-list native>
87+
<cds-ordered-list ?is-expressive="${isExpressive}" ?native="${native}">
8288
<cds-list-item>Ordered List level 2</cds-list-item>
8389
<cds-list-item>
8490
Ordered List level 2
85-
<cds-ordered-list native>
91+
<cds-ordered-list
92+
?is-expressive="${isExpressive}"
93+
?native="${native}">
8694
<cds-list-item>Ordered List level 3</cds-list-item>
8795
<cds-list-item>Ordered List level 3</cds-list-item>
8896
</cds-ordered-list>
@@ -94,41 +102,6 @@ export const Nested = {
94102
</cds-ordered-list>`,
95103
};
96104

97-
export const Playground = {
98-
args: defaultArgs,
99-
argTypes: controls,
100-
render: ({ isExpressive, native }) => html`
101-
<cds-ordered-list ?isExpressive="${isExpressive}" ?native="${native}">
102-
<cds-list-item>
103-
Ordered List level 1
104-
<cds-ordered-list ?isExpressive="${isExpressive}" ?native="${native}">
105-
<cds-list-item>Ordered List level 2</cds-list-item>
106-
<cds-list-item>
107-
Ordered List level 2
108-
<cds-ordered-list ?isExpressive="${isExpressive}" ?native="${native}">
109-
<cds-list-item>Ordered List level 2</cds-list-item>
110-
<cds-list-item>Ordered List level 2</cds-list-item>
111-
</cds-ordered-list>
112-
</cds-list-item>
113-
</cds-ordered-list>
114-
</cds-list-item>
115-
<cds-list-item>Ordered List level 1</cds-list-item>
116-
<cds-list-item>Ordered List level 1</cds-list-item>
117-
<cds-list-item>Ordered List level 1</cds-list-item>
118-
<cds-list-item>Ordered List level 1</cds-list-item>
119-
<cds-list-item>Ordered List level 1</cds-list-item>
120-
<cds-list-item>Ordered List level 1</cds-list-item>
121-
<cds-list-item>Ordered List level 1</cds-list-item>
122-
<cds-list-item>Ordered List level 1</cds-list-item>
123-
<cds-list-item>Ordered List level 1</cds-list-item>
124-
<cds-list-item>Ordered List level 1</cds-list-item>
125-
<cds-list-item>Ordered List level 1</cds-list-item>
126-
<cds-list-item>Ordered List level 1</cds-list-item>
127-
</cds-ordered-list>
128-
</cds-ordered-list>
129-
`,
130-
};
131-
132105
const meta = {
133106
title: 'Components/Ordered list',
134107
parameters: {

‎packages/web-components/src/components/list/ordered-list.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
1616

1717
/**
1818
* Ordered list.
19+
*
20+
* @element cds-ordered-list
1921
*/
2022
@customElement(`${prefix}-ordered-list`)
2123
class CDSOrderedList extends CDSUnorderedList {

‎packages/web-components/src/components/list/list.mdx renamed to ‎packages/web-components/src/components/list/unordered-list.mdx

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
import { ArgTypes, Markdown } from '@storybook/blocks';
1+
import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
22
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
3+
import * as UnorderedListStories from './unordered-list.stories';
4+
5+
<Meta of={UnorderedListStories} />
36

47
# List
58

@@ -27,26 +30,6 @@ import '@carbon/web-components/es/components/list/index.js';
2730
### HTML
2831

2932
```html
30-
<h3>cds-ordered-list</h3>
31-
32-
<cds-ordered-list>
33-
<cds-list-item>
34-
Ordered List level 1
35-
<cds-ordered-list>
36-
<cds-list-item>Ordered List level 2</cds-list-item>
37-
<cds-list-item>
38-
Ordered List level 2
39-
<cds-ordered-list>
40-
<cds-list-item>Ordered List level 2</cds-list-item>
41-
<cds-list-item>Ordered List level 2</cds-list-item>
42-
</cds-ordered-list>
43-
</cds-list-item>
44-
</cds-ordered-list>
45-
</cds-list-item>
46-
<cds-list-item>Ordered List level 1</cds-list-item>
47-
<cds-list-item>Ordered List level 1</cds-list-item>
48-
</cds-ordered-list>
49-
5033
<h3>cds-unordered-list</h3>
5134

5235
<cds-unordered-list>
@@ -68,6 +51,14 @@ import '@carbon/web-components/es/components/list/index.js';
6851
</cds-unordered-list>
6952
```
7053

54+
## `<cds-unordered-list>` attributes and properties
55+
56+
Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
57+
`<cds-ordered-list is-expressive>`) and `false` means not setting the attribute
58+
(e.g. `<cds-ordered-list>` without `is-expressive` attribute).
59+
60+
<ArgTypes of="cds-unordered-list" />
61+
7162
## `<cds-list-item>` attributes and properties
7263

7364
Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.

‎packages/web-components/src/components/list/unordered-list.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
*/
99

1010
import { html } from 'lit';
11-
import storyDocs from './list.mdx';
11+
import storyDocs from './unordered-list.mdx';
1212
import './index';
1313

1414
const defaultArgs = {

‎packages/web-components/src/components/list/unordered-list.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@ import styles from './list.scss?lit';
1515
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
1616

1717
/**
18-
* Ordered list.
18+
* Unordered list.
19+
*
20+
* @element cds-unordered-list
1921
*/
2022
@customElement(`${prefix}-unordered-list`)
2123
class CDSUnorderedList extends LitElement {
2224
/**
2325
* `true` if expressive theme enabled.
2426
*/
25-
@property({ type: Boolean, reflect: true })
27+
@property({ type: Boolean, reflect: true, attribute: 'is-expressive' })
2628
isExpressive = false;
2729

2830
connectedCallback() {

0 commit comments

Comments
 (0)