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

Jump to bottom

Buttons and breadcrumbs #862

Merged
merged 4 commits into from
Jul 28, 2023
Merged

Buttons and breadcrumbs #862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7722209
update buttons and breadcrumbs
brandonreid Jul 27, 2023
c52ef0f
denest props and resolve PR comments
brandonreid Jul 27, 2023
7d0ca24
minor light mode fixes
brandonreid Jul 27, 2023
b1a732e
fix small buttons
brandonreid Jul 28, 2023
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
177 changes: 67 additions & 110 deletions demo/sections/components/Buttons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,150 +2,107 @@
<ComponentPage
title="Button"
:demos="[
{ title: 'Simple Buttons', description: 'here is some useful info' },
{ title: 'With Icons', description: 'here is some useful info' },
{ title: 'Icons Only', description: 'here is some useful info' },
{ title: 'Icons Round', description: 'here is some useful info' },
{ title: 'Button Sizes', description: 'here is some useful info' },
{ title: 'Round Button Sizes', description: 'here is some useful info' },
{ title: 'Disabled', description: 'here is some useful info' },
{ title: 'Loading', description: 'here is some useful info' },
{ title: 'Default button', description: 'Your go-to button for interactions.' },
{ title: 'Primary button', description: 'For a button that progresses the current journey. Only one per screen.' },
{ title: 'Icon only', description: 'When an icon is provided with no text.' },
{ title: 'Flat icon only', description: 'While any button can technically be made flat, this style is intended to be used with icon only buttons.' },
{ title: 'Loading', description: 'A soothing loading indicator for when a button is working on it.' },
]"
>
<template #description>
This is where we add a short description of <p-code inline>
p-button
</p-code>. Describe the components intent, not hyper specific documentation that belongs on vitepress page.
Buttons. The 'DON'T PANIC' signs of the internet, assuring us there's always something we're allowed to click.
</template>

<template #simple-buttons>
<div class="flex gap-1 flex-wrap">
<template #default-button>
<div class="flex gap-4 items-center flex-wrap">
<p-button>
something
Button
</p-button>

<p-button secondary>
secondary
</p-button>

<p-button inset>
inset
<p-button icon="PlusIcon">
With Icon
</p-button>

<p-button flat>
flat
<p-button icon-append="PlusIcon">
Appended Icon
</p-button>

<p-button danger>
danger
<p-button dangerous>
Dangerous
</p-button>

<p-button secondary danger>
secondary danger
<p-button disabled>
Disabled
</p-button>
</div>
</template>

<template #with-icons>
<div class="flex gap-1 flex-wrap">
<p-button icon="BeakerIcon">
icon with text
</p-button>

<p-button secondary icon="BeakerIcon">
icon with text
</p-button>

<p-button inset icon="BeakerIcon">
icon with text
</p-button>

<p-button flat icon="BeakerIcon">
icon with text
<div class="flex gap-4 items-center flex-wrap">
<p-button small>
Button
</p-button>

<p-button danger icon="BeakerIcon">
icon with text
<p-button small icon="PlusIcon">
With Icon
</p-button>

<p-button secondary danger icon="BeakerIcon">
icon with text
<p-button small icon-append="PlusIcon">
Appended Icon
</p-button>
</div>
</template>

<template #icons-only>
<div class="flex gap-1 flex-wrap">
<p-button icon="BeakerIcon" />
<p-button secondary icon="BeakerIcon" />
<p-button inset icon="BeakerIcon" />
<p-button flat icon="BeakerIcon" />
<p-button danger icon="BeakerIcon" />
<p-button secondary danger icon="BeakerIcon" />
</div>
</template>

<template #icons-round>
<div class="flex gap-1 flex-wrap">
<p-button rounded icon="BeakerIcon" />
<p-button secondary rounded icon="BeakerIcon" />
<p-button inset rounded icon="BeakerIcon" />
<p-button flat rounded icon="BeakerIcon" />
<p-button danger rounded icon="BeakerIcon" />
<p-button secondary danger rounded icon="BeakerIcon" />
</div>
</template>

<template #button-sizes>
<div class="flex items-start gap-1">
<p-button size="xs">
size xs
<template #primary-button>
<div class="flex gap-4 items-center flex-wrap">
<p-button primary>
Button
</p-button>
<p-button size="sm">
size sm
<p-button primary icon="PlusIcon">
With Icon
</p-button>
<p-button size="md">
size md
<p-button disabled primary>
Disabled
</p-button>
<p-button size="lg">
size lg
<p-button dangerous primary>
Dangerous
</p-button>
<p-button size="xl">
size xl
<p-button primary small>
Small
</p-button>
</div>
</template>

<template #round-button-sizes>
<div class="flex items-start gap-1">
<p-button size="xs" rounded icon="BeakerIcon" />
<p-button size="sm" rounded icon="BeakerIcon" />
<p-button size="md" rounded icon="BeakerIcon" />
<p-button size="lg" rounded icon="BeakerIcon" />
<p-button size="xl" rounded icon="BeakerIcon" />
<template #icon-only>
<div class="flex gap-4 items-center flex-wrap">
<p-button icon="PlusIcon" />
<p-button icon="RocketLaunchIcon" primary />
<p-button icon="TrashIcon" dangerous />
</div>
<div class="flex gap-4 items-center flex-wrap">
<p-button small icon="PlusIcon" />
<p-button small icon="RocketLaunchIcon" primary />
<p-button small icon="TrashIcon" dangerous />
</div>
</template>

<template #disabled>
<div class="flex gap-1 flex-wrap">
<p-button disabled>
disabled
</p-button>
<p-button disabled secondary icon="BeakerIcon">
disabled secondary with icon
</p-button>
<p-button disabled inset icon="BeakerIcon" />
<p-button disabled flat icon="BeakerIcon" />
<p-button disabled danger icon="BeakerIcon" />
<p-button secondary disabled danger icon="BeakerIcon" />
<template #flat-icon-only>
<div class="flex gap-4 items-center flex-wrap">
<p-button icon="PlusIcon" flat />
<p-button icon="TrashIcon" flat dangerous />
<p-button icon="PlusIcon" flat small />
<p-button icon="PlusIcon" flat disabled />
</div>
</template>

<template #loading>
<div class="flex gap-1 flex-wrap">
<p-button :loading="buttonLoading" icon="BeakerIcon">
Loading Button
<div class="flex gap-4 flex-wrap">
<p-button :loading="buttonLoading">
Button
</p-button>
<p-button :loading="buttonLoading" primary>
Button
</p-button>
<p-button :loading="buttonLoading" dangerous>
Button
</p-button>
<p-button :loading="buttonLoading" primary dangerous>
Button
</p-button>
<p-button :loading="buttonLoading" icon="PlusIcon" />
<p-button :loading="buttonLoading" icon="PlusIcon" flat />
<p-button :loading="buttonLoading" icon="PlusIcon" flat dangerous />
</div>

<p-checkbox v-model="buttonLoading" label="show loading" />
Expand Down
13 changes: 9 additions & 4 deletions public/tailwindPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const colors = () => {
return {
divider: 'var(--p-color-divider)',
active: 'var(--p-color-active)',
focus: 'var(--p-color-focus)',
'focus-halo': 'var(--p-color-focus-halo)',
'focus-ring': 'var(--p-color-focus-ring)',
'focus-ring-offset': 'var(--p-color-focus-ring-offset)',
awaiting: 'var(--p-color-awaiting)',
live: 'var(--p-color-live)',
event: 'var(--p-color-event)',
Expand All @@ -41,11 +41,15 @@ const colors = () => {
}

const spacing = {
'spacing-focus-halo': 'var(--p-spacing-focus-halo)',
'spacing-focus-ring': 'var(--p-spacing-focus-ring)',
}

const ringWidth = {
'spacing-focus-halo': 'var(--p-spacing-focus-halo)',
'spacing-focus-ring': 'var(--p-spacing-focus-ring)',
}

const ringOffsetWidth = {
'focus-ring': 'var(--p-spacing-focus-ring-offset)',
}

const fontFamily = {
Expand All @@ -56,6 +60,7 @@ const extend = {
colors,
spacing,
ringWidth,
ringOffsetWidth,
fontFamily,
}
const plugins = [forms]
Expand Down
12 changes: 9 additions & 3 deletions src/components/BaseInput/PBaseInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,22 @@
flex
items-center
border
focus-within:border-focus
focus-within:ring-spacing-focus-halo
focus-within:ring-focus-halo
focus-within:ring-spacing-focus-ring
focus-within:ring-focus-ring
focus-within:ring-offset-focus-ring
focus-within:ring-offset-focus-ring-offset
rounded-md
font-normal;
background-color: var(--p-color-input-bg);
border-color: var(--p-color-input-border);
color: var(--p-color-input-text);
}

.p-base-input:focus-within {
background-color: var(--p-color-input-bg-focus);
border-color: var(--p-color-input-border-focus);
}

.p-base-input input::placeholder {
color: var(--p-color-text-subdued);
}
Expand Down
5 changes: 2 additions & 3 deletions src/components/BreadCrumbs/PBreadCrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,13 @@

.p-bread-crumbs__crumb:not(:first-child) { @apply
before:content-['\00a0\/\00a0']
before:text-foreground-300
before:text-subdued
before:font-normal
}

.p-bread-crumb__crumb--link { @apply
text-primary-500
text-link
cursor-pointer
hover:underline
active:text-primary-700
}
</style>
Loading
Loading