Skip to content

Commit 92ba8b4

Browse files
msmx-mnakagawamsmx-mnakagawa
committed
Merge branch 'support-slds-2' into support-slds-2-tabs
2 parents 1bce255 + 129c918 commit 92ba8b4

File tree

5 files changed

+103
-54
lines changed

5 files changed

+103
-54
lines changed

‎src/scripts/MediaObject.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,23 @@ import classnames from 'classnames';
77
export type MediaObjectProps = {
88
figureLeft?: ReactNode;
99
figureRight?: ReactNode;
10-
figureCenter?: ReactNode;
10+
centered?: boolean;
1111
children?: ReactNode;
1212
} & HTMLAttributes<HTMLDivElement>;
1313

1414
/**
1515
*
1616
*/
1717
export const MediaObject: FC<MediaObjectProps> = (props) => {
18-
const {
19-
className,
20-
figureLeft,
21-
figureRight,
22-
figureCenter,
23-
children,
24-
...rprops
25-
} = props;
26-
const mediaClassNames = classnames('slds-media', className);
18+
const { className, figureLeft, figureRight, centered, children, ...rprops } =
19+
props;
20+
const mediaClassNames = classnames(
21+
'slds-media',
22+
{ 'slds-media_center': centered },
23+
className
24+
);
2725
return (
2826
<div className={mediaClassNames} {...rprops}>
29-
{figureCenter ? (
30-
<div className='slds-media__figure'>{figureCenter}</div>
31-
) : undefined}
3227
{figureLeft ? (
3328
<div className='slds-media__figure'>{figureLeft}</div>
3429
) : undefined}

‎src/scripts/Table.tsx‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const TableRow: FC<TableRowProps> = (props) => {
102102
}
103103
const rowClassName = classnames(
104104
className,
105-
header ? 'slds-text-title_caps' : 'slds-hint-parent'
105+
header ? 'slds-line-height_reset' : 'slds-hint-parent'
106106
);
107107
const style = selected
108108
? {
@@ -130,7 +130,7 @@ export type TableHeaderColumnProps = {
130130
sorted?: boolean;
131131
align?: 'left' | 'center' | 'right';
132132
onSort?: () => void;
133-
} & ThHTMLAttributes<HTMLTableHeaderCellElement>;
133+
} & ThHTMLAttributes<HTMLTableCellElement>;
134134

135135
/**
136136
*
@@ -152,7 +152,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
152152
const sortable = typeof sortable_ === 'undefined' ? rowSortable : sortable_;
153153
const oClassNames = classnames(
154154
className,
155-
'slds-text-title_caps slds-truncate',
156155
{
157156
'slds-is-sortable': sortable,
158157
'slds-is-resizable': resizable,
@@ -165,8 +164,15 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
165164

166165
const icon = sortDir === 'DESC' ? 'arrowdown' : 'arrowup';
167166

167+
const content = typeof children === 'string' ? children : undefined;
168+
const cellContent = (
169+
<div className='slds-truncate' title={content}>
170+
{children}
171+
</div>
172+
);
173+
168174
return (
169-
<th {...pprops} className={oClassNames} scope='col' style={style}>
175+
<th {...pprops} className={oClassNames} style={style}>
170176
{sortable ? (
171177
<a
172178
onClick={(e) => {
@@ -178,24 +184,18 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
178184
className='slds-th__action slds-text-link_reset'
179185
>
180186
<span className='slds-assistive-text'>Sort </span>
181-
<span className='slds-truncate'>{children}</span>
187+
{cellContent}
182188
<Icon
189+
container
183190
className='slds-is-sortable__icon'
184191
textColor='default'
185-
container
186192
size='x-small'
187193
category='utility'
188194
icon={icon}
189-
style={{ position: 'absolute' }}
190-
/>
191-
<span
192-
className='slds-assistive-text'
193-
aria-live='assertive'
194-
aria-atomic='true'
195195
/>
196196
</a>
197197
) : (
198-
children
198+
cellContent
199199
)}
200200
</th>
201201
);
@@ -207,23 +207,35 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
207207
export type TableRowColumnProps = {
208208
width?: string | number;
209209
truncate?: boolean;
210-
} & TdHTMLAttributes<HTMLTableDataCellElement>;
210+
} & TdHTMLAttributes<HTMLTableCellElement>;
211211

212212
/**
213213
*
214214
*/
215215
export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
216-
const { truncate = true, className, width, children, ...pprops } = props;
217-
const oClassNames = classnames(className, {
218-
'slds-truncate': truncate,
219-
});
216+
const {
217+
truncate = true,
218+
className: oClassNames,
219+
width,
220+
children,
221+
...pprops
222+
} = props;
220223
const style: CSSProperties = {};
221224
if (width !== undefined) style.width = width;
222225
if (!truncate) style.position = 'static';
223226

224-
return (
225-
<td role='gridcell' style={style} className={oClassNames} {...pprops}>
227+
const content = typeof children === 'string' ? children : undefined;
228+
const cellContent = truncate ? (
229+
<div className='slds-truncate' title={content}>
226230
{children}
231+
</div>
232+
) : (
233+
children
234+
);
235+
236+
return (
237+
<td style={style} className={oClassNames} {...pprops}>
238+
{cellContent}
227239
</td>
228240
);
229241
};
@@ -274,17 +286,15 @@ export const Table: FC<TableProps> = (props) => {
274286
...rprops
275287
} = props;
276288

277-
const tableClassNames = classnames(
278-
className,
279-
'slds-table slds-table_cell-buffer',
280-
{
281-
'slds-table_bordered': bordered,
282-
'slds-no-row-hover': noRowHover,
283-
'slds-table_striped': striped,
284-
'slds-table_fixed-layout': fixedLayout,
285-
'slds-table_col-bordered': verticalBorders,
286-
}
287-
);
289+
const tableClassNames = classnames(className, 'slds-table', {
290+
'slds-table_bordered': bordered,
291+
'slds-no-row-hover': noRowHover,
292+
'slds-table_striped': striped,
293+
'slds-table_fixed-layout': fixedLayout,
294+
'slds-table_resizable-cols': sortable,
295+
'slds-table_cell-buffer': !sortable,
296+
'slds-table_col-bordered': verticalBorders,
297+
});
288298

289299
const style: CSSProperties = { ...style_ };
290300
if (autoWidth) {

‎src/scripts/Text.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import classnames from 'classnames';
77
export type TextProps = {
88
tag?: keyof ReactHTML;
99
category?: 'body' | 'heading' | 'title';
10-
type?: 'small' | 'regular' | 'medium' | 'large' | 'caps' | 'label';
10+
type?: 'small' | 'regular' | 'medium' | 'large' | 'caps';
1111
align?: 'left' | 'center' | 'right';
1212
truncate?: boolean;
1313
section?: boolean;
@@ -29,7 +29,7 @@ export const Text: FC<TextProps> = ({
2929
}) => {
3030
const textClassNames = classnames(
3131
type && category ? `slds-text-${category}_${type}` : undefined,
32-
category && !type ? `slds-text-${category}` : undefined,
32+
category === 'title' && !type ? `slds-text-${category}` : undefined,
3333
align ? `slds-text-align_${align}` : undefined,
3434
{
3535
'slds-truncate': truncate,

‎stories/MediaObject.stories.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,21 @@ export const Figure: ComponentStoryObj<typeof MediaObject> = {
5050
},
5151
};
5252

53+
/**
54+
*
55+
*/
56+
export const FigureCenter: ComponentStoryObj<typeof MediaObject> = {
57+
name: 'Figure (Center)',
58+
args: {
59+
figureLeft: image1,
60+
centered: true,
61+
children: mediaContent,
62+
},
63+
parameters: {
64+
info: 'Vertically centered Media Object with figure in left',
65+
},
66+
};
67+
5368
/**
5469
*
5570
*/
@@ -64,6 +79,21 @@ export const FigureReverse: ComponentStoryObj<typeof MediaObject> = {
6479
},
6580
};
6681

82+
/**
83+
*
84+
*/
85+
export const FigureReverseCenter: ComponentStoryObj<typeof MediaObject> = {
86+
name: 'Figure - Reverse (Center)',
87+
args: {
88+
figureRight: image2,
89+
centered: true,
90+
children: mediaContent,
91+
},
92+
parameters: {
93+
info: 'Vertically centered Media Object with figure in right',
94+
},
95+
};
96+
6797
/**
6898
*
6999
*/
@@ -78,3 +108,19 @@ export const FigureBothSide: ComponentStoryObj<typeof MediaObject> = {
78108
info: 'Media Object with figure in left and right',
79109
},
80110
};
111+
112+
/**
113+
*
114+
*/
115+
export const FigureBothSideCenter: ComponentStoryObj<typeof MediaObject> = {
116+
name: 'Figure - Both Side (Center)',
117+
args: {
118+
figureLeft: image1,
119+
figureRight: image2,
120+
centered: true,
121+
children: mediaContent,
122+
},
123+
parameters: {
124+
info: 'Vertically centered Media Object with figure in left and right',
125+
},
126+
};

‎stories/PageHeader.stories.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,12 @@ export const RecordHome: ComponentStoryObj<typeof PageHeader> = {
9797
</PageHeaderDetailItem>
9898
<PageHeaderDetailItem>
9999
<PageHeaderDetailLabel>
100-
<Text tag='div' category='heading' type='label'>
101-
FIELD 2 (3)
102-
<DropdownButton type='icon-bare' iconSize='small' icon='down'>
103-
<MenuItem>Menu Item #1</MenuItem>
104-
<MenuItem>Menu Item #2</MenuItem>
105-
<MenuItem>Menu Item #3</MenuItem>
106-
</DropdownButton>
107-
</Text>
100+
FIELD 2 (3)
101+
<DropdownButton type='icon-bare' iconSize='small' icon='down'>
102+
<MenuItem>Menu Item #1</MenuItem>
103+
<MenuItem>Menu Item #2</MenuItem>
104+
<MenuItem>Menu Item #3</MenuItem>
105+
</DropdownButton>
108106
</PageHeaderDetailLabel>
109107
<PageHeaderDetailBody>
110108
<Text category='body' type='regular' title='Multiple Values'>

0 commit comments

Comments
 (0)