Skip to content

Commit

Permalink
Merge pull request #5784 from ilzamcmed/LPD-17350
Browse files Browse the repository at this point in the history 
docs(Button): LPD-17350 - Buttons - Simplify Clay page and align to Lexicon
  • Loading branch information
@matuzalemsteles
matuzalemsteles authored Mar 20, 2024
2 parents 0da380f + 8eaf785 commit 85ce1a2
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 249 deletions.
45 changes: 0 additions & 45 deletions packages/clay-button/docs/button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,10 @@ packageNpm: '@clayui/button'
---

import {
ButtonBeta,
ButtonBetaDark,
ButtonClayDark,
ButtonDisplayTypes,
ButtonGroup,
ButtonIcon,
ButtonTranslucent,
} from '$packages/clay-button/docs/index';

<div class="nav-toc-absolute">
Expand All @@ -21,10 +18,6 @@ import {
- [Display Types](#display-types)
- [Group](#group)
- [Icon](#icon)
- [Translucent](#btn-translucent)
- [Clay Dark](#btn-clay-dark)
- [Beta (Deprecated)](#btn-beta)
- [Dark (Deprecated)](#btn-beta-dark)

</div>
</div>
Expand All @@ -33,8 +26,6 @@ import {

You can determine how your button can be displayed using the [`displayType`](#api-displayType) property:

Set `displayType` to `unstyled` to reset all the stylings from Bootstrap 4.

If you want use the button as a link set `displayType` to `link`.

<ButtonDisplayTypes />
Expand All @@ -52,39 +43,3 @@ Use the [`spaced`](#api-spaced) property to create spacing between buttons.
You can use the high-level component `ClayButtonWithIcon` to create a button with only an icon. If you need an icon and text, you need to compose with `ClayIcon`

<ButtonIcon />

## Translucent(#btn-translucent)

The boolean attribute `translucent` renders a button with an opaque background color optimized for light backgrounds. It renders as an extra small button with rounded borders.

<ButtonTranslucent />

## Dark(#btn-clay-dark)

The boolean attribute `dark` renders a button with an opaque background color optimized for dark backgrounds. It adds the class `clay-dark` to the button. The class `clay-dark` can be added to the parent element to make buttons contained inside render the dark variant. When adding `clay-dark` to the parent element, the `dark` attribute on the button should be omitted.

<ButtonClayDark />

## Beta (Deprecated)(#btn-beta)

<div class="clay-site-alert alert alert-warning">
The property <code>displayType="beta"</code> has been deprecated in favor of
semantic attributes <code>displayType="info"</code> and{' '}
<code>translucent</code>.
</div>

A component to indicate beta features in DXP. The Button variant should be used when the component can be placed close to a non-interactive UI element, such as a title or a section. Also, a default popover is shown if the user interacts with it.

<ButtonBeta />

### Beta Dark (Deprecated)(#btn-beta-dark)

<div class="clay-site-alert alert alert-warning">
The property <code>displayType="beta-dark"</code> has been deprecated in
favor of semantic attributes <code>dark</code>,{' '}
<code>displayType="info"</code> and <code>translucent</code>.
</div>

`btn-beta-dark` is a dark variant of `btn-beta` to be used with dark backgrounds.

<ButtonBetaDark />
211 changes: 7 additions & 204 deletions packages/clay-button/docs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,20 @@ const buttonDisplayTypesImportsCode = `import ClayButton from '@clayui/button';`

const ButtonDisplayTypesCode = `const Component = () => {
return (
<>
<ClayButton.Group spaced>
<ClayButton displayType="primary">
Button Primary
</ClayButton>
<ClayButton displayType="secondary">
Button Secondary
</ClayButton>
<ClayButton displayType={null}>
Base Button
</ClayButton>
<ClayButton displayType="link">
Button Link
</ClayButton>
<ClayButton displayType="unstyled">
Button Unstyled
<ClayButton borderless>
Button Borderless
</ClayButton>
</>
</ClayButton.Group>
);
}
Expand All @@ -52,8 +49,8 @@ const ButtonJSPCode = `<clay:button
/>
<clay:button
displayType="unstyled"
label="Button Unstyled"
displayType="outline-borderless"
label="Button Borderless"
/>`;

const ButtonDisplayTypes = () => {
Expand Down Expand Up @@ -132,198 +129,4 @@ const ButtonIcon = () => {
return <Editor code={code} imports={buttonIconImportsCode} scope={scope} />;
};

const buttonTranslucentImportsCode = `import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon;'`;

const ButtonTranslucentCode = `const Component = () => {
return (
<>
<ClayButton displayType="primary" translucent>
<span className="inline-item">
{'Primary'}
</span>
</ClayButton>
<ClayButton displayType="success" translucent>
<span className="inline-item">
{'Success'}
</span>
</ClayButton>
<ClayButton displayType="info" translucent>
<span className="inline-item">
{'Info'}
</span>
<span className="inline-item inline-item-after">
<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
</span>
</ClayButton>
<ClayButton displayType="warning" translucent>
<span className="inline-item">
{'Warning'}
</span>
<span className="inline-item inline-item-after">
<ClayIcon spritemap={spritemap} symbol="warning-full" />
</span>
</ClayButton>
<ClayButton displayType="danger" translucent>
<span className="inline-item">
{'Danger'}
</span>
</ClayButton>
</>
);
}
render(<Component />);`;

const ButtonTranslucent = () => {
const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
const code = ButtonTranslucentCode;

return (
<Editor
code={code}
imports={buttonTranslucentImportsCode}
scope={scope}
/>
);
};

// START

const buttonClayDarkImportsCode = `import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon;'`;

const ButtonClayDarkCode = `const Component = () => {
return (
<>
<div className="bg-dark clay-dark p-2">
<ClayButton displayType="primary" translucent>
<span className="inline-item">
{'Primary'}
</span>
</ClayButton>
<ClayButton displayType="success" translucent>
<span className="inline-item">
{'Success'}
</span>
</ClayButton>
<ClayButton displayType="info" translucent>
<span className="inline-item">
{'Info'}
</span>
<span className="inline-item inline-item-after">
<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
</span>
</ClayButton>
<ClayButton displayType="warning" translucent>
<span className="inline-item">
{'Warning'}
</span>
<span className="inline-item inline-item-after">
<ClayIcon spritemap={spritemap} symbol="warning-full" />
</span>
</ClayButton>
<ClayButton displayType="danger" translucent>
<span className="inline-item">
{'Danger'}
</span>
</ClayButton>
</div>
</>
);
}
render(<Component />);`;

const ButtonClayDark = () => {
const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
const code = ButtonClayDarkCode;

return (
<Editor code={code} imports={buttonClayDarkImportsCode} scope={scope} />
);
};

// END

const buttonBetaImportsCode = `import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon;'`;

const ButtonBetaCode = `const Component = () => {
return (
<>
<ClayButton className="rounded-circle" displayType="beta" size="xs">
<span className="inline-item">
{'Beta'}
</span>
<span className="inline-item inline-item-after">
<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
</span>
</ClayButton>
</>
);
}
render(<Component />);`;

const ButtonBeta = () => {
const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
const code = ButtonBetaCode;

return <Editor code={code} imports={buttonBetaImportsCode} scope={scope} />;
};

const buttonBetaDarkImportsCode = `import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon;'`;

const ButtonBetaDarkCode = `const Component = () => {
return (
<>
<div className="bg-dark p-2">
<ClayButton className="rounded-circle" displayType="beta-dark" size="xs">
<span className="inline-item">
{'Beta'}
</span>
<span className="inline-item inline-item-after">
<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
</span>
</ClayButton>
</div>
</>
);
}
render(<Component />);`;

const ButtonBetaDark = () => {
const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
const code = ButtonBetaDarkCode;

return (
<Editor code={code} imports={buttonBetaDarkImportsCode} scope={scope} />
);
};

export {
ButtonDisplayTypes,
ButtonGroup,
ButtonIcon,
ButtonBeta,
ButtonBetaDark,
ButtonTranslucent,
ButtonClayDark,
};
export {ButtonDisplayTypes, ButtonGroup, ButtonIcon};
1 change: 1 addition & 0 deletions packages/clay-button/src/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
* Determines the button variant to use.
* The values `beta` and `beta-dark` are deprecated since v3.100.0 - use
* `translucent` and `dark` instead.
* The values `null` and `unstyled` are for internal use only.
*/
displayType?: DisplayType;

Expand Down

0 comments on commit 85ce1a2

Please sign in to comment.