Skip to content

Commit

Permalink
feat(toolbar): rename prop hairlines to outline
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Sep 8, 2022
1 parent 36d9b5e commit 9862c93
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 16 deletions.
1 change: 1 addition & 0 deletions kitchen-sink/react/pages/Toolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function ToolbarPage() {
/>

<Toolbar
outline
top={isTop}
className={`left-0 ${
isTop
Expand Down
12 changes: 10 additions & 2 deletions src/react/components/Toolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Toolbar = forwardRef((props, ref) => {
bgClassName = '',
innerClassName = '',

hairlines = true,
outline,

tabbar,
tabbarIcons,
Expand Down Expand Up @@ -59,9 +59,17 @@ const Toolbar = forwardRef((props, ref) => {

const colors = ToolbarColors(colorsProp, dark);

const isOutline = typeof outline === 'undefined' ? theme === 'ios' : outline;

const c = themeClasses(
ToolbarClasses(
{ ...props, hairlines, translucent, bgClassName, innerClassName },
{
...props,
outline: isOutline,
translucent,
bgClassName,
innerClassName,
},
colors,
className
),
Expand Down
11 changes: 4 additions & 7 deletions src/shared/classes/ToolbarClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const ToolbarClasses = (props, colors, classes) => {
const {
bgClassName = '',
bgClass = '',
hairlines,
outline,
translucent,
innerClassName = '',
innerClass = '',
Expand All @@ -24,14 +24,11 @@ export const ToolbarClasses = (props, colors, classes) => {
bg: {
common: cls(
'absolute w-full h-full left-0 top-0',
outline && (top ? 'hairline-b' : 'hairline-t'),
bgClassName || bgClass
),
ios: cls(
hairlines && (top ? 'hairline-b' : 'hairline-t'),
colors.bgIos,
translucent && 'translucent'
),
material: cls(`${colors.bgMaterial}`, !top && 'transform rotate-180'),
ios: cls(colors.bgIos, translucent && 'translucent'),
material: cls(`${colors.bgMaterial}`),
},
inner: {
common: cls(
Expand Down
6 changes: 4 additions & 2 deletions src/svelte/components/Toolbar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
export let bgClass = '';
export let innerClass = '';
export let hairlines = true;
export let outline = undefined;
export let tabbar = false;
export let tabbarLabels = false;
Expand All @@ -36,6 +36,8 @@
width: '',
};
$: isOutline = typeof outline === 'undefined' ? theme === 'ios' : outline;
$: hasHighlight = theme === 'material' && tabbar && !tabbarIcons;
const setHighlight = () => {
Expand Down Expand Up @@ -70,7 +72,7 @@
{ ios, material },
ToolbarClasses(
{
hairlines,
outline: isOutline,
translucent,
bgClass,
innerClass,
Expand Down
6 changes: 3 additions & 3 deletions src/types/Toolbar.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ interface Props {
innerClassName?: string;

/**
* Renders outer hairlines (borders) on iOS theme
* Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
*
* @default true
* @default undefined
*/
hairlines?: boolean;
outline?: boolean;

/**
* Enables tabbar, same as using `<Tabbar>` component
Expand Down
14 changes: 12 additions & 2 deletions src/vue/components/Toolbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
bgClass: { type: String, default: '' },
innerClass: { type: String, default: '' },
hairlines: { type: Boolean, default: true },
outline: { type: Boolean, default: undefined },
tabbar: { type: Boolean, default: false },
tabbarLabels: { type: Boolean, default: false },
Expand All @@ -65,8 +65,18 @@
ToolbarColors(props.colors || {}, useDarkClasses)
);
const isOutline = computed(() =>
typeof props.outline === 'undefined'
? theme.value === 'ios'
: props.outline
);
const c = useThemeClasses(props, () =>
ToolbarClasses(props, colors.value, ctx.attrs.class)
ToolbarClasses(
{ ...props, outline: isOutline.value },
colors.value,
ctx.attrs.class
)
);
const setHighlight = () => {
if (hasHighlight.value && highlightElRef.value) {
Expand Down

0 comments on commit 9862c93

Please sign in to comment.