Skip to content

Commit

Permalink
[EuiTextAlign] Opinionated: Remove className entirely
Browse files Browse the repository at this point in the history
- text alignment already has its own CSS utils that users can call directly (that we can also convert any Kibanau sage into), so I feel very safe making this change, and I'd rather people not continue to hook into these classNames
  • Loading branch information
cee-chen committed May 11, 2022
1 parent 8fd4e19 commit 42692fa
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 9 deletions.
8 changes: 4 additions & 4 deletions src/components/text/__snapshots__/text_align.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@

exports[`EuiTextAlign direction prop center is rendered 1`] = `
<div
class="euiTextAlign euiTextAlign--center"
class="css-155kyc0-euiTextAlign-center"
/>
`;

exports[`EuiTextAlign direction prop left is rendered 1`] = `
<div
class="euiTextAlign euiTextAlign--left"
class="css-90la4n-euiTextAlign-left"
/>
`;

exports[`EuiTextAlign direction prop right is rendered 1`] = `
<div
class="euiTextAlign euiTextAlign--right"
class="css-5onnip-euiTextAlign-right"
/>
`;

exports[`EuiTextAlign is rendered 1`] = `
<div
aria-label="aria-label"
class="euiTextAlign euiTextAlign--left testClass1 testClass2"
class="testClass1 testClass2 css-90la4n-euiTextAlign-left"
data-test-subj="test subject string"
/>
`;
6 changes: 1 addition & 5 deletions src/components/text/text_align.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import React, { FunctionComponent, HTMLAttributes } from 'react';
import classNames from 'classnames';
import { CommonProps } from '../common';

import { euiTextAlignStyles } from './text_align.styles';
Expand All @@ -22,17 +21,14 @@ export type EuiTextAlignProps = CommonProps &

export const EuiTextAlign: FunctionComponent<EuiTextAlignProps> = ({
children,
className,
textAlign = 'left',
...rest
}) => {
const styles = euiTextAlignStyles();
const cssStyles = [styles.euiTextAlign, styles[textAlign]];

const classes = classNames('euiTextAlign', className);

return (
<div css={cssStyles} className={classes} {...rest}>
<div css={cssStyles} {...rest}>
{children}
</div>
);
Expand Down

0 comments on commit 42692fa

Please sign in to comment.