Skip to content

Commit 2159242

Browse files
jsuarezgonzjsuarezgonz
authored
Merge pull request #1712 from dxc-technology/rarrojolopez-chip
Chip specs inconsistencies fixed
2 parents 62702b8 + f8e95e3 commit 2159242

File tree

5 files changed

+136
-188
lines changed

5 files changed

+136
-188
lines changed

‎website/screens/components/chip/specs/ChipSpecsPage.tsx‎

Lines changed: 136 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -73,182 +73,120 @@ const sections = [
7373
subSections: [
7474
{
7575
title: "Color",
76-
subSections: [
77-
{
78-
title: "On-light",
79-
content: (
80-
<DxcTable>
81-
<thead>
82-
<tr>
83-
<th>Component token</th>
84-
<th>Element</th>
85-
<th>Core token</th>
86-
<th>Value</th>
87-
</tr>
88-
</thead>
89-
<tbody>
90-
<tr>
91-
<td>
92-
<Code>backgroundColor</Code>
93-
</td>
94-
<td>Chip container</td>
95-
<td>
96-
<Code>color-grey-200</Code>
97-
</td>
98-
<td>#e6e6e6</td>
99-
</tr>
100-
<tr>
101-
<td>
102-
<Code>disabledBackgroundColor</Code>
103-
</td>
104-
<td>Chip container:disabled</td>
105-
<td>
106-
<Code>color-grey-100</Code>
107-
</td>
108-
<td>#f2f2f2</td>
109-
</tr>
110-
<tr>
111-
<td>
112-
<Code>fontColor</Code>
113-
</td>
114-
<td>Label</td>
115-
<td>
116-
<Code>color-black</Code>
117-
</td>
118-
<td>#000000</td>
119-
</tr>
120-
<tr>
121-
<td>
122-
<Code>disabledFontcolor</Code>
123-
</td>
124-
<td>Label:disabled</td>
125-
<td>
126-
<Code>color-grey-500</Code>
127-
</td>
128-
<td>#999999</td>
129-
</tr>
130-
<tr>
131-
<td>
132-
<Code>focusColor</Code>
133-
</td>
134-
<td>Focus outline</td>
135-
<td>
136-
<Code>color-blue-600</Code>
137-
</td>
138-
<td>#0095ff</td>
139-
</tr>
140-
<tr>
141-
<td>
142-
<Code>iconColor</Code>
143-
</td>
144-
<td>Icon</td>
145-
<td>
146-
<Code>color-black</Code>
147-
</td>
148-
<td>#000000</td>
149-
</tr>
150-
<tr>
151-
<td>
152-
<Code>disabledIconColor</Code>
153-
</td>
154-
<td>Icon:disabled</td>
155-
<td>
156-
<Code>color-grey-500</Code>
157-
</td>
158-
<td>#999999</td>
159-
</tr>
160-
</tbody>
161-
</DxcTable>
162-
),
163-
},
164-
{
165-
title: "On-dark",
166-
content: (
167-
<DxcTable>
168-
<thead>
169-
<tr>
170-
<th>Component token</th>
171-
<th>Element</th>
172-
<th>Core token</th>
173-
<th>Value</th>
174-
</tr>
175-
</thead>
176-
<tbody>
177-
<tr>
178-
<td>
179-
<Code>backgroundColorOnDark</Code>
180-
</td>
181-
<td>Chip container</td>
182-
<td>
183-
<Code>color-grey-700</Code>
184-
</td>
185-
<td>#666666</td>
186-
</tr>
187-
<tr>
188-
<td>
189-
<Code>disabledBackgroundColorOnDark</Code>
190-
</td>
191-
<td>Chip container:disabled</td>
192-
<td>
193-
<Code>color-grey-800</Code>
194-
</td>
195-
<td>#4d4d4d</td>
196-
</tr>
197-
<tr>
198-
<td>
199-
<Code>fontcolorOnDark</Code>
200-
</td>
201-
<td>Label</td>
202-
<td>
203-
<Code>color-white</Code>
204-
</td>
205-
<td>#ffffff</td>
206-
</tr>
207-
<tr>
208-
<td>
209-
<Code>disabledfontcolorOnDark</Code>
210-
</td>
211-
<td>Label:disabled</td>
212-
<td>
213-
<Code>color-grey-500</Code>
214-
</td>
215-
<td>#999999</td>
216-
</tr>
217-
<tr>
218-
<td>
219-
<Code>focusColorOnDark</Code>
220-
</td>
221-
<td>Focus outline</td>
222-
<td>
223-
<Code>color-blue-600</Code>
224-
</td>
225-
<td>#0095ff</td>
226-
</tr>
227-
<tr>
228-
<td>
229-
<Code>iconColorOnDark</Code>
230-
</td>
231-
<td>Icon</td>
232-
<td>
233-
<Code>color-white</Code>
234-
</td>
235-
<td>#ffffff</td>
236-
</tr>
237-
<tr>
238-
<td>
239-
<Code>iconColorOnDark</Code>
240-
</td>
241-
<td>Icon:disabled</td>
242-
<td>
243-
<Code>color-grey-500</Code>
244-
</td>
245-
<td>#999999</td>
246-
</tr>
247-
</tbody>
248-
</DxcTable>
249-
),
250-
},
251-
],
76+
content: (
77+
<DxcTable>
78+
<thead>
79+
<tr>
80+
<th>Component token</th>
81+
<th>Element</th>
82+
<th>Core token</th>
83+
<th>Value</th>
84+
</tr>
85+
</thead>
86+
<tbody>
87+
<tr>
88+
<td>
89+
<Code>activeIconColor</Code>
90+
</td>
91+
<td>Container:active</td>
92+
<td>
93+
<Code>color-black</Code>
94+
</td>
95+
<td>#000000</td>
96+
</tr>
97+
<tr>
98+
<td>
99+
<Code>backgroundColor</Code>
100+
</td>
101+
<td>Container</td>
102+
<td>
103+
<Code>color-grey-200</Code>
104+
</td>
105+
<td>#e6e6e6</td>
106+
</tr>
107+
<tr>
108+
<td>
109+
<Code>borderColor</Code>
110+
</td>
111+
<td>Container:border</td>
112+
<td>
113+
<Code>color-transparent</Code>
114+
</td>
115+
<td>transparent</td>
116+
</tr>
117+
<tr>
118+
<td>
119+
<Code>disabledBackgroundColor</Code>
120+
</td>
121+
<td>Container:disabled</td>
122+
<td>
123+
<Code>color-grey-100</Code>
124+
</td>
125+
<td>#f2f2f2</td>
126+
</tr>
127+
<tr>
128+
<td>
129+
<Code>disabledFontcolor</Code>
130+
</td>
131+
<td>Label:disabled</td>
132+
<td>
133+
<Code>color-grey-500</Code>
134+
</td>
135+
<td>#999999</td>
136+
</tr>
137+
<tr>
138+
<td>
139+
<Code>disabledIconColor</Code>
140+
</td>
141+
<td>Icon:disabled</td>
142+
<td>
143+
<Code>color-grey-500</Code>
144+
</td>
145+
<td>#999999</td>
146+
</tr>
147+
<tr>
148+
<td>
149+
<Code>focusColor</Code>
150+
</td>
151+
<td>Focus outline</td>
152+
<td>
153+
<Code>color-blue-600</Code>
154+
</td>
155+
<td>#0095ff</td>
156+
</tr>
157+
<tr>
158+
<td>
159+
<Code>fontColor</Code>
160+
</td>
161+
<td>Label</td>
162+
<td>
163+
<Code>color-black</Code>
164+
</td>
165+
<td>#000000</td>
166+
</tr>
167+
<tr>
168+
<td>
169+
<Code>hoverIconColor</Code>
170+
</td>
171+
<td>Container:hover</td>
172+
<td>
173+
<Code>color-grey-900</Code>
174+
</td>
175+
<td>#333333</td>
176+
</tr>
177+
<tr>
178+
<td>
179+
<Code>iconColor</Code>
180+
</td>
181+
<td>Icon</td>
182+
<td>
183+
<Code>color-grey-800</Code>
184+
</td>
185+
<td>#4d4d4d</td>
186+
</tr>
187+
</tbody>
188+
</DxcTable>
189+
),
252190
},
253191
{
254192
title: "Typography",
@@ -322,39 +260,49 @@ const sections = [
322260
<tbody>
323261
<tr>
324262
<td>
325-
<Code>labelMarginLeft</Code>
263+
<Code>contentPaddingLeft</Code>
326264
</td>
327-
<td>Label</td>
265+
<td>Container</td>
328266
<td>
329-
<Code>spacing-8</Code>
267+
<Code>spacing-16</Code>
330268
</td>
331-
<td>0.5rem / 8px</td>
269+
<td>1rem / 16px</td>
332270
</tr>
333271
<tr>
334272
<td>
335-
<Code>labelMarginRight</Code>
273+
<Code>contentPaddingRight</Code>
336274
</td>
337-
<td>Label</td>
275+
<td>Container</td>
338276
<td>
339-
<Code>spacing-8</Code>
277+
<Code>spacing-16</Code>
340278
</td>
341-
<td>0.5rem / 8px</td>
279+
<td>1rem / 16px</td>
342280
</tr>
343281
<tr>
344282
<td>
345-
<Code>containerPaddingLeft</Code>
283+
<Code>contentPaddingTop</Code>
346284
</td>
347285
<td>Container</td>
348286
<td>
349-
<Code>spacing-8</Code>
287+
<Code>spacing-0</Code>
350288
</td>
351-
<td>0.5rem / 8px</td>
289+
<td>0</td>
352290
</tr>
353291
<tr>
354292
<td>
355-
<Code>containerPaddingRight</Code>
293+
<Code>contentPaddingBottom</Code>
356294
</td>
357295
<td>Container</td>
296+
<td>
297+
<Code>spacing-0</Code>
298+
</td>
299+
<td>0</td>
300+
</tr>
301+
<tr>
302+
<td>
303+
<Code>iconSpacing</Code>
304+
</td>
305+
<td>Icon</td>
358306
<td>
359307
<Code>spacing-8</Code>
360308
</td>

‎website/screens/components/chip/specs/images/chip_anatomy.png‎

4 Bytes
Loading

‎website/screens/components/chip/specs/images/chip_specs.png‎

839 Bytes
Loading

‎website/screens/components/chip/specs/images/chip_states_action.png‎

101 Bytes
Loading

‎website/screens/components/chip/specs/images/chip_states_container.png‎

-36 Bytes
Loading

0 commit comments

Comments
 (0)