Skip to content

Commit

Permalink
feat(action-button): add rtl support
Browse files Browse the repository at this point in the history 
✅ Closes: COMUI-3096
  • Loading branch information
@321gillian
321gillian committed Sep 23, 2024
1 parent 6c29ae0 commit 23d2ede
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 18 deletions.
208 changes: 196 additions & 12 deletions packages/genesys-spark-components/src/components/stable/gux-action-button/example.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<h1>gux-action-button</h1>
<div id="example" class="layout">
<h3>Default</h3>
<div class="row">
<div>
<h2>Primary</h2>
<h4>Primary</h4>
<gux-action-button accent="primary">
<div slot="title">Primary</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
Expand All @@ -13,7 +14,7 @@ <h2>Primary</h2>
</gux-action-button>
</div>
<div>
<h2>Secondary</h2>
<h4>Secondary</h4>
<gux-action-button accent="secondary">
<div slot="title">Secondary</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
Expand All @@ -24,7 +25,7 @@ <h2>Secondary</h2>
</gux-action-button>
</div>
<div>
<h2>Tertiary</h2>
<h4>Tertiary</h4>
<gux-action-button accent="tertiary">
<div slot="title">Tertiary</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
Expand All @@ -35,7 +36,7 @@ <h2>Tertiary</h2>
</gux-action-button>
</div>
<div>
<h2>Danger</h2>
<h4>Danger</h4>
<gux-action-button accent="danger">
<div slot="title">Danger</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
Expand All @@ -47,7 +48,7 @@ <h2>Danger</h2>
</div>

<div>
<h2>Invalid</h2>
<h4>Invalid</h4>
<gux-action-button accent="invalid">
<div slot="title">Invalid</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
Expand All @@ -59,7 +60,7 @@ <h2>Invalid</h2>
</div>

<div>
<h2>Disabled</h2>
<h4>Disabled</h4>
<gux-action-button class="disable-toggle" disabled>
<div slot="title">Disabled</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
Expand All @@ -71,9 +72,10 @@ <h2>Disabled</h2>
</div>
</div>

<h3>Icon</h3>
<div class="row">
<div>
<h2>Primary</h2>
<h4>Primary</h4>
<gux-action-button accent="primary">
<div slot="title">
<gux-icon
Expand All @@ -90,7 +92,7 @@ <h2>Primary</h2>
</gux-action-button>
</div>
<div>
<h2>Secondary</h2>
<h4>Secondary</h4>
<gux-action-button accent="secondary">
<div slot="title">
<gux-icon
Expand All @@ -107,7 +109,7 @@ <h2>Secondary</h2>
</gux-action-button>
</div>
<div>
<h2>Tertiary</h2>
<h4>Tertiary</h4>
<gux-action-button accent="tertiary">
<div slot="title">
<gux-icon
Expand All @@ -124,7 +126,7 @@ <h2>Tertiary</h2>
</gux-action-button>
</div>
<div>
<h2>Danger</h2>
<h4>Danger</h4>
<gux-action-button accent="danger">
<div slot="title">
<gux-icon
Expand All @@ -142,7 +144,7 @@ <h2>Danger</h2>
</div>

<div>
<h2>Invalid</h2>
<h4>Invalid</h4>
<gux-action-button accent="invalid">
<div slot="title">
<gux-icon
Expand All @@ -160,7 +162,188 @@ <h2>Invalid</h2>
</div>

<div>
<h2>Disabled</h2>
<h4>Disabled</h4>
<gux-action-button class="disable-toggle" disabled>
<div slot="title">
<gux-icon
icon-name="generic"
screenreader-text="This will be read by a screen reader"
></gux-icon>
Disabled
</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
</div>

<h2>RTL</h2>
<h3>Default</h3>
<div class="row" dir="rtl">
<div>
<h4>Primary</h4>
<gux-action-button accent="primary">
<div slot="title">Primary</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
<div>
<h4>Secondary</h4>
<gux-action-button accent="secondary">
<div slot="title">Secondary</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
<div>
<h4>Tertiary</h4>
<gux-action-button accent="tertiary">
<div slot="title">Tertiary</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
<div>
<h4>Danger</h4>
<gux-action-button accent="danger">
<div slot="title">Danger</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>

<div>
<h4>Invalid</h4>
<gux-action-button accent="invalid">
<div slot="title">Invalid</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>

<div>
<h4>Disabled</h4>
<gux-action-button class="disable-toggle" disabled>
<div slot="title">Disabled</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
</div>

<h3>Icon</h3>
<div class="row" dir="rtl">
<div>
<h4>Primary</h4>
<gux-action-button accent="primary">
<div slot="title">
<gux-icon
icon-name="generic"
screenreader-text="This will be read by a screen reader"
></gux-icon>
Primary
</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
<div>
<h4>Secondary</h4>
<gux-action-button accent="secondary">
<div slot="title">
<gux-icon
icon-name="generic"
screenreader-text="This will be read by a screen reader"
></gux-icon>
Secondary
</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
<div>
<h4>Tertiary</h4>
<gux-action-button accent="tertiary">
<div slot="title">
<gux-icon
icon-name="generic"
screenreader-text="This will be read by a screen reader"
></gux-icon>
Tertiary
</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>
<div>
<h4>Danger</h4>
<gux-action-button accent="danger">
<div slot="title">
<gux-icon
icon-name="generic"
screenreader-text="This will be read by a screen reader"
></gux-icon>
Danger
</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>

<div>
<h4>Invalid</h4>
<gux-action-button accent="invalid">
<div slot="title">
<gux-icon
icon-name="generic"
screenreader-text="This will be read by a screen reader"
></gux-icon>
Invalid
</div>
<gux-list-item onclick="notify(event)">Test 1</gux-list-item>
<gux-list-item onclick="notify(event)">Test 2</gux-list-item>
<gux-list-item onclick="notify(event)">Test 3</gux-list-item>
<gux-list-divider></gux-list-divider>
<gux-list-item onclick="notify(event)">Test 4</gux-list-item>
</gux-action-button>
</div>

<div>
<h4>Disabled</h4>
<gux-action-button class="disable-toggle" disabled>
<div slot="title">
<gux-icon
Expand Down Expand Up @@ -208,6 +391,7 @@ <h2>Disabled</h2>
place-content: stretch space-around;
align-items: flex-start;
width: 100%;
padding-bottom: 24px;
}
</style>
</div>
2 changes: 1 addition & 1 deletion ...sys-spark-components/src/components/stable/gux-action-button/gux-action-button.light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ gux-action-button {
gux-icon {
width: var(--gse-ui-button-icon-size);
height: var(--gse-ui-button-icon-size);
padding-right: var(--gse-ui-button-gap);
padding-inline-end: var(--gse-ui-button-gap);
}
}
}
10 changes: 5 additions & 5 deletions ...s/genesys-spark-components/src/components/stable/gux-action-button/gux-action-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@

.gux-action-button {
width: calc(100% - 33px);
margin-right: 1px;
margin-inline-end: 1px;

button {
width: 100%;
max-width: none;
text-align: center;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
}

Expand All @@ -40,8 +40,8 @@
justify-content: center;
width: var(--gse-ui-button-iconOnly-width);
padding: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;

gux-icon {
width: var(--gse-ui-button-icon-size);
Expand Down

0 comments on commit 23d2ede

Please sign in to comment.