Skip to content

Commit

Permalink
docs(Button): LPD-17350 - Add example of bordeless button and remove …
Browse files Browse the repository at this point in the history 
…null, unstyled, translucent and beta buttons example
  • Loading branch information
@ilzamcmed
ilzamcmed committed Mar 18, 2024
1 parent 83e7303 commit 84daf20
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 245 deletions.
43 changes: 0 additions & 43 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 Down Expand Up @@ -52,39 +45,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 />
207 changes: 5 additions & 202 deletions packages/clay-button/docs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,11 @@ const ButtonDisplayTypesCode = `const Component = () => {
<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>
</>
);
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};

0 comments on commit 84daf20

Please sign in to comment.