Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(Switch): use CSS logical properties instead of physical values #1145

Merged
merged 6 commits into from
Jul 16, 2024
Merged

refactor(Switch): use CSS logical properties instead of physical values #1145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c7488b6
refactor(Switch): use CSS logical properties instead of physical values
Cata1989 Jul 1, 2024
feef84c
refactor(Switch): clean code
Cata1989 Jul 1, 2024
f414839
refactor(Switch): add css support for writing mode
Cata1989 Jul 2, 2024
8c9706c
refactor(Switch): change prop name for consistency
Cata1989 Jul 3, 2024
32e65e6
fix(Switch): use `inset-inline-start` for positioning, remove `orient…
dgonzalezr Jul 16, 2024
2e1f53b
docs(Switch): update Storybook examples
dgonzalezr Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Args, Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined.js';

import mdx from './bq-switch.mdx';
import { SWITCH_INNER_LABEL, SWITCH_JUSTIFY_CONTENT } from '../bq-switch.types';
Expand Down Expand Up @@ -51,16 +52,16 @@ type Story = StoryObj;

const Template = (args: Args) => html`
<bq-switch
background-on-hover=${args['background-on-hover']}
?background-on-hover=${args['background-on-hover']}
?checked=${args.checked}
?disabled=${args.disabled}
?full-width=${args['full-width']}
inner-label=${args['inner-label']}
justify-content=${args['justify-content']}
name=${args.name}
inner-label=${ifDefined(args['inner-label'])}
justify-content=${ifDefined(args['justify-content'])}
name=${ifDefined(args.name)}
?required=${args.required}
?reverse-order=${args['reverse-order']}
value=${args.value}
value=${ifDefined(args.value)}
@bqFocus=${args.bqFocus}
@bqBlur=${args.bqBlur}
@bqChange=${args.bqChange}
Expand Down Expand Up @@ -104,8 +105,8 @@ export const ReverseOrder: Story = {

export const FullWidth: Story = {
render: (args) => html`
<div class="m-auto max-w-md">
<div class="mb-4 text-m font-regular">
<div class="max-is-[28rem] m-b-[auto] m-i-[auto]">
<div class="text-m font-regular m-be-4">
Use a combination of <code class="bg-ui-secondary-disabled text-text-primary">full-width</code>,
<code class="bg-ui-secondary-disabled text-text-primary">justify-content</code> and
<code class="bg-ui-secondary-disabled text-text-primary">reverse-order</code>
Expand Down
5 changes: 3 additions & 2 deletions packages/beeq/src/components/switch/bq-switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ export class BqSwitch {
/>
{/* Control */}
<div
class="bq-switch--control relative box-border flex h-[--bq-switch--height] w-[--bq-switch--width] justify-between rounded-full bg-ui-tertiary p-xs2 transition duration-300"
class="bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand"
part="control"
>
{this.innerLabel === 'icon' && (
Expand Down Expand Up @@ -246,7 +246,8 @@ export class BqSwitch {
{/* Label */}
<span
class={{
'bq-switch--label': true,
'bq-switch--label text-m font-medium leading-regular text-text-primary transition-colors duration-300':
true,
'ms-s': this.hasLabel && !this.reverseOrder,
'me-s': this.hasLabel && this.reverseOrder,
}}
Expand Down
26 changes: 6 additions & 20 deletions packages/beeq/src/components/switch/scss/bq-switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* -------------------------------------------------------------------------- */
/* Switch styles */
/* Switch styles */
/* -------------------------------------------------------------------------- */

@import './bq-switch.variables';
Expand All @@ -9,11 +9,11 @@
}

:host(.full-width) {
@apply w-full;
@apply is-full;
}

.bq-switch {
@apply flex cursor-pointer select-none items-center rounded-s p-2 transition-colors duration-300;
@apply flex cursor-pointer select-none items-center rounded-s transition-colors duration-300 p-b-2 p-i-2;

justify-content: var(--bq-switch--justify-content);

Expand All @@ -33,20 +33,10 @@
}
}

.bq-switch--input:checked {
~ .bq-switch--control {
@apply bg-ui-brand;

.bq-switch--control__dot {
@apply translate-x-[calc(var(--bq-switch--width)_-_var(--bq-switch--dot-size)_-_8px)];
}
}
}

.bq-switch--control__dot {
@apply absolute h-[--bq-switch--dot-size] w-[--bq-switch--dot-size] justify-end rounded-full;
@apply bg-icon-inverse group-[&.is-checked]:bg-[--bq-icon--alt];
@apply transition duration-300;
@apply absolute start-xs2 rounded-full bg-icon-inverse bs-[--bq-switch--dot-size] is-[--bq-switch--dot-size];
@apply group-[&.is-checked]:start-[calc(100%_-_var(--bq-switch--dot-size)_-_var(--bq-spacing-xs2))] group-[&.is-checked]:bg-[--bq-icon--alt];
@apply transition-all duration-300;
}

.bq-switch--control__icon {
Expand All @@ -56,7 +46,3 @@
@apply flex;
}
}

.bq-switch--label {
@apply text-m font-medium leading-regular text-text-primary transition-colors duration-300;
}