Skip to content

Commit 656a30c

Browse files
thatblindgeyethatblindgeye
committed
Updated classes based on core updates
1 parent 599b802 commit 656a30c

File tree

9 files changed

+53
-34
lines changed

9 files changed

+53
-34
lines changed

‎packages/react-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"tslib": "^2.8.1"
5555
},
5656
"devDependencies": {
57-
"@patternfly/patternfly": "6.2.0-prerelease.28",
57+
"@patternfly/patternfly": "6.3.0-prerelease.4",
5858
"case-anything": "^3.1.2",
5959
"css": "^3.0.0",
6060
"fs-extra": "^11.3.0"

‎packages/react-core/src/components/Truncate/Truncate.tsx

+15-7
Original file line numberDiff line numberDiff line change
@@ -173,10 +173,18 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
173173
};
174174

175175
const renderMaxDisplayContent = () => {
176+
const renderVisibleContent = (contentToRender: string) => (
177+
<span className={`${styles.truncate}__text`}>{contentToRender}</span>
178+
);
176179
if (!isTruncated) {
177-
return content;
180+
return renderVisibleContent(content);
178181
}
179-
const omissionElement = <span aria-hidden="true">{omissionContent}</span>;
182+
183+
const omissionElement = (
184+
<span className={`${styles.truncate}__omission`} aria-hidden="true">
185+
{omissionContent}
186+
</span>
187+
);
180188
const renderVisuallyHiddenContent = (contentToHide: string) => (
181189
<span className="pf-v6-screen-reader">{contentToHide}</span>
182190
);
@@ -186,14 +194,14 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
186194
<>
187195
{renderVisuallyHiddenContent(content.slice(0, maxCharsDisplayed * -1))}
188196
{omissionElement}
189-
<span>{content.slice(maxCharsDisplayed * -1)}</span>
197+
{renderVisibleContent(content.slice(maxCharsDisplayed * -1))}
190198
</>
191199
);
192200
}
193201
if (position === TruncatePosition.end) {
194202
return (
195203
<>
196-
<span>{content.slice(0, maxCharsDisplayed)}</span>
204+
{renderVisibleContent(content.slice(0, maxCharsDisplayed))}
197205
{omissionElement}
198206
{renderVisuallyHiddenContent(content.slice(maxCharsDisplayed))}
199207
</>
@@ -204,18 +212,18 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
204212
const trueMiddleEnd = Math.ceil(maxCharsDisplayed / 2) * -1;
205213
return (
206214
<>
207-
<span>{content.slice(0, trueMiddleStart)}</span>
215+
{renderVisibleContent(content.slice(0, trueMiddleStart))}
208216
{omissionElement}
209217
{renderVisuallyHiddenContent(content.slice(trueMiddleStart, trueMiddleEnd))}
210-
<span>{content.slice(trueMiddleEnd)}</span>
218+
{renderVisibleContent(content.slice(trueMiddleEnd))}
211219
</>
212220
);
213221
};
214222

215223
const truncateBody = (
216224
<span
217225
ref={subParentRef}
218-
className={css(styles.truncate, shouldRenderByMaxChars && 'class-tbd', className)}
226+
className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
219227
{...props}
220228
>
221229
{!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}

‎packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx

+19-11
Original file line numberDiff line numberDiff line change
@@ -150,58 +150,66 @@ test('renders with inherited element props spread to the component', () => {
150150
});
151151

152152
describe('Truncation with maxCharsDisplayed', () => {
153-
test(`Does not render with class class-tbd when maxCharsDisplayed is 0`, () => {
153+
test(`Does not render with class ${styles.modifiers.fixed} when maxCharsDisplayed is 0`, () => {
154154
render(<Truncate maxCharsDisplayed={0} data-testid="truncate-component" content="Test content" />);
155155

156-
expect(screen.getByTestId('truncate-component')).not.toHaveClass('class-tbd');
156+
expect(screen.getByTestId('truncate-component')).not.toHaveClass(styles.modifiers.fixed);
157157
});
158158

159-
test(`Renders with class class-tbd when maxCharsDisplayed is greater than 0`, () => {
159+
test(`Renders with class ${styles.modifiers.fixed} when maxCharsDisplayed is greater than 0`, () => {
160160
render(<Truncate maxCharsDisplayed={1} data-testid="truncate-component" content="Test content" />);
161161

162-
expect(screen.getByTestId('truncate-component')).toHaveClass('class-tbd');
162+
expect(screen.getByTestId('truncate-component')).toHaveClass(styles.modifiers.fixed);
163163
});
164164

165165
test('Renders with hidden truncated content at end by default when maxCharsDisplayed is passed', () => {
166166
render(<Truncate content="Default end position content truncated" maxCharsDisplayed={6} />);
167167

168-
expect(screen.getByText('Defaul')).not.toHaveClass('pf-v6-screen-reader');
168+
expect(screen.getByText('Defaul')).toHaveClass(`${styles.truncate}__text`, { exact: true });
169169
expect(screen.getByText('t end position content truncated')).toHaveClass('pf-v6-screen-reader');
170170
});
171171

172172
test('Renders with hidden truncated content at middle position when maxCharsDisplayed is passed and position="middle"', () => {
173173
render(<Truncate position="middle" content="Middle position contents being truncated" maxCharsDisplayed={10} />);
174174

175-
expect(screen.getByText('Middl')).not.toHaveClass('pf-v6-screen-reader');
175+
expect(screen.getByText('Middl')).toHaveClass(`${styles.truncate}__text`, { exact: true });
176176
expect(screen.getByText('e position contents being trun')).toHaveClass('pf-v6-screen-reader');
177-
expect(screen.getByText('cated')).not.toHaveClass('pf-v6-screen-reader');
177+
expect(screen.getByText('cated')).toHaveClass(`${styles.truncate}__text`, { exact: true });
178178
});
179179

180180
test('Renders with hidden truncated content at start when maxCharsDisplayed is passed and position="start"', () => {
181-
render(<Truncate content="Start position content truncated" maxCharsDisplayed={4} />);
181+
render(<Truncate position="start" content="Start position content truncated" maxCharsDisplayed={6} />);
182182

183-
expect(screen.getByText('Star')).not.toHaveClass('pf-v6-screen-reader');
184-
expect(screen.getByText('t position content truncated')).toHaveClass('pf-v6-screen-reader');
183+
expect(screen.getByText('Start position content tru')).toHaveClass('pf-v6-screen-reader');
184+
expect(screen.getByText('ncated')).toHaveClass(`${styles.truncate}__text`, { exact: true });
185185
});
186186

187187
test('Renders full content when maxCharsDisplayed exceeds the length of the content', () => {
188188
render(<Truncate content="This full content is rendered" maxCharsDisplayed={90} />);
189189

190-
expect(screen.getByText('This full content is rendered')).not.toHaveClass('pf-v6-screen-reader');
190+
expect(screen.getByText('This full content is rendered')).toHaveClass(`${styles.truncate}__text`, { exact: true });
191191
});
192192

193193
test('Renders ellipsis as omission content by default', () => {
194194
render(<Truncate content="Test truncation content" maxCharsDisplayed={5} />);
195195

196+
expect(screen.getByText('\u2026')).toHaveClass(`${styles.truncate}__omission`, { exact: true });
196197
expect(screen.getByText('\u2026')).toHaveAttribute('aria-hidden', 'true');
197198
});
198199

199200
test('Renders custom omission content when omissionContent is passed', () => {
200201
render(<Truncate omissionContent="---" content="Test truncation content" maxCharsDisplayed={5} />);
201202

203+
expect(screen.getByText('---')).toHaveClass(`${styles.truncate}__omission`, { exact: true });
202204
expect(screen.getByText('---')).toHaveAttribute('aria-hidden', 'true');
203205
});
204206

207+
test('Does not render omission content when maxCharsDisplayed exceeds the length of the content ', () => {
208+
render(<Truncate content="Test truncation content" maxCharsDisplayed={99} />);
209+
210+
expect(screen.queryByText('\u2026')).not.toBeInTheDocument();
211+
});
212+
205213
test('Matches snapshot with default position', () => {
206214
const { asFragment } = render(<Truncate content="Test truncation content" maxCharsDisplayed={3} />);
207215

‎packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap

+5-2
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,16 @@ exports[`Truncation with maxCharsDisplayed Matches snapshot with default positio
1414
position: top
1515
</p>
1616
<span
17-
class="pf-v6-c-truncate class-tbd"
17+
class="pf-v6-c-truncate pf-m-fixed"
1818
>
19-
<span>
19+
<span
20+
class="pf-v6-c-truncate__text"
21+
>
2022
Tes
2123
</span>
2224
<span
2325
aria-hidden="true"
26+
class="pf-v6-c-truncate__omission"
2427
>
2528
…
2629
</span>

‎packages/react-docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
2424
},
2525
"dependencies": {
26-
"@patternfly/patternfly": "6.2.0-prerelease.28",
26+
"@patternfly/patternfly": "6.3.0-prerelease.4",
2727
"@patternfly/react-charts": "workspace:^",
2828
"@patternfly/react-code-editor": "workspace:^",
2929
"@patternfly/react-core": "workspace:^",

‎packages/react-icons/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@fortawesome/free-brands-svg-icons": "^5.15.4",
3434
"@fortawesome/free-regular-svg-icons": "^5.15.4",
3535
"@fortawesome/free-solid-svg-icons": "^5.15.4",
36-
"@patternfly/patternfly": "6.2.0-prerelease.28",
36+
"@patternfly/patternfly": "6.3.0-prerelease.4",
3737
"fs-extra": "^11.3.0",
3838
"tslib": "^2.8.1"
3939
},

‎packages/react-styles/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"clean": "rimraf dist css"
2020
},
2121
"devDependencies": {
22-
"@patternfly/patternfly": "6.2.0-prerelease.28",
22+
"@patternfly/patternfly": "6.3.0-prerelease.4",
2323
"change-case": "^5.4.4",
2424
"fs-extra": "^11.3.0"
2525
},

‎packages/react-tokens/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"clean": "rimraf dist"
3030
},
3131
"devDependencies": {
32-
"@patternfly/patternfly": "6.2.0-prerelease.28",
32+
"@patternfly/patternfly": "6.3.0-prerelease.4",
3333
"css": "^3.0.0",
3434
"fs-extra": "^11.3.0"
3535
}

‎yarn.lock

+9-9
Original file line numberDiff line numberDiff line change
@@ -3632,10 +3632,10 @@ __metadata:
36323632
languageName: node
36333633
linkType: hard
36343634

3635-
"@patternfly/patternfly@npm:6.2.0-prerelease.28":
3636-
version: 6.2.0-prerelease.28
3637-
resolution: "@patternfly/patternfly@npm:6.2.0-prerelease.28"
3638-
checksum: 10c0/36a9acb6973471deb741f67922b13baf38258e5a1b400d67ec87caf76e48000b1188216d74f9bc5f348d6b33f7373858adb7ac8dd62887eb4d75b772abdab3db
3635+
"@patternfly/patternfly@npm:6.3.0-prerelease.4":
3636+
version: 6.3.0-prerelease.4
3637+
resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.4"
3638+
checksum: 10c0/939cf9476b615b8bec52f5345fcde2d8c23161decaa915e075d097cce93f0503c19e2b4cac96e5cc2e1e7946a7ae614b07e34811addd1ba243bd1b4a83ccd48d
36393639
languageName: node
36403640
linkType: hard
36413641

@@ -3733,7 +3733,7 @@ __metadata:
37333733
version: 0.0.0-use.local
37343734
resolution: "@patternfly/react-core@workspace:packages/react-core"
37353735
dependencies:
3736-
"@patternfly/patternfly": "npm:6.2.0-prerelease.28"
3736+
"@patternfly/patternfly": "npm:6.3.0-prerelease.4"
37373737
"@patternfly/react-icons": "workspace:^"
37383738
"@patternfly/react-styles": "workspace:^"
37393739
"@patternfly/react-tokens": "workspace:^"
@@ -3754,7 +3754,7 @@ __metadata:
37543754
resolution: "@patternfly/react-docs@workspace:packages/react-docs"
37553755
dependencies:
37563756
"@patternfly/documentation-framework": "npm:^6.5.20"
3757-
"@patternfly/patternfly": "npm:6.2.0-prerelease.28"
3757+
"@patternfly/patternfly": "npm:6.3.0-prerelease.4"
37583758
"@patternfly/patternfly-a11y": "npm:5.1.0"
37593759
"@patternfly/react-charts": "workspace:^"
37603760
"@patternfly/react-code-editor": "workspace:^"
@@ -3794,7 +3794,7 @@ __metadata:
37943794
"@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
37953795
"@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
37963796
"@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
3797-
"@patternfly/patternfly": "npm:6.2.0-prerelease.28"
3797+
"@patternfly/patternfly": "npm:6.3.0-prerelease.4"
37983798
fs-extra: "npm:^11.3.0"
37993799
tslib: "npm:^2.8.1"
38003800
peerDependencies:
@@ -3878,7 +3878,7 @@ __metadata:
38783878
version: 0.0.0-use.local
38793879
resolution: "@patternfly/react-styles@workspace:packages/react-styles"
38803880
dependencies:
3881-
"@patternfly/patternfly": "npm:6.2.0-prerelease.28"
3881+
"@patternfly/patternfly": "npm:6.3.0-prerelease.4"
38823882
change-case: "npm:^5.4.4"
38833883
fs-extra: "npm:^11.3.0"
38843884
languageName: unknown
@@ -3919,7 +3919,7 @@ __metadata:
39193919
version: 0.0.0-use.local
39203920
resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
39213921
dependencies:
3922-
"@patternfly/patternfly": "npm:6.2.0-prerelease.28"
3922+
"@patternfly/patternfly": "npm:6.3.0-prerelease.4"
39233923
css: "npm:^3.0.0"
39243924
fs-extra: "npm:^11.3.0"
39253925
languageName: unknown

0 commit comments

Comments
 (0)